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.
Use bootstrap, it will make it very easy to do. Copy this into a text document, save it as an .html and look at the result.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><label>Textbox:</label><input type="text"></input></li>
</ul>
</div>
</div>
</body>
</html>