保持按鈕提交表單Javascript

我正在學習JavaScript，並且無法在不提交表單的表單中生成按鈕。還有一個類似的問題here，但指定type="button"最常見的答案在我的情況下不起作用，其他答案涉及jQuery，我現在想省略它。保持按鈕提交表單Javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 
<head> 
<script type="text/javascript"> 
     function submit(){ 
       alert("Yo") 
     } 
</script> 
</head> 

<body> 
<form name="myForm" onsubmit="submit()"> 
     <input type="button" value="Submit!" onClick="submit()" /> 
</form> 
</body> 
</html>

來源

2016-07-10 MANA624

停止形式是因爲當點擊按鈕時，你實際上調用了'submit（）'方法。（好吧，它實際上是form.submit（））。默認情況下，除非您直接調用'form.submit（）'，否則'type =「按鈕」'的輸入不會進行表單提交。 – Tibrogargan

@Tibrogargan就是這個問題。一旦我改變了功能名稱，它完美的工作！如果你讓它成爲答案，我可以接受它。 – MANA624

這實際上是一個非常有趣的問題。由於函數的範圍是在窗口級別，所以您希望您的'onClick =「submit（）」'使用'window.submit（）'方法 - 但是當輸入標籤被創建時它解析爲'form.submit（）'因爲上下文更改爲表單。我無法找到任何地方記錄的行爲 - 它可能實際上是依賴於瀏覽器（或者我只是不知道正確的地方看） – Tibrogargan

由於你沒有使用type="submit"你的表單提交任何東西的唯一原因是因爲你點擊按鈕時，你實際上調用了submit（）方法。（好吧，其實是form.submit() - 你創建的方法是window.submit()）。

缺省情況下，type="button"輸入不會做一個表單提交，除非你從字面上調用form.submit（）

來源

2016-07-10 21:37:32 Tibrogargan

沿事件在你的submit功能的參數傳遞，並阻止其默認行爲：

function submit(event) { 
    event.preventDefault(); 
    alert('Yo'); 
} 

onClick='submit(event)'

來源

2016-07-10 21:21:42 1sloc

-1

只要讓它返回的功能，並返回false

<script type="text/javascript"> 
     function submit(){ 
       alert("Yo"); 
return false; 
     } 
</script> 
</head> 

<body> 
<form name="myForm" onsubmit="submit()"> 
     <input type="button" value="Submit!" onClick="return submit()" /> 
</form> 
</body> 
</html>

來源

2016-07-10 21:23:47 MoustafaS

這將不起作用@MoustafaS，因爲onClick中的submit（）是form.submit（）在HTML5中的內聯事件處理程序中進行了修改。 – progysm

function onFormSubmit() 
 
