Display number of html elements on demand

[houssam_ballout]

Hello,

How can I create a button that will automatically display number of elements (radio button, textbox & drop down) together (the number of elements is being selected from a textbox field), or an option to add one row at a time but with a maximum of 20 rows?

Thanks

 

[.josh]

requires jQuery...anyways, I'm not sure if you meant that you want only to dynamically append selected form elements, or if there are X amount you want to append for every row...I went with the former because that's harder.  If it's the latter, this code can be simplified.

 

<form id='someForm' action='' method='post'>
  <!-- row options to (multi)select -->
  <select id='rowOptions' name='rowOptions' multiple="multiple" size="3">
    <option value="textField">text field</option>
    <option value="radioField">radio button</option>
    <option value="textAreaField">text area</option>
  </select>
  <br>
  <!-- button to dynamically append new form fields when clicked -->
  <input type='button' value='add row' id='addRow' />
  <input type='submit' value='submit' id='submit' />
</form>

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>

// max number of rows to append
var maxRows = 20; 
// current row to append
var rowNum = 0;

$(document).ready(function() {
  // on click of the 'add row' button...
  $('#addRow').click(function() {
    // if the current row is less than max rows ...
    if (rowNum < maxRows) {
      // variable to hold stuff to append 
      var divRowContent = '<div id="rowDiv'+rowNum+'" style="border:solid green 1px;">';
      // get the selected options
      var selected = $('#rowOptions').val();
      // for each option selected...
      for (var x=0; x < selected.length; x++) {
        // add the form element to variable 
        switch (selected[x]) {
          case 'textField' :
            divRowContent += '<input type="text" name="textField['+rowNum+']" id="textField'+rowNum+'" /><br>'; 
            break;
          case 'radioField' : 	
            divRowContent += '<input type="radio" name="radioField['+rowNum+']" id="radioField'+rowNum+'_a" value="a" />a';
            divRowContent += '<input type="radio" name="radioField['+rowNum+']" id="radioField'+rowNum+'_b" value="b" />b<br>';
            break;
          case 'textAreaField' : 
            divRowContent += '<textarea name="textAreaField['+rowNum+']" id="textAreaField'+rowNum+'" rows="2" cols="20"></textarea><br>';
            break;
        } // end switch
      } // end for
      // closing div tag for the appending row
      divRowContent += '</div>';
      // add row
      $('#someForm').append(divRowContent);
      // increment row counter 
      rowNum++;
    } // end if
  }); // end .click
}); // end .ready
</script>