表单外的提交按钮未提交
[英]submit button outside form is not submitting
问题描述
I have a form.
我有一个表格。 Once the user enters the details and presses the submit button it shows another div and hides the original.一旦用户输入详细信息并按下提交按钮，它就会显示另一个 div 并隐藏原来的。 In the other div the button is supposed to actually submit the form instead of the one in the form itself.在另一个 div 中，按钮应该实际提交表单而不是表单本身中的表单。 I'm using preventDefault() to do this, but the submission is not working.我正在使用preventDefault()来做到这一点，但提交不起作用。
$('#tripinfo').submit(function(e) { if (e.originalEvent && e.originalEvent.isTrusted) e.preventDefault(); $("#choosing").slideUp(); $("#confirmation").slideDown(); }); $("#ok").click(function() { $('#tripinfo').submit(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="rideHandler.php" method="POST" id="tripinfo"> //form inputs <button type="submit" class="subBtn" name="offer"> Finish up</button> </form> <div class="confirmation" id="confirmation" style="display:none" ;> //not important stuff <button id="ok" type="submit" class="subBtn" name="ok">Offer my ride</button> </div>
I don't think you need to see the PHP because it works without preventing the original button from submitting, but I'm using我认为您不需要查看 PHP，因为它可以在不阻止提交原始按钮的情况下工作，但我正在使用
if (isset($_POST['ok']))
Should it be if (isset($_POST['offer'])) ?应该是if (isset($_POST['offer']))吗？ Even though I tried it and nothing changed, what is the issue?即使我尝试了它并没有任何改变，但问题是什么？
3 个解决方案
解决方案1
1 2021-07-17 16:38:06
The issue is because you're triggering the form submission through JS the ok property from the button will not be sent in the request (as it wasn't the click event of the button which directly triggered the form submission).问题是因为您通过 JS 触发form提交，按钮的ok属性不会在请求中发送（因为它不是直接触发表单提交的按钮的点击事件）。
You will need to check for another form input value in the PHP to check if the POST request occurred to the current page.您将需要检查 PHP 中的另一个表单输入值，以检查当前页面是否发生了 POST 请求。
That being said, I would strongly suggest you re-structure your HTML so that the hidden content is still within the form as the current pattern completely goes against accessibility guidelines.话虽如此，我强烈建议您重新构建 HTML，以便隐藏的内容仍在表单中，因为当前的模式完全违反了可访问性指南。 To do that change the original submit button to a standard button, and have the second button submit the form instead.为此，将原始submit按钮更改为标准按钮，并让第二个按钮提交表单。
You can also manually check the validity of the form element(s) before allowing the new content to be displayed.您还可以在允许显示新内容之前手动检查表单元素的有效性。 The HTML would look something like this: HTML 看起来像这样：
$('#offer').on('click', e => { if ($('#foo').get(0).checkValidity()) { $("#choosing").slideUp(); $("#confirmation").slideDown(); } else { $('#tripinfo').get(0).reportValidity(); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="rideHandler.php" method="POST" id="tripinfo"> <input type="text" id="foo" name="foo" required /> <button id="offer" type="button" name="offer"> Finish up</button> <div class="confirmation" id="confirmation" style="display:none" ;> <input type="text" name="bar" required /> <button id="ok" type="submit" class="subBtn" name="ok">Offer my ride</button> </div> </form>
解决方案2
0 2021-07-17 16:20:37
更改按钮类型 = "button" 由于按钮的提交行为，它尝试提交当前表单数据，但实际上它不在表单中，因此它什么也不做
<button id="ok" type ="button" class="subBtn" name="ok" >Offer my ride</button>
解决方案3
0 2021-07-17 16:57:53
Replace form button with buttons to avoid any form submit event trigger Please check the code below用按钮替换表单按钮以避免任何表单提交事件触发请检查下面的代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>click demo</title>
<style>
p {
color: red;
margin: 5px;
cursor: pointer;
}
p:hover {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div class="confirmation" id="choosing">
<form action="rideHandler.php" method="POST" id="tripinfo">
//form inputs
<input type="button" class="subBtn" name="offer" id="offer" value='Finish up' />
</form>
</div>
<div class="confirmation" id="confirmation" style="display:none" ;>
//not important stuff
<input type="button" class="subBtn" name="ok" id="ok" value='Offer my ride' />
</div>
<script>
$("#offer").click(function() {
$("#choosing").slideUp();
$("#confirmation").slideDown();
});
$( "#ok" ).click(function() {
$('#tripinfo').submit();
});
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.