Javascript “自动增量名称”字段，并检查随serialize发送的自动增量变量数

我有一个按钮，用户按下它可以添加更多的输入。这背后的理由是增加额外的“客人”。添加输入的功能运行良好。我不明白的部分是如何自动增加JS，以便每个新输入都向

name=“guest”

添加一个自动递增计数

我正在序列化数据，并通过AJAX将其发送到php文件。还有一种方法可以对变量进行编程，因此它会检查有多少

来宾被发送过来，所以我没有guest1、guest2、guest3等。如果我这样做，可能会有未定义的变量

有人有什么想法吗

document.getElementById('guestWrap').innerHTML += '<div class="formField" id="guestName"><label class="label">What is your guest\'s name?</label><input type="text" class="input" name="guest" id="guest"></div>';

JS

完整HTML

<form id="rsvpForm">
            <div class="formField">
                <label class="label"><span class="red"> *</span></label>
                <input type="radio" value="Yes" class="radio" name="yesno" id="yes">
                <label class="radioAnswer" for="yes">Yes</label>
                <input type="radio" value="No" class="radio" name="yesno" id="no">
                <label class="radioAnswer" for="no">NO</label>
            </div>
            <div class="formField" id="ansYes">
                <label class="label">Will you be bringing any guests?</label>
                <input type="radio" value="Yes" class="radio" name="yesno2" id="yes2">
                <label class="radioAnswer" for="yes2">Yes</label>
                <input type="radio" value="No" class="radio" name="yesno2" id="no2">
                <label class="radioAnswer" for="no2">NO</label>
            </div>
            <div id="guestWrap">
                <div class="formField guestName" id="guestName">
                    <label class="label">What is your guest's name?</label>
                    <input type="text" class="input" name="guest1" id="guest1">
                </div>
            </div>
            <div id="addGuest">
                <span class="guestIncrease">Add another guest</span>
            </div>
            <div class="formField">
                <label class="label">What is your name?<span class="red"> *</span></label>
                <input type="text" name="name" class="input">
            </div>
            <div class="formField">
                <label class="label">What is your email?<span class="red"> *</span></label>
                <input type="email" name="email" class="input">
            </div>
            <input type="submit" value="Submit RSVP" id="submit">
        </form>


*
对
不
你会带客人来吗？
对
不
你的客人叫什么名字？
添加另一位客人
你叫什么名字*
你的电子邮件是什么*
如果您没有“删除来宾”按钮，那么它非常简单

单击添加来宾按钮，获取现有来宾的计数。创建ID为count+1的新guest元素

$('#addGuest').click(function() {
    var count = $('.formField.guestName').length;
    document.getElementById('guestWrap').innerHTML += '<div class="formField guestName" id="guestName' + (count + 1) + '"><label class="label">What is your guest\'s name?</label><input type="text" class="input" name="guest' + (count + 1) + '" id="guest' + (count + 1) + '"></div>';
});

$（'#addGuest'）。单击（函数（）{
变量计数=$（'.formField.guestName'）.length；
document.getElementById（'guestWrap'）。innerHTML+=“您的客人叫什么名字？”；
});

请注意，必须为所有来宾
div
s分配类
formField
和
guestName
，才能正确使用此代码。如果您有任何其他条件，您应该修改选择器以获取计数。
您是否也有“删除来宾”按钮？@31piy不，我没有。真的不需要。我试过你放的东西，但没用。在我的网络控制台中，唯一显示编号的输入字段是我硬编码到html中的字段。我尝试将count变量更改为：
var count=$（'#guestName'）.length
但是运气不好。@Paul--你能告诉我如何将数据发送到服务器吗？是否有AJAX调用，或者您只是提交表单？请用这些细节更新您的问题。我用网络选项卡的屏幕截图更新了我的问题。已经添加了Ajax。刚刚添加到问题中。
<div class="formField guestName" id="guestName">
    <label class="label">What is your guest's name?</label>
    <input type="text" class="input" name="guest1" id="guest1">
</div>

$('#rsvpForm').validate({
    rules: {
        name: {
            required: true,
            minlength: 2
        },
        email: {
            required: true,
            email: true
        }
    },
    messages: {
        name: {
            required: "Please enter your name",
            minlength: "Your name seems a bit short, doesn't it?"
        },
        email: {
            required: "Please enter your email address",
            email: "Please enter a valid email address"
        }
    },
    submitHandler: function(form) {
       event.preventDefault();
        var datastring1 = $('#rsvpForm').serialize();

        $.ajax({
            url: 'rsvpSend.php',
            type: 'POST',
            data: datastring1
            ,
            success: function(data) {
                if (data == 'Error!') {
                    alert('Unable to  submit RSVP!');
                    alert(data);
                } else {
                /*  $('#application-form')[0].reset();
                    $('#application-form').slideUp(400);
                    $('#tell-us-title').fadeOut(200);
                    $('#make-it-count').fadeOut(200);
                    $('#inquiry-success').fadeIn(200);*/
                }
            },
            complete:function(){
                //$('body, html').animate({scrollTop:$('#inquiry-success').offset().top -25}, 'slow');
            },
            error: function(xhr, textStatus, errorThrown) {
                alert(textStatus + '|' + errorThrown);
            }
        });
    }
});

<form id="rsvpForm">
            <div class="formField">
                <label class="label"><span class="red"> *</span></label>
                <input type="radio" value="Yes" class="radio" name="yesno" id="yes">
                <label class="radioAnswer" for="yes">Yes</label>
                <input type="radio" value="No" class="radio" name="yesno" id="no">
                <label class="radioAnswer" for="no">NO</label>
            </div>
            <div class="formField" id="ansYes">
                <label class="label">Will you be bringing any guests?</label>
                <input type="radio" value="Yes" class="radio" name="yesno2" id="yes2">
                <label class="radioAnswer" for="yes2">Yes</label>
                <input type="radio" value="No" class="radio" name="yesno2" id="no2">
                <label class="radioAnswer" for="no2">NO</label>
            </div>
            <div id="guestWrap">
                <div class="formField guestName" id="guestName">
                    <label class="label">What is your guest's name?</label>
                    <input type="text" class="input" name="guest1" id="guest1">
                </div>
            </div>
            <div id="addGuest">
                <span class="guestIncrease">Add another guest</span>
            </div>
            <div class="formField">
                <label class="label">What is your name?<span class="red"> *</span></label>
                <input type="text" name="name" class="input">
            </div>
            <div class="formField">
                <label class="label">What is your email?<span class="red"> *</span></label>
                <input type="email" name="email" class="input">
            </div>
            <input type="submit" value="Submit RSVP" id="submit">
        </form>

$('#addGuest').click(function() {
    var count = $('.formField.guestName').length;
    document.getElementById('guestWrap').innerHTML += '<div class="formField guestName" id="guestName' + (count + 1) + '"><label class="label">What is your guest\'s name?</label><input type="text" class="input" name="guest' + (count + 1) + '" id="guest' + (count + 1) + '"></div>';
});