0

ユーザーが選択して登録する人数を選択できる選択ボックスがあります。たとえば、4 を選択すると、4 人の登録エリアがフォームの下に表示されます。

jQuery:

var person = '<div class="reg-person"><span class="person">Person 1</span><div class="field"><label for="name">name</label><input type="text" id="name" name="name" /></div><div class="field"><label for="company">company</label><input type="text" id="company" name="company" /></div><div class="field"><label for="email">email address</label><input type="text" id="email" name="email" /></div><div class="field"><label for="contact">contact number</label><input type="text" id="contact" name="contact" /></div></div>';

            var peopleDisplayed = 0;

            $('.places-req').change(function() {
                if(peopleDisplayed == 0) {
                    peopleDisplayed = ($(this).val());
                    numberPeople = ($(this).val());
                    for(var i = 1 ; i <= numberPeople ; i++){
                        $('#register').prepend(person);
                    }
                } else {
                    var peopleDiff = ($(this).val() - peopleDisplayed);
                    if (peopleDiff > 0) {
                        for(var i = 1 ; i <= peopleDiff ; i++){
                            $('#register').prepend(person);
                        }
                    } else if (peopleDiff < 0) {
                        var diff = -peopleDiff;
                        for(var i = 1 ; i <= diff ; i++){
                            $('#register').children('div.person').last().remove();
                        }
                    }
                    peopleDisplayed = ($(this).val());
                }

            });

htmlは次のとおりです。

<form id="register" action="/event/scripts/register.html" method="post">


                        <div class="submit-field">
                            <input type="hidden" value="1" id="event" name="event" />
                            <input type="submit" value="" />
                        </div>
                        <p>* Please note that we will not pass your details to a third party.</p>
                    </form>

私の質問は、どのようにコードを修正して、人ごとに人 1、人 2 などを表示することができるかということです。 name1、name2 など、名前が異なるようにします。

4

2 に答える 2

2

Person1 、 Person2 ... を持つには、ループi内を使用する必要があります。for

$('#register').prepend('<div class="reg-person"><span class="person">Person '+i+' </span><div class="field"><label for="name">name</label><input type="text" id="name" name="name" /></div><div class="field"><label for="company">company</label><input type="text" id="company" name="company" /></div><div class="field"><label for="email">email address</label><input type="text" id="email" name="email" /></div><div class="field"><label for="contact">contact number</label><input type="text" id="contact" name="contact" /></div></div>');
 -----------------------------------------------------------------------------^
于 2013-05-09T16:09:15.150 に答える