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

我的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个表单属性。

来源

2016-02-14 Uriahs Victor

这是因为你已经张贴，并会被重定向到形式的URL，请尝试使用这个AJAX（可能是更容易，如果你使用jquery ajax）。通过使用ajax，您可以在不重新加载或进入页面的情况下提交表单，并且在完成提交后，您可以传递一个回调函数，其中在您的情况下是重定向。 – Adrian

Adrian Im发布到隐藏的iframe，因此页面不刷新，这仍然会导致onsubmit无法正常工作？ –

哦，我看到了，我还没有看到那个，所以也许你的问题是你没有在窗体标签中指定目标iframe。 '

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

来源

2016-02-14 03:18:45

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

回答

相关问题