提交 HTML 表单，执行 javascript 功能（警报然后重定向）

Posted 2023-02-24

【中文标题】提交 HTML 表单，执行 javascript 功能（警报然后重定向）

【英文标题】：Submit HTML form, perform javascript function (alert then redirect)

【发布时间】：2012-10-20 02:01:01

【问题描述】：

我有一个 javascript 函数，当我通过“onClick”方法调用它时效果很好。 基本上它的作用是从 html 表单中提取数据，然后根据该数据重定向到另一个页面。

但是，当我按下“输入”按钮提交表单/调用 JavaScript 函数，而不是使用 onClick 按钮调用 JavaScript 函数时，它并没有像我希望的那样响应。

我希望当用户按下键盘上的 Enter 按钮时，会发生同样的事情，就好像他们要按页面单击“继续按钮”（通过 onClick 调用该函数）

这是我的代码：

JS函数：

function completeAndRedirect()
    alert('You\'re nearly there! To complete your entry, you simply need to tap \'continue\' on the next page. Good luck!');
    location.href='http://google.com/?SID='+'<? echo $CATEGORY; ?>'+','+'<? echo $PLATFORM; ?>'+','+'<? echo $DEVICE; ?>'+'&email='+document.forms[0].elements[0].value;

这是表格：

<form action="" method="post" onsubmit="completeAndRedirect()">
    <input type="text" id="Edit1" style="width:280; height:50; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size:22px">
</form>

非常感谢任何可以提供帮助的人！

【问题讨论】：

按下enter时实际发生了什么？

【参考方案1】：

<form action="javascript:completeAndRedirect();">
    <input type="text" id="Edit1" 
    style="width:280; height:50; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size:22px">
</form>

将动作更改为指向您的函数会以不同的方式解决问题。

【参考方案2】：

您需要阻止默认行为。您可以使用e.preventDefault() 或return false; 在这种情况下，最好的是，您可以在这里使用return false;：

<form onsubmit="completeAndRedirect(); return false;">

【参考方案3】：

看起来您的表单正在提交，这是默认行为，您可以通过以下方式停止它：

<form action="" method="post" onsubmit="completeAndRedirect();return false;">