如何将两个按钮组合为一个

How to combine two buttons into one?

本文关键字：组合 一个 按钮 两个      更新时间：2023-09-26

我有以下两个按钮：

<button type="submit" id="gform_submit_button_1">Submit</button>
<button type="button" data-is_quote="1" data-button="simple_add_to_quote" data-product-type="simple" data-product-id="75448" id="add_to_quote">Submit</button>

#gform_submit_button_1按钮在向服务器提交数据之前验证表单条目

#add_to_quote按钮提交表单数据而不验证其

我希望能够验证表单&使用#add_to_quote按钮提交。有什么解决方案吗？

点击add_to_quote触发gform_submit_button_1按钮点击事件。

$("#add_to_quote").click(function() {
   $("#gform_submit_button_1").click();
});

我不确定我是否解决了这个问题，但这里有一个可能的解决方案：创建一个包含所有data-X值的隐藏输入和提交表单的提交按钮的表单元素。

<form method="GET/POST" action="validation.php">
   <input type="hidden" name="data-validation" data-is_quote="1" data-button="simple_add_to_quote" data-product-type="simple" data-product-id="75448" id="add_to_quote">
   <input type="submit" value="submit" id="add_to_quote">
</form>

我希望它会有所帮助！

@Dhara Parmar解决方案很好。。。但缺少事件.stopPropagation（）和event.prventDefault（），如下所示：

$("#add_to_quote").click(function() {
   $(this).preventDefault(); //to stop submit
   $(this).stopPropagation();//to avoid the event bubbling up to other submit buttons, if any...
   $("#gform_submit_button_1").click();
});

您可以直接从type=button点击处理程序调用表单的验证和提交函数，使其表现得像type=submit

$("#add_to_quote").click(function () {
    if (!$("#TheForm").validate()) { //native validation triggered
        return false;
    } else {
        $("#TheForm").submit()
    }
});
相关文章：