0

I am looking at this post: Using jQuery to dynamically add form fields (or fieldsets) based on a dropdown box value

is there not an easier way?

my code: 

 <tr>
   <td valign="top">
   <label for="children">No. of Minor Children*</label>
   </td>
   <td>
     <select id="nochildren" name="nochildren" onchange="displayfields(this.value)">
        <option value="1">0</option>
        <option value="1">1</option>
        <option value="2">2</option>  
        <option value="3">3</option>
        <option value="4">4</option>
     </select>
   </td>
   <br />               
   <option value="<?php echo $row_list['nochildren']; ?>">
     <?php if($row_list['nochildren']==$select){ echo $row_list['nochildren']; } ?>
   </option>                   

  <script language="JavaScript">                               
     $(document).ready(function(){
        $('#nochildren').change(function(){
           $("#child").show();  
           displayfields($(this).val());
        });
     });
     function displayfields(val)
    {           
      for (var i=1 ; i<val; val++)
      {        
         alert(i);                                                                    
         $("#child"+i).show();                          
      }
    }           
    </script>   
 </tr>  
 <div id="child">
   <tr>
     <td valign="top">
       <label for="names">Child Full names*</label>
     </td>                  
     <td valign="top">
      <input  type="text" name="childname" maxlength="50" size="30"></input>  
     </td>
    </tr>   
 </div>

if no children don't show the div if 4 children show 4 div tags

Community
  • 1
  • 1
charlie_cat
  • 1,830
  • 7
  • 44
  • 73
  • 3
    Please add a fiddle for reference. – Saksham Aug 25 '14 at 08:40
  • a fiddle? what is that? i have not been on here for over 2 years LOL – charlie_cat Aug 25 '14 at 08:50
  • search fiddle on google. It is a site used to host code snippets for reference and sharing, which can be modified and manipulated – Saksham Aug 25 '14 at 08:51
  • Or we could just link you to the site: [JS Fiddle](http://jsfiddle.net/). @Saksham: if you ask someone to do something, and they clearly explain they don't know what that is, why would you not make it easy, rather than telling them to use Google to find it? – David Thomas Aug 25 '14 at 08:58
  • LOL am not a developer anymore, doing a favour for my boss to add some features to our family law clinic site. Im a candidate attorney now. so cant remember how to code anymore LOL can some one just show me how to get my code right please? it will be much appreciated :) – charlie_cat Aug 25 '14 at 09:09
  • here: http://jsfiddle.net/charles_cat/qzk7d0om/ – charlie_cat Aug 25 '14 at 09:28
  • I don't really understand what you are trying to do. Could you please explain? – Alkis Kalogeris Aug 25 '14 at 10:06
  • depeinding on the number of children you choose from the dropdown list, it must display the name input field for each of the number you chose. if you chose 4 children, display 4 input fields – charlie_cat Aug 25 '14 at 10:18

2 Answers2

0

Try this:

<script type="text/javascript">

  $(document).ready(function(){
     $('#nochildren').change(function(){

        //-------
        // Here add your code to hide all div's
        //-------

        displayfields($(this).val());
     });
  });

   function displayfields(val)
   {                                                              
      for (var i=1 ; i<val; val++)
      {        
          alert(i);                                                                    
          $("#child"+i).show();                          
      }
   }   
</script>
Viswanath Donthi
  • 1,791
  • 1
  • 11
  • 12
0

See this Fiddle. I have not included the styles for it and it is just a core implementation.

Below is the jQuery which I am using

$(function(){
    var inputString="<input type='text'>";
    $('#selectBox').on('change',function(){
        $('#result').html('');
        for(var i = 0;i<$('#selectBox :selected').val();i++)
        {
            $('#result').append(inputString);
        }
    });
});
Saksham
  • 9,037
  • 7
  • 45
  • 73