Question

I need to POST a form to a CMS and that CMS has specific fields for Alimony, Child Support, Insurance, etc. My problem is that in my form, not all of these boxes exist until the user adds it or selects it from the dropdown.

At first there is a select box named “selectBox” that has all of these options inside of it. If the user selects “Alimony” I want the name of the corresponding textbox the change to “payment_alimony” so when I make the POST, the fields match up to the CMS.

Next, if the user needs to add another expense, he will click “Add an Expense” and a select box pops up named “selectBox2” and so on up to 10.

I would prefer to be able to do this without having to have 10 separate functions for each selectBox if possible.

Thank you for your assistance!

<div id="income1" class="row clonedInput"><!-- Expandable Section: INCOME -->
                                <div class="item" id="item_income_source">
                                    <label for="income_source">Additional Income Source<a href="javascript:;" class="tooltip" title="Help Text Goes Here"></a></label>
                                    <select id="income_source" name="income_source"   >
                                        <option value="" selected="selected">- select -</option>
                                        <option value="alimony">Alimony</option>
                                        <option value="child_support">Child Support</option>
                                        <option value="disability">Disability</option>
                                        <option value="social_security">Social Security</option>
                                        <option value="pension">Pension</option>
                                        <option value="rental_protperty">Rental Property</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                                <div class="item small-item third ">
                                    <label for="blank-space">&nbsp;</label>
                                </div>
                                <div class="item small-item third last" id="item_input_gross">
                                    <label for="input_gross">Amount ($)</label>
                                    <input type="text" id="input_gross" value="" name="input_gross" onkeyup="formatInt(this)" onChange="addIncome();" onclick="select();" class="IncometoAdd"  />
                                </div>
                            </div>
                            <div style="clear:both">
                                <input type="button" id="btnAdd-Income" value="(+) add source" />
                                <input type="button" id="btnDel-Income" value="(-) remove source" />
                            </div>

And the Javascript that duplicates:

$(function(){
// Add new element
$('#btnAdd-Income').click(function() {
    var num     = $('.clonedInput').length;
    var newNum  = new Number(num + 1);

    // create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('#income' + num).clone().attr('id', 'income' + newNum);

    // manipulate the name/id values of the input inside the new element
    newElem.find('#item_income_source label').attr('for', 'income_source' + newNum);
    newElem.find('#item_income_source select').attr('id', 'income_source' + newNum).attr('name', 'income_source' + newNum).val('');
    newElem.find('#item_input_gross label').attr('for', 'input_gross' + newNum);
    newElem.find('#item_input_gross input').attr('id', 'input_gross' + newNum).attr('name', 'input_gross' + newNum).val('');

    // insert the new element after the last "duplicatable" input field
    $('#income' + num).after(newElem);

    // enable the "remove" button
    $('#btnDel-Income').show();

    // Limit 6 sources  ***EDITABLE***
    if (newNum == 6)
        $('#btnAdd-Income').hide();
});

    // remove the last element
$('#btnDel-Income').click(function() {
    var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
    $('#income' + num).remove();        // remove the last element
    addIncome();

    // enable the "add" button
    $('#btnAdd-Income').show();

    // if only one element remains, disable the "remove" button
    if (num-1 == 1)
        $('#btnDel-Income').hide();
});

$('#btnDel-Income').hide();

});

Answer 1

This will work:

$(function() {
  $('#btnAdd-Income').click(function() {
      source = $('.item').first().clone();
      source.find('input').val('');
      $('.item').last().after(source);
  });

  $('.item select').live('change', function() {
      name = $('option:selected',this).val();
     $('input.amount', $(this).closest('.item')).attr('name', name); 
  });
});​

HTML:

<div class="item" id="item_income_source">
    <label for="income_source">Additional Income Source<a href="#" class="tooltip" title="Help Text Goes Here"></a></label>
    <select id="income_source" name="income_source"   >
     <option value="" selected="selected">- select -</option>
     <option value="alimony">Alimony</option>
     <option value="child_support">Child Support</option>
     <option value="disability">Disability</option>
     <option value="social_security">Social Security</option>
     <option value="pension">Pension</option>
     <option value="rental_protperty">Rental Property</option>
     <option value="other">Other</option>
   </select>

  <label for="input_gross">Amount ($)</label>
  <input type="text" id="input_gross" class="amount"    />
 <br>
</div>
</div>
<div style="clear:both">
 <input type="button" id="btnAdd-Income" value="(+) add source" />
 <input type="button" id="btnDel-Income" value="(-) remove source" />
</div>

jsFiddle: http://jsfiddle.net/ft6ME/32/