Question

Suppose I have a drop down box to define how many row of input box, then generate the designated rows of input box, after that each row of input box with attach a drop down box, it can define how many input box of each row, illustrated as below:

Could anyone suggest the snippet for this procedure?

Thanks

Answer 1

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

1. Think about HTML structure for this (eg. separate first select from the rest of the form, eg. give the rest of the form a <div> with form-dynamic-fields class so it will serve as a container for dynamically generated fields),
2. Use jQuery’s .delegate() function to attach events (delegate them to the select boxes within dynamic fields),
3. Depending on the selection of specific select field, add, remove or replace appropriate rows (when changing main select’s field value) or fields (when changing value of select for specific row),
4. You should probably use onchange event.

Example usage of .delegate() function can be like that:

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 every <select> fields generated dynamically as far as the container with class form-dynamic-fields remains their parent element and is not deleted.

So, given you the clue about how you can structure your form, how to attach events, what should they do and what event should you use, I would like to…

…encourage you to test different solutions and share information about the progress you have made with solving this issue.

EDIT:

Some working example to encourage you more (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 (executed 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 is:

• clean the code,
• add some styling (so the fields have proper width),
• check and eventually fix name attributes of <input> fields,
• fix problems you may encounter when implementing it,

I hope it helped 🙂