0

フォームをCMSにPOSTする必要があり、CMSにはAlimony、Child Support、Insuranceなどの特定のフィールドがあります。私の問題は、ユーザーがフォームを追加するか、ドロップダウンから選択するまで、これらのボックスのすべてが存在しないことです。 。

最初は、「selectBox」という名前の選択ボックスがあり、その中にこれらのオプションがすべて含まれています。ユーザーが「Alimony」を選択した場合、対応するテキストボックスの名前を「payment_alimony」に変更して、POSTを実行すると、フィールドがCMSと一致するようにします。

次に、ユーザーが別の経費を追加する必要がある場合は、[経費の追加]をクリックすると、「selectBox2」という名前の選択ボックスがポップアップし、最大10個まで続きます。

可能であれば、selectBoxごとに10個の個別の関数を用意しなくても、これを実行できるようにしたいと思います。

ご協力いただきありがとうございます！

<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>

そして、複製するJavascript：

$(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();

}）;

4

2 に答える 2

0

これは機能します：

$(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/

于 2012-09-28T00:44:56.030 に答える
0

私があなたを正しく理解しているなら、これがあなたが必要とするすべてです：

<select onChange="this.name = 'payment_'+this.value">
    <option value="">Select one...</option>
    <option value="alimony">Alimony</option>
    ...
</select>
于 2012-09-28T00:45:37.593 に答える