CODEWITHSUNDEEP
javascriptjqueryhtml
Alaa
Alaa

Reputation: 25

dynamically show text box based on dynamically created dropdown menue

I am very new in jsp, and jquery my code create dynamic text boxes and one drop-down menu based on button clicked,

after created textboxes I want to add one more textbox if the user select option male after the text boxes dynamically added.

the add code works, but the text box when selecting the male option not works.

please please help.

this is my code

<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <br />
    <div class="container">
        <h3 align="center">Change Control Board (CCB)</h3>
        <br />
        <h4 align="center">Enter Change Details</h4>
        <br />
        <form name="form1" method="GET" action="jsv" id="form1">
            <div class="table-repsonsive">
                <span id="error"></span>
                <table class="table table-bordered" id="item_table">
                    <tr>
                        <th>Enter Change Name</th>
                        <th>Enter Change Description</th>
                        <th>Enter Change GW</th>
                        <th>Enter Change AW</th>
                        <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
                    </tr>
                </table>
                <div align="center">
                    <input type="submit" name="submit" class="btn btn-info" value="Insert" />
                </div>
            </div>
        </form>
    </div>
</body>

</html>
<script>
    $(document).ready(function() {

        $(document).on('click', '.add', function() {
            var html = '';
            html += '<tr> name="change_name1[]"';
            html += '<td><input type="text" name="change_name[]" class="form-control change_name" /></td>';
            html += '<td><textarea name="change_desc[]" class="form-control change_desc rows="3"" /></td>';
            html += '<td><input  type="text" name="change_GW[]" class="form-control change_GW" /></td>';
            html += '<td><input style="display:none;" id="business"  type="text" name="change_G[]" class="form-control change_GW" /></td>';

            html += '<td><select id="purpose" name="sex-type" class="form-control item_unit"><option value="0">select</option><option value="1">male</option><option value="2">Passing on to a client</option></select></td>';

            html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
            $('#item_table').append(html);
        });

        $(document).on('click', '.remove', function() {
            $(this).closest('tr').remove();
        });
    });

    $(document).ready(function() {
        $('#purpose').on('change', function() {
            if (this.value == '1') {
                $("#business").show();
            } else {
                $("#business").hide();
            }
        });
    });
</script>

Upvotes: 1

Views: 99

Answers (3)

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23738

First of all you have an error on the first line where you are concatenating the tr in the $html, it is '<tr> name="change_name1[]"'; where as it should be '<tr name="change_name1[]">'; but since the name attribute is not a valid attribute for tr you should change it to a unique id.

I hope the select menu and the input boxes that are generated by the click of a button are not multiple as there is an id attribute on the select input which needs to be unique in case there are multiple select boxes, but since it is not mentioned you make a slight change to your event binding like the code below You must change the id attributes from static to dynamic something like appending a count along with their ids i have added it for you hope it solves your problem.

your final script will look like this 

$(document).ready(function () {
        var count = 0;
        $(document).on('click', '.add', function () {
            var html = '';
            html += '<tr>';
            html +='<td><input type="text" name="change_name[]" class="form-control change_name" /></td>';
            html +='<td><textarea name="change_desc[]" class="form-control change_desc rows="3"" /></td>';
            html +='<td><input  type="text" name="change_GW[]" class="form-control change_GW" /></td>';
            html += '<td><input style="display:none;" id="business_' + count +
                '"  type="text" name="change_G[]" class="form-control change_GW" /></td>';

            html += '<td><select id="purpose_' + count +
                '" name="sex-type" class="form-control item_unit"><option value="0">select</option><option value="1">male</option><option value="2">Passing on to a client</option></select></td>';

            html +=
                '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
            $('#item_table').append(html);

            $('#purpose_' + count).on('change', function () {
                if (this.value == '1') {
                    $("#business_"+count).show();
                } else {
                    $("#business_"+count).hide();
                }

            });
            count++;
        });

        $(document).on('click', '.remove', function () {
            $(this).closest('tr').remove();
        });


    });

Upvotes: 1

Chandrakant Thakkar
Chandrakant Thakkar

Reputation: 978

You are adding select dynamically at run time.so, after adding Select You need to bind it's change event. So Just make change into your javascript code 

<script>
    $(document).ready(function(){
    counter=0;
    $(document).on('click', '.add', function(){
      counter=counter+1;
      var html = '';
     html += '<tr> name="change_name1[]"';
     html += '<td><input type="text" name="change_name[]" class="form-control change_name" /></td>';
     html += '<td><textarea name="change_desc[]" class="form-control change_desc rows="3"" /></td>';
     html += '<td><input  type="text" name="change_GW[]" class="form-control change_GW" /></td>';
     html += '<td><input style="display:none;" id="business_'+counter+'"  type="text" name="change_G[]" class="form-control change_GW" /></td>';

    html += '<td><select id="purpose_'+counter+'" name="sex-type" class="form-control item_unit"><option value="0">select</option><option value="1">male</option><option value="2">Passing on to a client</option></select></td>';

     html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
    $('#item_table').append(html);
    $('#purpose_'+counter).on('change', function() {
         if ( this.value == '1')
          {
            $("#business_"+counter).show();
          }
         else
        {
          $("#business_"+counter).hide();
         }

        });
    });




        $(document).on('click', '.remove', function(){
         $(this).closest('tr').remove();
        });

        });


    </script>

Upvotes: 0

Heiko Jakubzik
Heiko Jakubzik

Reputation: 419

Cut this code:

$('#purpose').on('change', function() {
  if ( this.value == '1')
    {
       $("#business").show();
    }
         else
    {
       $("#business").hide();
   }
}

and paste it right behind $('#item_table').append(html);

Two $(document).ready() sections make no sense. And the event handler (on click) needs to be attached after you create the select box.

Upvotes: 0

Related Questions