Dynamically adding a text field does not work

Question

This is pretty unpleasant. My code worked fine until the last week. I add several text fields to the HTML page when the user changes [using change() ] the value in the drop-down list.

Here's the HTML code snippet:

 <div id="files" class="control-group"> <label class="control-label">No. of files</label> <div class="controls" > <select id="files" name="files" class="span3"> <option value="">--Select Option--</option> <?php for($i=1;$i<21;$i++){ ?> <option value="<?php echo $i ?>"><?php echo $i ?></option> <?php } ?> </select> </div> </div> <div class="control-group" id="titles"> <label class="control-label">File Titles</label> <div class="controls" id="titleAdd"></div> </div> 

Here is my Javascript / jQuery :

 $(document).ready(function(){ $("#titles").hide(); }); var container; // Add & Remove textboxes $("#files").change(function(){ //Remove all textboxes $("#titles").show(); $(container).empty(); $(container).remove(); //"DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS. container = $('<div>', {class: 'controls'}); var option = $("#files").val(); for(i=1;i<=option;i++) { // Add a TextBox $(container).append('<input style="display: block;" type=text name="Description[]" class="span3 input-left-top-margins" id="Description' + i +'"' + 'placeholder="File ' + i + ' Title" />'); } $('#titleAdd').after(container); // ADD THE DIV ELEMENT IN THE RIGHT PLACE. }); 

The most annoying part is that this code worked fine a few days ago.

Answer 1

There are two #files identifiers.

See a working example here: https://jsfiddle.net/1c3b63f4/ - jQuery will always return an empty string in this assignment: $("#files").val(); .

Answer 2

Put the code '$("#files").change(function(){' inside 'document.ready' : -

 $(document).ready(function(){ $("#titles").hide(); var container; // Add & Remove textboxes $("#files").change(function(){ //Remove all textboxes $("#titles").show(); $(container).empty(); $(container).remove(); //"DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS. container = $('<div>', {class: 'controls'}); var option = $("#files").val(); for(i=1;i<=option;i++) { // Add a TextBox $(container).append('<input style="display: block;" type=text name="Description[]" class="span3 input-left-top-margins" id="Description' + i +'"' + 'placeholder="File ' + i + ' Title" />'); } $('#titleAdd').after(container); // ADD THE DIV ELEMENT IN THE RIGHT PLACE. }); }); 

Answer 3

Try it...

Change name file names to filesdata because you already used id "files" for div

 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <div id="files" class="control-group"> <label class="control-label">No. of files</label> <div class="controls" > <select id="filesdata" name="files" class="span3"> <option value="">--Select Option--</option> <option value="1">1</option> <option value="3">2</option> <option value="3">3</option> </select> </div> </div> <div class="control-group" id="titles"> <label class="control-label">File Titles</label> <div class="controls" id="titleAdd"></div> </div> <script> $(document).ready(function(){ $("#titles").hide(); var container=""; // Add & Remove textboxes $("#filesdata").change(function(){ //Remove all textboxes $("#titles").show(); $(container).empty(); $(container).remove(); //"DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS. container = $('<div>', {class: 'controls'}); var option = $("#filesdata").val(); for(i=1;i<=option;i++) { // Add a TextBox $(container).append('<input style="display: block;" type=text name="Description[]" class="span3 input-left-top-margins" id="Description' + i +'"' + 'placeholder="File ' + i + ' Title" />'); } $('#titleAdd').after(container); // ADD THE DIV ELEMENT IN THE RIGHT PLACE. }); }); </script> 

Demo: https://jsfiddle.net/jqksjzL1/

Answer 4

you provided the same id "files" for div and select

change

 <select id="files" name="files" class="span3"> 

to

 <select id="files-select" name="files" class="span3"> 

and try this js,

 $(document).ready(function(){ $("#titles").hide(); }); var container; // Add & Remove textboxes $("#files-select").change(function(){ //Remove all textboxes $("#titles").show(); $(container).empty(); $(container).remove(); //"DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS. container = $('<div>', {class: 'controls'}); var option = $("#files-select").val(); for(i=1;i<=option;i++) { // Add a TextBox $(container).append('<input style="display: block;" type=text name="Description[]" class="span3 input-left-top-margins" id="Description' + i +'"' + 'placeholder="File ' + i + ' Title" />'); } $('#titleAdd').after(container); // ADD THE DIV ELEMENT IN THE RIGHT PLACE. });