同时具有操作和提交功能的提交表单

Submit Form With Both Action and Onsubmit Function

本文关键字：提交 功能 表单 操作      更新时间：2023-09-26

我的JS不是那么好，所以我已经摆弄了一段时间了。

我有一个表单，当

单击提交按钮时，该表单正在发布到另一个文件。单击它时，我还想显示警报，然后将用户重定向回 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 个表单属性。

我有一些旧代码，我用来解决类似的情况。我想提交表单但不重新加载页面的地方，就在这里。由于只有 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">

相关文章：