使用javascript防止表单使用重定向/刷新提交

我有一个页面，您可以在一系列texboxes（由php生成）和2个按钮GetData和SaveData中输入数据。我希望能够在编辑文本框时按下回车键，它将执行与单击SaveData按钮（onclick =“onSave（）;”）相同的操作。我可以做达致这以下内容：使用javascript防止表单使用重定向/刷新提交

<form id="editForm" name="editForm" action="onSave();">

，但是当我按下回车，网页重定向到页面，而PHP的岗位（ex.:www.mypage.com/index.php，而不是www.mypage.com/index.php?edit_data=true）

我该如何实现我想要的？

来源

2010-07-09 David Menard

的答案是（感谢尤利西斯的部分FO的答案）：

<form id="editForm" name="editForm" onsubmit="onSave();return false;">

My onSave（）;函数确实返回false，但由于它正在进行重定向，所以我不得不在onSave（）之后返回false。（解释为什么??）

谢谢！

来源

2010-07-09 15:25:19

确保您的onSave();返回false，并将操作更改为onsubmit="return onSave();"。

来源

2010-07-09 15:17:38 Oded

嗯...你有意忘记标记方法=“POST”？ :)

来源

2010-07-09 15:18:14 Puaka

尝试 <form id="editForm" name="editForm" action="onSave();return false;">

来源

2010-07-09 15:18:19 ULysses

感谢，这是解决方案的一部分，第二部分是由ATTR的onsubmit更换到action属性。 – 2010-07-09 15:23:26

BUTTON1为Submit按钮
BUTTON2类型= '按钮' 上cliking BUTTON2调用哪个创建LIK使用window.location.href =“WWW javascript函数？.mypage.com/index.php的edit_data =真正的”

来源

2010-07-09 15:19:49 Salil

我只是把button1放在窗体外面 – 2010-07-09 15:26:25

没有这些建议的解决方案在使用PHP表单时为我工作。

本质上，我想要做的是有一个简单的表单，它会提交后隐藏。我使用jQuery来监听点击发生的时间，但这并不重要，因为页面刷新了。然后，我使用JS来阻止提交的默认行为（例如e.preventDefault();）。我想出了...

我最终将表单动作设置为“＃”，以便在提交表单后更改URL。 Javascript会读取散列的URL，并会隐藏/显示必要的元素，如果它存在几秒钟后会重定向。 是的，页面仍然刷新，但我通过使用带有页面刷新功能的JS来获得正确的行为。

这里是我的代码：

<?php 
include_once 'db.php'; // includes login to DB 
if('POST' === $_SERVER['REQUEST_METHOD'] && isset($_POST['submit'])) 
{ 
    $ip = $_POST['publicIP']; 

    $sql_query = "INSERT INTO tablename(PublicIP) VALUES('$ip')"; 
    mysql_query($sql_query); 
} 

?> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="robots" content="noindex, nofollow"> 

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 

<script>var publicIP = '<?php echo $_SERVER['REMOTE_ADDR']; ?>';</script> 

<style> 
form, [type="submit"] { 
    max-width: 300px; 
    margin: 0 auto; 
} 
form { 
    border: 4px solid #757679; 
    border-radius: 5px; 
    box-shadow: 4px 4px 4px #A5A5A5; 
} 
[type="submit"] { 
    border: none; 
    height: 5em; 
    width: 100%; 
    font-size: 2em; 
    color: #353638; 
    background-color: #22D1F2; 
    text-shadow: -1px -1px 1px #949494; 
} 
input[name="publicIP"] { 
    display: none; 
} 
p { text-align: center; } 

p, form { 
    -webkit-transition: all 2s; 
    -moz-transition: all 2s; 
    -ms-transition: all 2s; 
    -o-transition: all 2s 
    transition: all 2s; 
} 
.hidden { 
    display: none !important; 
    -webkit-transition: all 2s; 
    -moz-transition: all 2s; 
    -ms-transition: all 2s; 
    -o-transition: all 2s 
    transition: all 2s; 
} 
</style> 
</head> 
<body> 

<p class="hidden">Thank you for visiting. You will be redirected within 3 seconds.</p> 

<form action="#" method="POST"> 
    <input type="text" name="publicIP"> 
    <button type="submit" name="submit" value="Submit">Submit</button> 
</form> 

<script> 
document.querySelector('input[name=publicIP]').value = publicIP; 
</script> 

<script> 
function redirect() { 
    setTimeout(function() { 
    window.location = "https://google.com"; 
    }, 3000); 
} 
if (window.top.location.href.indexOf('#') > 0) { 
    $('form').addClass('hidden'); 
    $('p').removeClass('hidden'); 
    redirect(); 
} 
</script> 

</body> 
</html>

来源

2015-06-24 17:58:54 Bryce

使用javascript防止表单使用重定向/刷新提交

回答

相关问题