使用html表单提交运行javascript代码

嘿，我正在使用一个html表单，用于将人们登录到我的网站，我正在构建它，以便它使用AJAX（jQuery），但我遇到了一些问题

下面是JavaScript：

function validateLoginDetails() {
    $('[name=loginUser]').click(function() {
        $("#mainWrap").css({ width:"600px", height:"200px" });
        $("#interfaceScreen").load("modules/web/loginForm.php?username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
    });
}

以下是html表单：

<form id="formLogin" name="loginUser" method="post">
    Username<br /><input id="username" name="username" type="text" maxlength="30" style="width:160px; border:solid 1px #444444;" /><br /><br />
    Password<br /><input id="password" name="password" type="password" maxlength="50" style="width:160px; border:solid 1px #444444;" /><br /><br />
    <input id="submit" type="submit" value="Play" style="width:100px; background:#FFFFFF; border:solid 1px #444444;" />
</form>

用户名



密码

问题是，当我提交表单时，它运行代码，但又返回到以前的状态，这听起来可能很奇怪，但我可以说，因为我可以看到它更改了div大小，然后又恢复到原来的大小

有什么想法吗

编辑：例如，如果我使用下面的链接运行代码，那么它可以正常工作

<a href="#" name="loginUser">Clicky</a>

---

您需要从处理程序返回false，以便在执行AJAX调用后它不会执行实际的表单post

这是我要做的

$(function() {
     $('#formLogin').submit( function() {
         $('#mainWrap').css( { width: '600px', height: '200px' });
         $.post( 'modules/web/loginForm.php',
                 $(this).serialize(),
                 function(data) {
                     $('#interfaceScreen').html(data);
                 }
         );
         return false;
     });
});

---

请注意，我使用post来确保URL（包括用户名和密码）不会最终暴露在web日志中。我还假设包含表单的页面是通过https加载的，因此，post也将受到保护。

您需要从处理程序返回false，以便它在执行AJAX调用后不会执行实际的表单post

这是我要做的

$(function() {
     $('#formLogin').submit( function() {
         $('#mainWrap').css( { width: '600px', height: '200px' });
         $.post( 'modules/web/loginForm.php',
                 $(this).serialize(),
                 function(data) {
                     $('#interfaceScreen').html(data);
                 }
         );
         return false;
     });
});

---

请注意，我使用post来确保URL（包括用户名和密码）不会最终暴露在web日志中。我还假设包含表单的页面是通过https加载的，因此，帖子也将得到保护。

我非常肯定tvanfosson的路径是正确的。尝试将return false上移到click函数中，或者尝试取消事件

$('[name=loginUser]').click(function() {
    //do stuff
    return false;
});

or

$('[name=loginUser]').click(function(e) {
    e.cancel();
});

---

我很肯定特凡福森走的是正确的道路。尝试将return false上移到click函数中，或者尝试取消事件

$('[name=loginUser]').click(function() {
    //do stuff
    return false;
});

or

$('[name=loginUser]').click(function(e) {
    e.cancel();
});

---

首先，您是否确认您的.php文件正在返回内容而不是错误？如果插入内容（使用

$load

），则在预期内容（来自load）成功返回（例如使用回调）之前，不应触发div上的CSS命令。另外，我建议使用

.submit（）

，这是一个特定于表单的函数，直接引用表单标记和/或id来加快搜索速度（不要让jquery在DOM中搜索那么多内容）

函数validateLoginDetails（）{
$（'#formLogin'）。提交（函数（）{
//使用load（url，{data:toPOST}，回调（如果成功））；
$（“#interfaceScreen”）.load（“modules/web/loginForm.php？”，
{“用户名”：encodeURIComponent（用户名），“密码”：encodeURIComponent（密码）}，
函数（）{$（“#mainWrap”）.toggleClass（'loadSuccess'）；}
)；//端部载荷
})；//结束提交
返回false；
}

这可能更有效，也不那么突兀，但我想让它保持可识别性。其他人是对的…如果您的Div恢复到其原始大小…这是因为页面被允许重新加载…在这种情况下，浏览器将应用您的初始Div宽度/高度…因为您的备用宽度/高度仅由jquery onsubmit应用

重述：

将提交事件直接分配给表单

使用

$load

内置功能传递值对是对象

{name:val}

将CSS移动到不引人注目的状态，而不是隐藏在代码中

如果成功，则触发CSS

停止页面重新加载和重置显示

---

首先，您是否确认您的.php文件正在返回内容而不是错误？如果插入内容（使用

$load

），则在预期内容（来自load）成功返回（例如使用回调）之前，不应触发div上的CSS命令。另外，我建议使用

.submit（）

，这是一个特定于表单的函数，直接引用表单标记和/或id来加快搜索速度（不要让jquery在DOM中搜索那么多内容）

函数validateLoginDetails（）{
$（'#formLogin'）。提交（函数（）{
//使用load（url，{data:toPOST}，回调（如果成功））；
$（“#interfaceScreen”）.load（“modules/web/loginForm.php？”，
{“用户名”：encodeURIComponent（用户名），“密码”：encodeURIComponent（密码）}，
函数（）{$（“#mainWrap”）.toggleClass（'loadSuccess'）；}
)；//端部载荷
})；//结束提交
返回false；
}

这可能更有效，也不那么突兀，但我想让它保持可识别性。其他人是对的…如果您的Div恢复到其原始大小…这是因为页面被允许重新加载…在这种情况下，浏览器将应用您的初始Div宽度/高度…因为您的备用宽度/高度仅由jquery onsubmit应用

重述：

将提交事件直接分配给表单

使用

$load

内置功能传递值对是对象

{name:val}

将CSS移动到不引人注目的状态，而不是隐藏在代码中

如果成功，则触发CSS

停止页面重新加载和重置显示

---

如果您正在处理表单提交，那么实际上应该选择.form（）事件处理程序，而不是.click（）事件处理程序。对于前者，如果表单是通过任何其他方法提交的，那么您的检查仍将运行，而单击则取决于触发操作的单个元素。您还需要在此事件上返回false或preventDefault（），以便您的函数实际上能够正确启动

另一件事（根据您提供的代码采样，这可能很小/不重要）是，您正在将事件处理程序绑定到一个必须调用的函数中——为什么不将其加载到document ready上，就像这样（见下文）

我个人会像这样修改您的代码：

$(document).ready(function() {
    $('#formLogin').submit(function() {
        $("#mainWrap").css({ width:"600px", height:"200px" });
        $("#interfaceScreen").load("modules/web/loginForm.php?username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
        return false;
    });
});

---

如果您正在处理表单提交，您应该真正选择.form（）