在jquery中添加兩個表單數據並提交

Question

我有兩個HTML表單。當第二個表單的提交按鈕被按下時。第一種形式應該添加到第二種形式的數據，然後它應該提交。

<form id="registration-form" class="clearfix" action="" method="post"> 
<div class="form form-post-register"> 
    <div class="left-input"> 
    <label for="txt_name"> 
    <input id="txt_name" type="text" name="name" id="name" class="txt fill-width txt-name" placeholder="Enter Name"/> 
     </label> 
    <label for="txt_email"> 
    <input id="email" type="email" name="email" class="txt fill-width txt-email" placeholder="Enter Email" value=""/> 
    </label> 
    <label for="confirm_email"> 
    <input id="confirm_email" type="email" name="confirm_email" class="txt fill-width txt-email" placeholder="Confirm Email" value=""/> 
    </label> 
    <label for="password"> 
    <input id="pass" type="password" name="pass" class="txt fill-width txt-password" placeholder="Enter Password" value=""/> 
    </label> 
    <label for="confirm_password"> 
    <input id="confirm_pass" type="password" name="confirm_pass" class="txt fill-width txt-password" placeholder="Confirm Password" value=""/> 
    </label> 
    <label for="phone"> 
    <input id="phone" type="number" name="phone" class="txt fill-width txt-phone" placeholder="Enter Cell No." value=""/> 
    </label> 

    </div> 
    </div> 
</form> 

第二形態：

<form id= "credit_card" class="form form-post-register" method="post"> 

    <label for="account_type"> 
    <h3>Select Account Type</h3> 
    <input id="investor" type="radio" name="user" class="investor" value=""/>&nbsp;Investor 
    <input id="startup" type="radio" name="user" class="startup" value=""/>&nbsp;Startup 
    </label> 
    <label for="txt_credit_card_no"> 
    <input id="txt_credit_card_no" type="number" name="txt_credit_card_no" class="txt fill-width txt_credit_card_no" placeholder="Enter Credit Card Number" value=""/> 
    </label> 
    <label for="txt_cvn"> 
    <input id="txt_cvn" type="number" name="txt_cvn" class="txt fill-width txt_cvn" placeholder="Enter CVN" value=""/> 
    </label> 
    <label for="txt_address"> 
    <textarea id="txt_address" name = "txt_address" cols="30" rows="10" class="txt fill-width" placeholder="Your Address"></textarea> 
    </label> 
    </div> 
    <div class="clear"></div> 
    <p class="rs ta-r clearfix"> 
    <span id="response"></span> 
    <p>By clicking on Register, you agree to our terms of use and privacy policy</p> 
    <input type="submit" class="btn btn-white btn-submit-comment" value="Register"> 
     </p> 
    </div><!--end: .tab-pane --> 
     </div> 
    </form> 

jQuery代碼：

jQuery('#credit_card').on('submit',function(e) { 
    e.preventDefault(); 
    var form1Data = $('#registration-form'); 
    var form2Data = $('#credit_card'); 
    var action = $("#registration-form").attr("action"); 
    var data = (form1Data.add(form2Data).serialize()); 
    jQuery.post(action, data, function() { 
     alert('Form 1 and 2 submitted'); 
    }); 

}); 

我找到了這個jQuery代碼從stackoverflow. The problem is that when i hit Register button. It does not alert（Form1併成功提交窗口2）; I am unable to find the error. It receives form2 data but i think it does not receive form2`數據。任何幫助，將不勝感激。

Answer 1

請做修改如下： 1）添加動作registration_form形式（我已經改變了這裏的形式ID - registration_form）：

<form id="registration_form" class="clearfix" action="register.html" method="post"> 

2）添加動作CREDIT_CARD形式：

<form id= "credit_card" action="register.html" class="form form-post-register" method="post"> 

3）更改提交按鈕類型爲按鈕：

<input type="button" class="btn btn-white btn-submit-comment" value="Register"> 

4）更改腳本：

$(document).ready(function(){ 
    $('#credit_card').on('click',function(e) { 
    var dataString = $("#registration_form, #credit_card").serialize(); 
    var action = $("#registration_form").attr("action"); 
    $.ajax({ 
     type: 'POST', 
     url: action, 
     data: dataString, 
     success: function(data) { 
      alert('Form 1 and 2 submitted'); 
     } 
    }); 
    }); 
    }); 

我希望這將工作:)