Hinzufügen von zwei Formulardaten in jquery und Senden

Question

Ich habe zwei HTML-Formulare. Wenn der Submit-Button des zweiten Formulars gedrückt wird. Das erste Formular sollte zu den zweiten Formulardaten hinzugefügt werden und dann sollte es eingereicht werden.

<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> 

Zweite 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-Code:

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

}); 

ich diesen jQuery-Code aus stackoverflow. The problem is that when i hit Register button. It does not alert (Form1 und form2 erfolgreich abgegeben) gefunden hatte; I am unable to find the error. It receives form2 data but i think it does not receive form2` daten. Jede Hilfe wäre willkommen.

Answer 1

Bitte unten Änderungen tun: 1) in Aktion Formular registration_form (I form id hier geändert haben - registration_form):

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

2) hinzufügen Aktion Formular CREDIT_CARD:

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

3) Ändern Sie den Übergabetaste-Typ auf die Schaltfläche:

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

4) Änderungsskript:

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

Ich hoffe, das :)