使用表单上的两个按钮将按钮值传递给 AJAX/PHP 脚本

Question

我有一个使用 AJAX 脚本链接到 PHP 脚本的表单。到目前为止，我只有一个提交按钮来处理将值传递给 PHP 脚本以生成电子邮件发送的表单。现在我想在表单上有两个选项，要么发送电子邮件，要么在发送之前先查看电子邮件。我认为拥有两个具有相同类的按钮来触发 AJAX/PHP 脚本将是可行的方法。每个按钮可以有不同的值，并且根据该值，脚本可以以不同的方式运行。

我不确定使用两个按钮是否是处理此问题的最佳方式。如果是这样，我不确定如何处理按钮中的值。只有被点击的按钮的值会被传递吗？

我的表单中的其余值按以下方式处理（因为页面上有多个表单）：

var form_data = {
    name: $jform.find("[id^=name]").val(),
    date: $jform.find("[id^=date]").val(),
    time: $jform.find("[id^=time]").val(),
};

我如何包含按钮的值？会有两个按钮看起来像这样：

echo "<button type='submit' class='submit_s' value='view'>View</button>";
echo "<button type='submit' class='submit_s' value='email'>Email</button>";

大概我不能有两个具有相同 id 的按钮，正如我之前提到的，我不确定当我单击一个按钮时是否都传递了两个按钮值。

我希望能够在 AJAX 脚本中执行类似的操作：

if (button == 'email') {
    $jform.fadeOut(800);
}

最好的方法是什么？

Answer 1

您的输入按钮必须有不同的名称。

echo "<button type='submit' name="name1" class='submit_s' value='view'>View</button>";
echo "<button type='submit' name="name2" class='submit_s' value='email'>Email</button>";

在此之后，您可以在表单中执行此操作

$jform.find("input[name=name1]").click(function() { 
     $jform.submit();
})

或类似的东西。

Answer 2

使用 JS 函数设置公共字段的值，以跟踪按下了哪个按钮。

添加代码以获取将由我们的 JS 函数设置的新字段：

var form_data = {
    name: $jform.find("[id^=name]").val(),
    date: $jform.find("[id^=date]").val(),
    time: $jform.find("[id^=time]").val(),
    button: $jform.find("[id^=button]").val(),
};

我们新的 JS 函数来设置隐藏字段的值：

function setHiddenButtonValue(buttonValue)
{
    $("#button").value = buttonValue;
    return true;
}

将 onclick 事件添加到我们的按钮，以便在单击时更新隐藏字段。同时绘制新的隐藏字段：

echo "<input type='hidden' id='button' value='' />";
echo "<button type='submit' class='submit_s' value='view' onclick='return setHiddenButtonValue(this.value);'>View</button>";
echo "<button type='submit' class='submit_s' value='email' onclick='return setHiddenButtonValue(this.value);'>Email</button>";