Question

我有一个按钮，用户按下该按钮可添加更多输入。这背后的原因是增加了额外的“客人”。添加输入的功能很好。我无法弄清楚的部分是如何自动增加JS，以便每个新输入都为name="guest"添加自动增量计数。

我正在序列化数据并通过AJAX将其发送到php文件。是否还有一种方法来对变量进行编程，因此它会检查发送了多少guests，因此我没有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>';

PHP

$guest1 = trim(htmlspecialchars($_POST['guest1'], ENT_QUOTES));
$guest2 = trim(htmlspecialchars($_POST['guest'], ENT_QUOTES));
$guest3 = trim(htmlspecialchars($_POST['guest'], ENT_QUOTES));

JS

$('#addGuest').click(function() {
    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>';
});

HTML - 第一个来宾字段，标记为guest1

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

AJAX：

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

完整的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>

Answer 1

如果你没有删除访客按钮，那么它非常简单。

点击添加访客按钮，获取现有访客的计数。创建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>';
});

请注意，所有访客div必须分配了formField和guestName分组才能使此代码正常运行。如果您有任何其他条件，则应修改选择器以获取计数。

自动增加名称字段并检查使用serialize发送的自动增量变量数

1 个答案: