如何区分在 html 表单中单击了哪个按钮,并基于该按钮使用 ajax 传递不同的值

How to distinguish which button was clicked in the html form and based on that pass different values with ajax?

本文关键字:按钮 于该 ajax html 何区 表单 单击      更新时间:2023-09-26

我有以下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>

正如你在上面看到的,我有一个带有两个按钮的表单。它背后的逻辑是这样的,当我想将具有当前时间戳的文本放入数据库时 - 我选择按钮发送反馈。但是,也可以添加带有所选时间戳的反馈,当用户从日期时间选择器中选择日期并点击 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 中以某种方式区分它们吗?谢谢!

这取决于验证插件的功能,当它做出反应时,但您可能可以尝试将 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
}

更改

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

$('#myform').find('input, textarea').on('change', function () {
    var sendfeedbackbtn = $('#sendfeedback');
    var postmelaterbtn = $('#postmelater');
    var datepicker = $('#datetimepicker');
    if ($('#myform').valid()) {
        sendfeedbackbtn.removeAttr('disabled');
        datepicker.removeAttr('readonly');
        if (isTimeValid()) {
           postmelaterbtn.removeAttr('disabled');
        }
    } else {
        datepicker.attr('readonly', 'readonly');
        sendfeedbackbtn.attr('disabled', 'disabled');
        postmelaterbtn.attr('disabled', 'disabled');
    }
});

因此,它启用了sendfeedback和时间戳输入区域。如果无效,所有buttontimestamp区域都将被禁用。然后添加

$('#myform').find('#datetimepicker').on('change', function () {
    var postmelaterbtn = $('#postmelater');
    var datepicker = $('#datetimepicker');
    // Need to implement isTimeValid method.
    if ($('#myform').valid() && isTimeValid()) {
        postmelaterbtn.removeAttr('disabled');
    } else {
        postmelaterbtn.attr('disabled', 'disabled');
    }
});

因此,当时间戳区域更改时,检查其是否有效(需要实现isTimeValid),并决定是否使postmelater能够单击。

您的提交处理程序应该是:

submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        var mail = $("#email").val(); //mg
        var text = $("#textarea").val();
        // Decide to send a timestamp data or not.
        var timestamp = $('#datetimepicker').attr('readonly') ? null : $('#datetimepicker').val();
        var date = 0;
        var stand = 1;
        $.ajax({
            url: 'savedatanow.php',
            type: "POST",
            data: {
                mail: mail,
                text: text,
                date: date,
                stand: stand
                // So this value will be null or whatever your input
                timestamp: timestamp
            },
            success: function(response)
            {
                alert(response);
            }
        });
    }

您可以决定PHP方的行为,即给定timestamp是否为null值。

当你给所有这些inputs一个id时,我直接使用它的id选择器来获取它们,但你仍然可以根据需要更改为其他选择器。

您可以使用

js/php将日期字段的默认值设置为当前日期。这样,您只需要一个submit按钮:

<input type="date" value="<?php echo date("Y-m-d")?>">

<input type="date" id="datefield">
<script>
  document.getElementById("datefield").value = new Date().getFullYear()+"-"+("0"+(new Date().getMonth()+1)).slice(-2)+"-"+("0" + new Date().getDate()).slice(-2);
</script>

但是,如果您绝对想要两个按钮,则可以执行以下操作:

<input type="button" onClick="firstButton()">
<input type="button" onClick="secondButton()">

function firstButton(){
    //do what you need to
    document.getElementsByTagName("form")[0].submit();
}

。按钮二也是如此。

相关文章: