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表單重新提交

回答

相關問題