Dynamic addition of textbox not working

Question

This is quite frustrating. My code was working fine until last week. I am adding multiple textboxes to my HTML page when the user changes [using change()] the value in a dropdown selection.

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's 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 irritating part is that this code was working fine a few days ago.

container would be undefined at start. Also, your append will duplicate the id="Description' — Shaunak D
– Shaunak D, Commented Jun 11, 2015 at 5:28
@Deena - No error. Earlier, when I changed the value of #files (say 5), 5 textboxes used to get created. Now, the textboxes aren't getting created — Shreyas Tripathy
– Shreyas Tripathy, Commented Jun 11, 2015 at 5:29

dhh · Accepted Answer · 2015-06-11 05:31:53Z

3

There are two ids #files.

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

answered Jun 11, 2015 at 5:31

dhh

4,3578 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dhh Over a year ago

Glad I could help. Please mark the answer as accepted to show that this question was solved.

Domain · Accepted Answer · 2015-06-11 05:28:57Z

2

Put your '$("#files").change(function(){' code 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.
    });
 });

answered Jun 11, 2015 at 5:28

Domain

11.8k3 gold badges26 silver badges45 bronze badges

1 Comment

Domain Over a year ago

Change the ID of main div from 'files' to something else.

Deenadhayalan Manoharan · Accepted Answer · 2015-06-11 05:36:46Z

Try this...

Change id name files 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/

Ayyanar G · Accepted Answer · 2015-06-11 05:34:49Z

you have given same id "files" for both 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.
    });

Collectives™ on Stack Overflow

Dynamic addition of textbox not working

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related