Question

我的JS不是很好，所以我现在已经摆弄了一段时间。

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

重定向代码在按钮上工作得很好，我按这样调用函数“onclick”：

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

但是我不希望有一个额外的按钮...我希望表单POST然后显示一个警告框，然后转到指定的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个表单属性。

Answer 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">

提交包含操作和提交功能的表单

1 个答案: