如何提交一個特定的表單，如果多個表單存在於一個頁面使用jQuery

Question

我有兩種形式。

<form name="frm1" action="someurl" method="post"> 
    <input type="submit" name="btn1" class="buttons" value="Submit"/> 
</form> 

和

<form name="frm2"> 
    <input type="submit" name="btn2" value="Submit"/> 
</form> 

我需要在表格 「FRM2」 的 「BTN2」 的點擊提交表單 「的frm1」。

Answer 1

你會說

<input type="submit" name="btn1" id="btn1" value="Submit"/>

$("#btn1").click(function(){ 
    $("#frm1").submit(); 
} 

和

<input type="submit" name="btn2" id="btn2" value="Submit"/>

$("#btn2").click(function(){ 
    $("#frm1").submit(); 
} 

Answer 2

您可以使用Ajax在第二個之前提交第一種形式：

$('form[name=frm2]').submit(function() { 
    var form1 = $('form[name=frm1]'); 
    $.ajax({ 
     type: "POST", 
     url: form1.attr('action'), 
     data: form1.serialize(), 
     async: false; 
    }); 
}); 

Answer 3

我通常會避免使用.submit（）函數，因爲我幾乎總是需要做更多的事情來處理.submit（）允許我做的事情。

因此，您提交按鈕的非提交選項必須更改爲普通按鈕。

$('.btn2').bind('click', function(){ 

    var form1Data = $('#frm1').serialize(); 
    $.ajax({ 
     url : 'someurl', 
     type : 'post', 
     datatype : 'json', 
     data : form1Data, 
     success : function(json) { 
      sumbitForm2(); 
     } 
    }); 
}); 

function submitForm2() { 

    var form2Data = $('#frm2').serialize(); 
    $.ajax({ 
     url : 'urlToSumbitForm1', 
     type : 'post', 
     datatype : 'json', 
     data : form2Data, 
     success : function(json) { 
      //do something if you need to 
     } 
    }); 
} 

Answer 4

考慮HTML：

<form id="target" action="destination.html"> 
    <input type="text" value="Hello there" /> 
    <input type="submit" value="Go" /> 
    </form> 
    <div id="other"> 
    .... 
    </div> 

事件處理程序可以綁定到窗體：

$('#target').submit(function() { 
    alert('Handler for .submit() called.'); 
    return false; 
    }); 

點擊功能：

$('#other').click(function() { 
    $('#target').submit(); 
    }); 

這裏是鏈接有一看： How can I submit form on button click when using preventDefault()?

Answer 5

HTML

<form name="frm1" action="someurl" method="post" id="frm1"> 
<input type="submit" name="btn1" class="buttons" value="Submit"/> 
</form> 


<input type="submit" name="btn2" onclick="formSubmit()" value="Submit"/> 

的Javascript

<script> 
function formSubmit() 
{ 
document.getElementById("frm1").submit(); 
} 
</script> 

Answer 6

<button type="submit" form="form1" value="Submit">Submit</button> 

的form屬性指定的形式，該按鈕將提交的id。