I am looking to use JS to add a new dropdown menu with a button click, where the dropdown menu's elements create a text box when clicked on.
HTML:
<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
</div>
<br />
JS:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var click_number = 0;
$("#btnAdd").bind("click", function () {
var div = $("<div />");
var input = $("<div id='search'><label>Input <textarea rows='1' name='input_"+ click_number +"'><?php echo $_POST['input_". click_number ."']; ?></textarea></label></div>");
input.appendTo('#TextBoxContainer');
div.html(RemoveDynamicTextBox());
$("#TextBoxContainer").append(div);
console.log(click_number);
click_number++;
});
$("body").on("click", ".remove", function () {
for ($i=0; $i<2; $i++){
$('#search').remove();
}
click_number--;
console.log(click_number);
});
});
function RemoveDynamicTextBox() {
return "<input id='search' type='button' value='Remove' class='remove' />";
}
</script>
Currently, the above code adds a textbox and remove button with each button click. I then use the textbox as a post variable input while containing this all within a form with a submit button so I can use the input in a mysqli query. I increment the name of the post variable with the click number to distinguish the inputs later in the query.
I am new to JS (so if I haven't provided enough info, let me know and i'll edit), but I would like to have a lot of different options for input text boxes in a dropdown menu that is added with the button click. Then when the user clicks on an element from the dropdown menu, it is added as a text box input. So, each time the user clicks the add button, a new dropdown menu would appear. Thus, in theory I could have 2 of the same inputs with different increment in their name that could be differentiated later. Also, I would have the remove button remove both the added text boxes and the dropdown menu associated with the last "add" button click.
