純粹從Javascript處理表單

我在我的website中有以下表單。純粹從Javascript處理表單

 <form action="" method="GET"> 
     <input type="text" name="query" value="" /> 
     <input type="button" name="talk" value="talk" onClick="askCow(this.form)" /> 
     </form>

單擊該按鈕時會觸發更新頁面的AJAX請求。然而，使用返回不會;它只是使用GET提交表單，這不是所需的行爲。使用onsumit="return false;"或類似的禁用提交，但這不是所需的行爲。

如何在確認表單未提交的情況下在輸入按鍵（「表單提交」）上執行askCow函數？我是不是這樣做的壞人？我使用AJAX的原因是它可以讓我完全省略服務器端的模板邏輯。

謝謝！

編輯：這裏是完整的頁面

<html> 
    <head><title>Psycowlogist</title></head> 
    <body> 
    <div id="history"> 
     Previous discussion 
    </div> 
    <div id="cow"> 
     <pre> 
_______________________ 
< What is your problem? > 
----------------------- 
     \ ^__^ 
     \ (oo)\_______ 
      (__)\  )\/\ 
       ||----w | 
       ||  || 
     </pre> 
    </div> 
    <div id="talk"> 
     <form id="talkForm" action="" method="GET" onsubmit="askCow(this)"> 
     <input type="text" name="query" value="" /> 
     <input type="button" name="talk" value="talk" onClick="askCow(this.form)" /> 
     </form> 
    </div> 
    </body> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
    <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/coffeescript"> 
    $j = jQuery 

    window.askCow = (form) -> 
     $j.get "/cowanswer", 
     {q: form.query.value}, 
     (data) -> $j("#cow pre").html(data["cow-answer"]) 
     return false 
    </script> 
</html>

來源

2012-05-19 Rom1

只需使用的form

<form action="" method="GET" onsubmit="return askCow(this);"> 
    <input type="text" name="query" value="" /> 
    <input type="button" name="talk" value="talk"/> 
    </form>

askCow功能onsubmit event應該是這個樣子

function askCow() 
{ 
    //do ajax stuff 
    return false; 
}

來源

2012-05-19 08:11:11 archil

我這樣做了，但表單確實被提交，這會重置頁面（我也嘗試過'askCow（this）&& false'） – Rom1

@ Rom1如果您想使用jjax處理它，請使用jQuery Form插件。 – Niranjan

@ Rom1，看看我的更新 – archil

您可以使用jQuery Form Plugin。您可以撥打askCow()。

var options = { 
     target:  '#output', // target element(s) to be updated with server response 
     beforeSubmit: showRequest, // pre-submit callback 
     success:  showResponse // post-submit callback 
    }; 

$('#theForm').submit(function() { 
     askCow(this); 
     $(this).ajaxSubmit(options); 

     return false; 
    });

來源

2012-05-19 08:10:33 Niranjan

感謝您的信息！我使用onSubmit解決方案，因爲它更簡單，但我會密切關注這個插件。 – Rom1

純粹從Javascript處理表單

回答

相關問題