Dynamic Input Text Boxes using jQuery Mobile?

Question

I want to add dynamic input text fields based on the value user selects from a select menu using jQuery Mobile.

I am creating an app where when a user select the number of children, two new input box should be shown that asks for the name and birthday of that child.

These two boxes should be displayed based on the value user selects for eg; if a user selects 2 than four input boxes should be shown.

I also want to know how can I read the values from these input boxes usinh jQuery Mobile. Here is some HTML code

    <li data-role="fieldcontain"> 
       <label for="children" class="select">Number of Kids</label>
       <select name="children" id="children" data-mini="true">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
       </select> 
   </li>

codaniel · Accepted Answer · 2012-05-17 12:23:35Z

To create the number of inputs based on how many children are selected you could do the following:

$(document).on('pageinit',function(){ // use this instead of dom ready, .on is dependent upon jQuery 1.7 + use bind or delegate if you have older version
    $('#children').on('change',function(){ // this function runs each time the select menu is changed
        children = $(this).val(); //set variable for number of children

        while(i <= children){ //loop through as long as i is less than number of children
            $('form').append('<label>Name</label><input type="text" name="child'+i+'Name" /><label>Age</label><input type="text" name="child'+i+'Age" />'); // append the input to form
            i++ // add one to our incremnt variable  
        }

        $('.ui-content').append('<input type="submit" value="Submit" />'); // add our submit button on end
        $('.ui-page').trigger('create'); // then tell JQM to recreate page because we added new content
    });
});

Here is a working example for that -> http://jsfiddle.net/codaniel/CDUth/1/

As for reading the values you can see that i used .val(). That is the easiest way of reading a specific input. Check documentation for more examples-> http://api.jquery.com/val/

You can also serialize the whole form like with serialize(). Read more here -> http://api.jquery.com/serialize/

Mario · Accepted Answer · 2012-05-18 21:57:38Z

Here is a slightly improved version of what codaniel had. His was good, but had little "bugs" as appending the submit button and if you change back to lets say 1 child, the number of inputs wouldn't change.

var html = '';
$('#children').on('change', function() {
   children = $(this).val();
   html = '';

   for (var i = 0; i < children; i++) {
        html += '<label>Name</label><input type="text" id="textName' + i + '" name="child' + i + 'Name" /><label>Age</label><input type="text" name="child' + i + 'Age" id="textAge' + i + '" />';
   }

   $('#kidsFields').html(html);
   $('#kidsFields').append('<input type="submit" value="Submit" />');

   $('.ui-page').trigger('create');
});

http://jsfiddle.net/HwFFU/1/

As for the reading the values, it's hard to help you with that without knowing what you want to do with them. But as Codaniel said, easiest was would be to loop through the input and use .val() to get the text inside!

Collectives™ on Stack Overflow

Dynamic Input Text Boxes using jQuery Mobile?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related