javascript - 如何区分在html表单中单击了哪个按钮并基于该按钮通过ajax传递不同的值？

Question

我有以下 html 表单:

<form class="center" id="myform">
<p>
    <input id="email" name="email" type="email" class="textox email" title="" placeholder="your@email.com" required>
</p>
    <textarea name="slogan" id="textarea" maxlength="140" style="resize:none" class="textoxarea" title="Please enter at least 5 characters" placeholder="Placeholder" ></textarea>
<div class="terms">
        <input type="checkbox" class="required" value="None" id="terms" name="terms">I accept terms</input>
    </div>
</p>
<input type="submit" id="sendfeedback" value="now" disabled/>
    <input id="datetimepicker" type="text" readonly="readonly">
        <input type="submit" id="postmelater" value="send" disabled/>
</form>

正如您在上面看到的，我有一个带有两个按钮的表单。其背后的逻辑是这样的，当我想将带有当前时间戳的文本放入数据库时​​ - 我选择按钮发送反馈。但是，还可以添加带有所选时间戳的反馈，当用户从 datetimepicker 中选择日期并点击 postmelater 时就会发生这种情况。现在，ajax 代码如下所示:

$(document).ready(function () {

$('#myform').validate({// initialize the plugin
    errorElement: 'div',
    rules: {
        email: {
            required: true,
            email: true
        },
        slogan: {
            required: true,
            minlength: 2
        },
        terms: {
            required: true,
            maxlength: 2
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        var mail = $("#email").val(); //mg
        var text = $("#textarea").val();
        var date = 0;
        var stand = 1;
        $.ajax({
            url: 'savedatanow.php'
            type: "POST",
            data: {
                mail: mail,
                text: text,
                date: date,
                stand: stand

            },
            success: function(response)
            {

                alert(response);
            }
        });

    }
});
$('#myform').find('input, textarea').on('change', function () {
    var btn = $('#myform').find('input[type=submit]');
    if ($('#myform').valid()) {
        btn.removeAttr('disabled');
    } else {
        btn.attr('disabled', 'disabled');
    }
});
});

字段附加了一个验证过程，到目前为止 - 仅支持第一个按钮。如何添加对第二个按钮的支持，并且当用户单击它时 - 还将日期时间属性传递给 ajax？我可以在 Ajax 中以某种方式区分它们吗？谢谢!

Answer 1

这取决于验证插件的功能，当它使用react时，但您可能可以尝试将 onclick 添加到按钮，该按钮设置一些隐藏变量，指示按下了哪个按钮。像这样:

<input type="submit" id="sendfeedback" onclick="this.form.clickedbtn.value=1" value="now" disabled/>

<input type="submit" id="postmelater" value="send" onclick="this.form.clickedbtn.value=2" disabled/>

并像这样向表单添加隐藏输入

<input type="hidden" id="clickedbtn" name="clickedbtn">

比在处理程序中添加

var clickedbtn = $("#textarea").val();

...

clickedbtn: clickedbtn,

所以表单将如下所示:

<form class="center" id="myform">
<input type="hidden" id="clickedbtn" name="clickedbtn">
<p>
    <input id="email" name="email" type="email" class="textox email" title="" placeholder="your@email.com" required>
</p>
    <textarea name="slogan" id="textarea" maxlength="140" style="resize:none" class="textoxarea" title="Please enter at least 5 characters" placeholder="Placeholder" ></textarea>

我接受条款

</p>
<input type="submit" id="sendfeedback" value="now" onclick="this.form.clickedbtn.value=1" disabled/>
<input id="datetimepicker" type="text" readonly="readonly">
    <input type="submit" onclick="this.form.clickedbtn.value=2" id="postmelater" value="send" disabled/>
</form>

处理程序将如下所示:

submitHandler: function (form) { // for demo
    alert('valid form submitted'); // for demo
    var mail = $("#email").val(); //mg
    var text = $("#textarea").val();
    var date = 0;
    var stand = 1;
    var clickedbtn = $("#textarea").val();
    $.ajax({
        url: 'savedatanow.php'
        type: "POST",
        data: {
            mail: mail,
            text: text,
            date: date,
            clickedbtn: clickedbtn,
            stand: stand

        },
        success: function(response)
        {

            alert(response);
        }
    });

}

之后在 php 脚本中你可以检查

if ($_POST["clickedbtn"]==1) {
  send now code
} else {
  other code
}