{ 
 
    console.log('FORM SUBMITTED'); 
 
    return false; 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 

 
<html> 
 
<body> 
 
    <form name="myForm" onsubmit="return onFormSubmit()"> 
 
    <input type="submit" value="Submit form! [input type = submit]" /><br /> 
 
    <input type="button" value="Submit form! [input type = button, onclick = form.submit]" onClick="return onFormSubmit();" /><br /> 
 
    <!-- in real test change onClick behavior 
 
    return onFormSubmit(); 
 
    to: 
 
    form.submit(); 
 
    Here I used onFormSubmit() because when you calling form.submit() browser doesn't dispatch onsubmit event --> 
 
    <button>Submit form! [button]</button><br /> 
 
    <a href="#" onClick="return onFormSubmit();">Submit form! [a, onclick = form.submit]</a><br /><br /> 
 
    <input type="button" value="Click me, no submit! [input type = button]" /><br /> 
 
    </form> 
 
</body> 
 
</html>

來源

2016-07-10 22:43:32

約會從引進的Javascript由Netscape公司形式定義爲HTML屬性的元素事件處理程序提供了一個特殊的作用域鏈，它可以在搜索全局對象之前搜索單擊的元素的屬性和表單元素。 [這是用於網絡程序員便利性和早於引入具有用於訪問和操作的標準化方法文檔對象模型的。]因此

<input type="button" value="Submit!" onClick="submit()" />

點擊時執行從HTML屬性字符串創建的anonomous功能：

function(event) { submit()}

它搜索其範圍鏈爲submit，並將其作爲封閉form對象的屬性。可能的解決方案包括

明確指定功能的全球版本執行：
```
onclick="window.submit()" 
```
別的命名全局函數的東西，說：「preSubmit」，這不符合的屬性衝突形式對象：
```
onclick="preSubmit()" 
```
添加點擊事件處理程序的按鈕在JavaScript後按鈕元件一直CREA特德（只有在HTML中指定的函數有一個特殊的作用域鏈）。

'19.1.6。事件處理程序的範圍「在O'Reilly的」Javascript權威指南「的chapter 19範圍內，是我所能找到的唯一一個討論這個問題的鏈接。

另一個答案

的HTML提供的事件處理程序的作用域鏈現在是覆蓋在HTML5標準@ progysm的評論後更新，internal raw uncompiled handler下，列表項1.10，這表明該處理器的詞彙範圍，包括單擊的元素，它所屬的表單（如果有）和文檔對象。我會警告不要太依賴這個：一些瀏覽器曾經在其作用域鏈中包含單擊元素的每個父對象，而不僅僅是它的形式和文檔。

來源

2016-07-11 01:11:37 traktor53

嗯，是的，'window.submit（）'也可以很好地工作，並且增加了一些清晰度。 – MANA624

如果要有條件地消耗事件與否，簡單地返回true或false從你的處理函數，像這樣......

的JavaScript：

function validate() { 
    var valid = true; 
    // the following two validation functions would return a Boolean. 
    valid = valid && validateUsername(); 
    valid = valid && validatePassword(); 
    // If validation is fine, return true and this allows post to continue. 
    // If validation is not fine, return false and this disallows the submission from going ahead. 
    return valid; 
}

HTML：

<form name="frmTest" id="frmTest" 
    method="post" action="example.action" 
    onsubmit="return validate();"> 
</form>

如果你不需要它是有條件的，當然返回false。

來源

2016-07-11 01:20:25 ManoDestra

爲了防止提交您的按鈕，您可以：

使用preventDefault()上在操作結束時onsubmit事件的<form>或
使用return false在按鈕的事件上的onclick事件。

代碼：

<html> 
    <head></head> 

    <body> 
     <form name = "myForm" method = "POST"> 
      <input name = "button" type="submit" value="Submit!"/> 
     </form> 

     <script type = "application/javascript"> 
      document.forms.myForm.onsubmit = function(e) { 
       e = e || event; 
       e.preventDefault(); 
      } 

      document.forms.myForm.button.onclick = function() { 
       // Your code 
       return false; // Prevents the button from trying to submit 
      } 
     </script> 
    </body> 
</html>

注意：

一定，因爲它是需要使用method屬性在<form>標籤。
e = e || event意味着e將在所有承認它的瀏覽器等於e和等於event在承認event瀏覽器。
document.forms.[form name].[input name]是另一種方式來獲得基於其名稱的元素，而相比之下，document.getElementById()需要的元素，它並沒有在你的HTML設置的id。

您可以測試代碼的功能與生活下面的代碼片段：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
    <html> 
 
     <head></head> 
 

 
     <body> 
 
      <!-- The form we don't want to submit --> 
 
      <form name = "myForm" method = "POST"> 
 
       <input name = "button" type="submit" value="I will not submit!"/> 
 
      </form> 
 
      
 
      <!-- The form we want to submit --> 
 
      <form name = "myForm2" method = "POST"> 
 
       <input name = "button2" type="submit" value="I will submit!"/> 
 
      </form> 
 

 
      <script type = "application/javascript"> 
 
       // For the form we don't want to submit 
 
       document.forms.myForm.onsubmit = function(e) { 
 
        e = e || event; 
 
        e.preventDefault(); 
 
       } 
 

 
       document.forms.myForm.button.onclick = function() { 
 
        console.log("NOT Submitted!"); 
 
        return false; 
 
       } 
 
        
 
       // For the form we want to submit 
 
       document.forms.myForm2.button2.onclick = function() { 
 
        console.log("Submitted!"); 
 
       } 
 
      </script> 
 
     </body> 
 
    </html>

來源

2016-07-11 01:26:25

此方法適用於在本地JavaScript。並不妨礙在輸入回車鍵，它做什麼，它應該 - 既然你沒有使用`類型=「提交」`唯一的原因，你的形式將提交任何東西，從提交上輸入

function preventReturnKeyFormSubmit(){ 
    //listen to key press events 
    window.addEventListener('keydown', function(e){ 
     //set default value for variable that will hold the status of keypress 
     pressedEnter = false; 

     //if user pressed enter, set the variable to true 
     if(event.keyCode == 13) 
      pressedEnter = true; 

     //we want forms to disable submit for a tenth of a second only 
     setTimeout(function(){ 
      pressedEnter = false; 
     },100) 

    }) 

    //find all forms 
    var forms = document.getElementsByTagName('form') 

    //loop through forms 
    for(i = 0; i < forms.length; i++){ 
     //listen to submit event 
     forms[i].addEventListener('submit', function(e){ 
      //if user just pressed enter, stop the submit event 
      if(pressedEnter == true) { 
       e.preventDefault(); 
       return false; 
      } 
     }) 
    } 

} 
//run this function inside document onload/domready/ or if using jquery .ready() 
preventReturnKeyFormSubmit()

來源

2017-12-02 14:40:23

保持按鈕提交表單Javascript

回答

相關問題