Javascript表单重新提交

我有一个简单的HTML/Javascript表单，它在提交时检查用户名并通过Parse（.com）并根据特定用户显示正确的页面。Javascript表单重新提交

当第一次提交表单时，一切都运行良好。但是当提交然后返回到表单页面时（使用浏览器后退按钮），提交事件不再被触发（甚至不是console.log（））。而不是按下提交按钮，而不是按回车键。

下面是一些代码片段：

头：

$(document).ready(function() { 
    $("#form_login").submit(function(e) { 
     console.log("In form submit login") 
     init(); 
     var name = $("#inp_user").val(); 
     var pass = $("#inp_pass").val(); 
     console.log("Name: " + name + " User: " + pass) 
     login(name, pass); 
    }) 
})

身体：

<body> 
<div data-role="page" id="page_login" data-theme="a"> 
    <div data-role="header"> 
     <h1>Login Screen</h1> 
    </div> 
    <div data-role="content"> 
     <div class="div-widget"> 
      <h3>Login details</h3> 
      <form id="form_login"> 
       <div data-role="fieldcontain"> 
        <label for="inp_user">User name:</label> <input type="email" 
         id="inp_user"> 
       </div> 
       <div data-role="fieldcontain"> 
        <label for="inp_pass">Password</label> <input type="password" 
         id="inp_pass"> 
       </div> 
       <input type="submit" id="btn_login" value="Login"></input> 
      </form> 
     </div> 
     <div class="div-widget"> 
      <span id="out_res"></span> 
     </div> 
    </div> 
</div> 
//More div data-role="page" here.... 
</body>

来源

2013-07-16 CaptainNemo

你如何设置窗体上的行动呢？ –

我没有在任何地方看到e.preventDefault（）调用？ – Bergi

@Diodeus对不起，但我不知道在这个特定情况下我需要什么。（我对JavaScript或HTML不是很熟悉）。 – CaptainNemo

根据我做了jsFiddle一个新的例子给出的信息。所以你忘记提到你正在使用jquery-mobile。此外使用<form>确实会引起行为描述！

<body> 
    <div data-role="page" id="page_login" data-theme="a"> 
     <div data-role="header"> 
      <h1>Login Screen</h1> 
     </div> 
     <div data-role="content"> 
      <div class="div-widget"> 
       <h3>Login details</h3> 
       <!-- removed form - as you do not really need it--> 
       <!-- you may keep it, but you MAY NOT submit the form! --> 
       <div data-role="fieldcontain"> 
        <label for="inp_user">User name:</label> 
        <input type="email" 
         id="inp_user"> 
       </div> 
       <div data-role="fieldcontain"> 
        <label for="inp_pass">Password</label> 
        <input type="password" 
         id="inp_pass"> 
       </div> 
       <!-- <input type="submit" id="btn_login" value="Login"></input>--> 
       <!-- instead, make use of button --> 
       <a id="btn_login" href="#page_2" data-role="button">Login</a> 
      </div> 
      <div class="div-widget"> 
       <span id="out_res"></span> 
      </div> 
     </div> 
    </div> 
    <div data-role="page" id="page_2" data-theme="a">Page 2</div> 
    <!-- More div data-role="page" here.... --> 
</body>

而是提交表单的 - 在浏览器中打的时候“回来”的原因导致的问题，我决定使用A HREF - data-role="button"。绑定一个单击处理和prevent-Default如果登录失败（现在注释掉）

$(document).ready(function() { 
    $("#btn_login").click(function(e) { 
     console.log("clicked href") 

     //init(); // commented out as not provided within your question 
     var name = $("#inp_user").val(); 
     var pass = $("#inp_pass").val(); 
     console.log("Name: " + name + " User: " + pass) 
     //login(name, pass); // commented out as not provided within your question 

     /*if (LOGIN_FAILED) 
     { 
      console.log("login failed"); 
      e.preventDefault(); 
     }*/ 
    }) 
})

来源

2013-07-18 06:32:58

表单具有语义值。保留表单标签，只需在表单的submit事件中使用'e.preventDefault（）' – Bojangles

我尝试了一个带有表单标签和e.preventDefault（）的示例 - 请参阅问题的评论 - 它没有工作！正如我提到的，我们可能会保留表单标签 - 但显然提交确实阻止了这个例子的工作！ @Bojangles –

Javascript表单重新提交

回答

相关问题