使用 Action 和 Onsubmit 函数提交表单答案

【问题标题】：Submit Form With Both Action and Onsubmit Function使用 Action 和 Onsubmit 函数提交表单
【发布时间】：2016-02-14 01:27:01
【问题描述】：

我的 JS 不是很好，所以我一直在摆弄这个。

单击提交按钮时，我有一个表单正在 POST 到另一个文件。当它被点击时，我还想显示一个警报，然后将用户重定向回一个 URL。

重定向代码在我调用函数“onclick”的按钮上运行良好，如下所示：

<button onclick="test()">Return</button>

但我不想为此设置额外的按钮...我希望表单发布，然后显示一个警告框，然后转到指定的 URL，但我没有从控制台收到函数错误，谢谢。

<iframe name="noreloadhack" style="display:none;"></iframe>
<form action="http://www.example.com/test.php" onsubmit="return test();" method="post" target="noreloadhack">

JS：

 <script>
 function test() {
     alert('Hello World');
     var return_url = document.getElementById('return_url').value;
     window.location.href= return_url;
 }
 </script>

如果它有所作为，我将表单目标设置为隐藏的 iframe，作为在提交时不重新加载页面的技巧（我知道，这不是最好的方法）。我在这里几乎使用了 4 个表单属性。

【问题讨论】：

这是因为你已经发布了并且会被重定向到表单的url，尝试在这个上使用ajax（如果你使用jquery ajax可能会更容易）。通过使用ajax，您可以在不重新加载或进入页面的情况下提交表单，并且在提交完成后，您可以传递一个回调函数，在您的情况下是一个重定向。
Adrian 我正在发布到隐藏的 iframe，因此页面不会刷新，这是否仍会导致 onsubmit 不起作用？
哦，我明白了，我还没有看到那个，所以也许你的问题是你没有在表单标签中指定目标 iframe。 <form action="http://www.example.com/test.php" onsubmit="return test();" method="post" target="iframenamehere"> 所以你的表格应该是这样的。 <form action="http://www.example.com/test.php" onsubmit="return test();" method="post" target="iframenamehere"> <input type="submit" /> <iframe name="iframenamehere"> </iframe> </form>
我做了，抱歉让我更新问题
没关系，我在这里为您构建了一个示例小提琴，尽管我只是复制了您的代码，因为我正在使用我的手机来做这个，但质量很差很抱歉。 jsfiddle.net/n7zd1hw8

标签： javascript php html forms

【解决方案1】：

我有一些用于解决类似情况的旧代码。我想提交表单但不重新加载页面，就在这里。由于只有 4 个输入字段，我只是使用 jquery 获取值。

Javascript：

 function processForm() {
        var teamMembers=new Array();
        console.log($("#"));
        var schoolName=$("#schoolname").val();
        var teamMembers=new Array();
        teamMembers.push($("#contestant1").val());
        teamMembers.push($("#contestant2").val());
        teamMembers.push($("#contestant3").val());
        $.ajax({
                method: "POST",
                url: "php/register.php",
                data: { schoolname: schoolName, teammembers:teamMembers.toString()}
            })
            .done(function( msg ) {
                alert( "Your team is now registered " + msg );
                $('#register').hide();
                location.reload();
            });
        // You must return false to prevent the default form behavior
        // default being reloading the page
        return false;
    }

HTML：

<form id="registration_form" onsubmit="return processForm()" method="POST">
<p style="margin:0px;">School Name:</p>
<input type="text" id="schoolname" name="schoolname" autocomplete="off" class="input" required>
<hr>
<p style="margin:0px;">Contestants</p>
<div id="teammembers">
    <input type="text" id="contestant1" name="contestant1" autocomplete="off" class="input" required>
    <p></p>
    <input type="text" id="contestant2" name="contestant2" autocomplete="off" class="input" required>
    <p></p>
    <input type="text" id="contestant3" name="contestant3" autocomplete="off" class="input" required>
</div>
<input type="submit" id="registered">

【讨论】：