同一個form表單中有多個提交按鈕規定不同功能程式碼例項

admin發表於2017-03-30
ORM

通常情況下在一個表單中只有一個提交按鈕，只要點選一下提交按鈕就可以完成特定的任務。

但是有時候，可能在表單中有兩個提交按鈕，點選以後能夠完成不同的任務。

下面就通過程式碼例項介紹一下如何實現此功能。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function check(val){ 
  if(val=="提交"){ 
    $("#theform")[0].action="index.php"; 
    $("#theform")[0].submit(); 
  }
  else{ 
    $("#theform")[0].action="antzone.php"; 
    $("#theform")[0].submit(); 
  }  
}
$(document).ready(function(){
  $("form input[type=submit]").click(function(){
    check(this.value);
  })
})
</script>
</head>
<body>
<form method="get" id="theform" name="myform">
<input type="submit" value="提交"/>
<input type="submit" value="儲存"/> 
</form>
</body>
</html>

上面的程式碼實現了我們的要求，點選不同的按鈕會將資料提交到不同的頁面，下面介紹一下它的實現過程。

程式碼註釋:

1.function check(val){}，此函式實現辨別提交到不同頁面的效果，引數是按鈕的value屬性值。

2.if(val=="提交"){ 

  $("#theform")[0].action="index.php";

  $("#theform")[0].submit();

}，如果value屬性值等於"提交"，那麼就是設定form表單的action屬性值，並且提交按鈕。

3.else{ 

  $("#theform")[0].action="antzone.php";

  $("#theform")[0].submit();

}，如果value屬性值等於"儲存"，那麼就是設定form表單的action屬性值，並提交按鈕。

4.$(document).ready(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

5.$("form input[type=submit]").click(function(){

  check(this.value);

})，為提交按鈕註冊click事件處理函式。

相關文章