2013-04-27 72 views
0

我有一個表單。jQuery更改提交值爲「請稍等」,然後使用PHP提交表格

  <form action="login.php" method="post" id="form"> 
       <input type="text" name="name" class="textbox" id="name" placeholder="Username"><br /><br /> 
       <input type="password" name="pass" class="textbox" id="pass" placeholder="Password"><br /><br /> 
       <div id="holder"> 
        <input type="submit" name="submit" value="Login" class="submit_wide"> 
       </div> 
       <br /> 
      </form> 

我想在點擊時將提交輸入的值更改爲「Please wait ..」。因此,當頁面重定向時,用戶將看到「請稍等..」。

我不想使用JavaScript POST,我希望它重定向。

當我點擊「登錄」時,它會變爲「請稍候」,但提交操作會停止,但當我再次點擊時,它會重定向。

怎麼回事,我該如何解決這個問題?

$(document).ready(function() { 
      $(".submit_wide").click(function() 
      { 
       if ($("#name").val() != '' && $("#pass").val() != '') 
       { 
        $("#holder").html('<input type="submit" name="submit" value="Please wait.." class="submit_wide">'); 
       } 
       else 
       { 
        $("#error").fadeIn("slow"); 
        $("#error").html('<span class="alert alert-error">Please fill ALL of the fields.</span>'); 
        event.preventDefault();     
       } 
      }); 
     }); 

我已經試過什麼:

的HTML變線後添加

$("#form").submit(); 

它只是和以前一樣。

我該如何解決這個問題? 謝謝。

回答

2

試試這個:

$(".submit_wide").click(function (event) { 
    if ($("#name").val() != '' && $("#pass").val() != '') { 
     $(this).val('Please wait..'); 
    } else { 
     event.preventDefault(); 
     $("#error").fadeIn("slow"); 
     $("#error").html('<span class="alert alert-error">Please fill ALL of the fields.</span>'); 
    } 
}); 
+0

謝謝你的回覆,但這不是我真正想要的。 這取消了提交,現在我甚至不能提交第二次嘗試。我希望將值更改爲「請稍候」,然後重定向到頁面,而不是停止提交過程。 – user2326532 2013-04-27 10:07:20

+0

刪除event.preventDefault(),它的工作,謝謝。 – user2326532 2013-04-27 10:08:46

+0

很高興幫助! – 2013-04-27 10:09:26

0

要使其提交,您需要從提交處理程序返回true。

$(document).ready(function() { 
      $(".submit_wide").click(function() 
      { 
       if ($("#name").val() != '' && $("#pass").val() != '') 
       { 
        $("#holder").html('<input type="submit" name="submit" value="Please wait.." class="submit_wide">'); 
        return true; 
       } 
       else 
       { 
        $("#error").fadeIn("slow"); 
        $("#error").html('<span class="alert alert-error">Please fill ALL of the fields.</span>');    
        return false; 
       } 
      }); 
     }); 

ps我只是改變提交的值不能取代整個按鈕。

+0

我該如何更改該值? – user2326532 2013-04-27 10:07:46

+0

按照Palash的回答:) – 2013-04-27 10:10:11

0

使此HTML腳本:

<form action="login.php" method="post" id="form" onSubmit="return replaceIt()" > 
       <input type="text" name="name" class="textbox" id="name" placeholder="Username"><br /><br /> 
       <input type="password" name="pass" class="textbox" id="pass" placeholder="Password"><br /><br /> 
       <div id="holder"> 
        <input type="submit" name="submit" value="Login" class="submit_wide"> 
       </div> 
       <br /> 
      </form> 

這您的JS功能:

function replaceIt() { 
      if ($("#name").val() != '' && $("#pass").val() != '') 
      { 
       $("#holder").html('<input type="submit" name="submit" value="Please wait.." class="submit_wide">'); 
       return true; 
      } 
      else 
      { 
       $("#error").fadeIn("slow"); 
       $("#error").html('<span class="alert alert-error">Please fill ALL of the fields.</span>'); 
       return false;    
      } 
    } 
1

更換

$("#holder").html('<input type="submit" name="submit" value="Please wait.." class="submit_wide">'); 

$('.submit_wide').val('please wait..'); 

當您使用html(),它會刪除你的提交按鈕,創建一個新的。你只應該改變按鈕的值。