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

嘿，我使用的是用于将人员登录到我的网站的html表单，我构建它以便使用AJAX（jQuery），但我遇到了一些问题。使用html表单运行javascript代码提交

这里是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>

来源

2009-10-21 Stanni

为什么你''

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

这是我会做的。

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

请注意，我使用后，以确保该URL（包括用户名和密码）并没有结束暴露在网络日志。我还假设包含表单的页面是通过https加载的，因此，这个帖子也会被保护。

来源

2009-10-21 23:37:25 tvanfosson

问题仍然存在。 – Stanni 2009-10-21 23:41:04

好的。所以，我们在这里错过了一些代码。我假设这是一个在表单提交上运行的函数，但现在我不知道如何或在哪里被调用。把我扔掉的是函数的名称 - validateLoginDetails。原来，它只是设置了一个点击处理程序。在点击处理程序内部，大概是你应该返回false的地方。我会更新 - 你真的应该改变功能的名称。此外，我会在窗体提交上运行函数，而不是单击，因为窗体可能也会通过文本输入中的返回来提交。 – tvanfosson 2009-10-22 00:25:47

谢谢，抱歉的混淆。 – Stanni 2009-10-22 12:22:27

我很确定tvanfosson是在正确的道路上。尝试将返回false移入点击功能或尝试取消事件。

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

or 

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

来源

2009-10-21 23:50:57 WesleyJohnson

他们也没有帮助，我想你们都可能没有正确理解我的情况。 – Stanni 2009-10-21 23:54:47

我很困惑。据推测，当你从一个普通的超链接执行代码时，它的工作原理就是因为ajax调用jQuery调用load（）函数来插入一些数据，就是这样。然而，当你从FORM做它时，jQuery做的是事情，但FORM仍然提交。提交时，页面会自行回发并刷新服务器端，因此您又回到了开始的位置。如果这听起来是正确的 - 那么你确实需要停止提交表单。我会将表单上的.click（）处理程序更改为.submit（）处理程序，然后尝试取消它。 – WesleyJohnson 2009-10-22 00:33:51

首先，您是否确认您的.php文件正在返回内容而不是错误？如果要插入内容（使用$load），则不应触发div上的CSS命令，直到您预期的内容（来自加载）成功返回为止，例如使用回调。此外，我会建议使用.submit()，一个特定于表单的函数，直接引用表单标记和/或id来加快速度（不要在jQuery中搜索DOM中的许多东西）。

<style> 

.loadReg{ width:[yourBeginWidth]; height:[yourBeginHeight];} 

.loadSuccess{ width:600px; height:200px;} 

</style > 

function validateLoginDetails() { 
    $('#formLogin').submit(function() { 
    // using load(url,{data:toPOST},callback(if successful)); 

    $("#interfaceScreen").load("modules/web/loginForm.php?", 
    {"username": encodeURIComponent(username), "password": encodeURIComponent(password)}, 
    function(){$("#mainWrap").toggleClass('loadSuccess');} 
    );// end load 

    });// end submit 

    return false; 
}

这可能是更有效率，更不突出，但想让它可识别。其他人是正确的......如果你的Div正在恢复到原来的大小......这是因为该页面被允许重新加载......在这种情况下，你的初始DIV宽度/高度由浏览器应用......因为您的备用宽度/高度仅适用于jquery onsubmit。

总结一下：

分配提交事件形成直接
使用$load内置传递值对能力的对象{name:val}
移动CSS以不显眼的状态VS埋在代码
触发CSS成功
停止页面重新加载并重置显示

来源

2009-10-22 00:58:32 rydordy

如果你正在处理表单提交，你应该真的选择.form（）事件处理程序，而不是.click（）事件处理程序。对于前者，如果表单是通过其他方法提交的，那么您的支票仍然会运行，而点击取决于执行某个操作的单个元素。您还需要在此事件上返回false或preventDefault（），因此您的函数实际上会正确触发。

另一件事（根据您提供的代码抽样，这可能是微不足道的/不重要的）是您必须在必须调用的函数中绑定该事件处理程序 - 为什么不将其加载到文档就绪，像这样（见下文）？

我返工你的代码是这样，个人的看法：

$(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; 
    }); 
});

来源

2009-10-22 04:22:08

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

回答

相关问题