jqueryで2つのフォームデータを追加して送信する

Question

2つのHTMLフォームがあります。 2番目のフォームの送信ボタンが押されたとき。最初のフォームを2番目のフォームデータに追加してから提出する必要があります。

<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'); 
    }); 

}); 

私はstackoverflow. The problem is that when i hit Register button. It does not alert（正常に送信をForm1とForm2の）から、このjQueryのコードを発見しました。 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'); 
     } 
    }); 
    }); 
    }); 

私は、これはそれはまだ動作していない:)