How to create jQuery input field

Question

Suppose I have a drop-down list to determine the number of input lines, then generate highlighted input lines, after which each line of the input field with an attached drop-down box can determine how many input fields each line is shown below:

Can anyone suggest a fragment of this procedure?

thanks

Answer 1

I will not give you a specific snippet for this, but give you some tips. Here they are:

• Think about the HTML structure for this (for example, a separate first choice from the rest of the form, for example, specify the rest of the <div> form-dynamic-fields with the class form-dynamic-fields so that it serves as a container for dynamically generated fields),
• Use jQuery function . delegate () for attaching events (delegate them to selection fields in dynamic fields),
• Depending on the choice of a specific selection field, add, delete or replace the corresponding rows (when changing the value of the main selection field) or fields (when changing the selection value for a specific row),
• You should probably use the onchange event.

An example of using the .delegate() function might be this:

 jQuery('.form-dynamic-fields').delegate('select', 'change', function(event){ var fields_in_a_row = jQuery(this).val(); // how many fields in current row // insert or remove appropriate number of fields for current row here }); 

and it will work for each <select> field that is generated dynamically, since the container with the form-dynamic-fields class remains their parent and is not deleted.

So, given how you can structure your form, how to attach events, what they should do, and which event you should use, I would like ...

... encourage you to test various solutions and share information about the progress you have made in solving this problem.

EDIT:

Some working example to stimulate you (see jsFiddle ):

• HTML:

   <form class="form-dynamic" action="" method="post"> <select name="number_of_rows"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <div class="form-dynamic-fields"> </div> </form> 

• JavaScript (running onDomReady):

   jQuery('.form-dynamic').delegate('select[name="number_of_rows"]', 'change', function(event){ var field_template = '<input type="text" name="row[]" /><br />'; var howmany = parseInt(jQuery(this).val()); var container = jQuery(this).parent('.form-dynamic').find('.form-dynamic-fields').empty(); if (howmany > 0){ for (i=1; i<=howmany; i++){ container.append(jQuery('<div class="form-dynamic-row"><input type="text" name="rows[' + i +'][]" /> <select name="rows_counts[]" data-row-id="' + i + '"><option>1</option><option>2</option><option>3</option><option>4</option></select></div>')); } } }); jQuery('.form-dynamic').delegate('select[name="rows_counts[]"]', 'change', function(event){ var parent = jQuery(this).parent('.form-dynamic-row'); parent.find('input[type="text"]').remove(); var howmany = jQuery(this).val(); var row_id = jQuery(this).attr('row-id'); for (i=1; i<=howmany; i++){ parent.prepend('<input type="text" name="rows[' + row_id + '][' + i + ']" />'); } }); 

What you need to do:

• clear the code
• add a style (so the fields have an appropriate width)
• check and ultimately fix the name attributes of the <input> fields,
• Fix problems that may occur during implementation,

Hope this helps :)

Answer 2

Not letting you do your homework is not very good for the SO community, but I could not resist it. My apologies guys.

Online Demo: http://jsfiddle.net/E46P5/

 var input = '<input type="text" />'; //input html var select = '<select>'+ //select html '<option value="0"></option>'+ '<option value="1">1</option>'+ '<option value="2">2</option>'+ '<option value="3">3</option>'+ '<option value="4">4</option>'+ '<option value="5">5</option>'+ '</select>'; var row = '<p>'+ input + select + '</p>'; //row html var container = $("#container"); //cache selector for better performance var i = 0; // variable used in loop $("#rowNumber").change(function(){ //when the main select changes var numRows = $(this).val(); //get its value container.html(""); //empty the container for(i=1; i<= numRows; i++){ container.append(row); //and append a row from 1 to the numRows } }); container.delegate('p > select','change',function(){ //when a select inside //a row changes var numInputs = $(this).val(); //get its value var parent = $(this).parent(); //select its parent var width = 170/numInputs; parent.html(""); //empty it for(i=1; i<=numInputs; i++){ parent.append(input); //append an input from 1 to the numINputs } parent.append(select); //and append a select }); 

Although I could not get the width of the inputs to depend on how much they are inside the string.

Answer 3

Here's a very simple and efficient way to do this using jQuery. You can easily use this code to add / reduce the number of options in the drop-down menus, and you can easily edit the id / class names to something else and style them. This is a very flexible way to do it! He calls the inputs based on how much you have (class = "input-1" or class = "input-2") so you can use these names to style the width in your CSS.

HTML:

 <select id="dropdown"><option></option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select> <div id="myForm"> </div> 

JQuery

 $(document).ready(function() { $('#dropdown').change(function() { $('#myForm').empty(); for (var i=0; i<$('#dropdown').val(); i++) { $('#myForm').append('<div class="inputGroup"><input type="input" class="input" /><select class="select"><option></option><option value="1">1</option><option value="2">2</option></select></div>'); } $('select').bind('change', changeInputs); }); }); function changeInputs() { var string; string = ""; for (var i=0; i<$(this).val(); i++) { string = string + '<input type="input" class="input-'+$(this).val()+'" />'; } $(this).parents('.inputGroup').html(string + '<select class="select"><option></option><option value="1">1</option><option value="2">2</option></select>'); $('select').bind('change', changeInputs); } 

Feel free to test it: http://jsfiddle.net/Ag6GD/2/

Hope this helps you.

Answer 4

Here is a working solution.

Here is the HTML:

 <select onchange="javascript:local.drop1Change(this);" > <option value="-">select item</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div id="workArea"></div> 

then javascript:

 <script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script> <script type="text/javascript"> var local = {}; local.changeInner = function (containerId, ctrl) { var target = $("#" + containerId); target.empty(); var len = $(ctrl).val(); for (q = 0; q < len; q = q + 1) { var el = document.createElement("input"); target.append(el); } target.append(ctrl); }; local.drop1Change = function (ctrl) { var selectedValue = $(ctrl).val(); var len = selectedValue; var area = $("#workArea"); area.empty(); for (x = 0; x < len; x=x+1) { var container = document.createElement("div"); var el = document.createElement("input"); container.id = "container" + x; var s1 = document.createElement("span"); $(s1).html('<select style="margin:2px 2px 2px 2px;" onchange="javascript:local.changeInner(\'' + container.id + '\', this);"> <option value="1" selected>1</option><option value="2">2</option><option value="3">3</option></select>'); $(container).append(el); $(container).append(s1); area.append(container); } }; </script>