jquery submit open form после ajax success

Question

Я хочу отправить форму после успеха ajax, но после ajax jquery submit form с пустыми значениями. В основном я работаю в codeigniter и хочу разрешить транзакцию sandbox authorize.net. мой код

<?php echo form_open('', array('class' => 'form-horizontal', 'id' => 'validate-form')); ?> 
    <fieldset> 
    <legend>Payment/Authorization Information</legend> 
    <?php echo validation_errors(); ?> 
    <?php echo $this->session->flashdata('msg'); ?> 
    <div id="test"></div> 
    <div id="test2"></div> 
    <div class="form-group"> 
     <label for="number" class="col-lg-2 control-label">Card Number:</label> 
     <div class="col-lg-4"> 
     <input type="text" class="form-control" name="number" id="number" placeholder="enter number without spaces" required> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="code" class="col-lg-2 control-label">Card Code:</label> 
     <div class="col-lg-4"> 
     <input type="text" class="form-control" name="code" placeholder="enter card code" required> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="eDate" class="col-lg-2 control-label">Expiration Date:</label> 
     <div class="col-lg-4"> 
     <input type="text" class="form-control" name="eDate" placeholder="mmyy" required> 
     </div> 
    </div> 
    <?php 
     if($price){ 
     $price = $price[0]->price; 
     } 
    ?> 
    <div class="form-group"> 
     <label for="amount" class="col-lg-2 control-label">Product Price:</label> 
     <div class="col-lg-4"> 
     <input type="text" class="form-control" name="dAmount" value="<?=$price?> $" readonly required> 
     <input type="hidden" class="form-control" name="amount" value="<?=$price?>" required> 
     <input type="hidden" class="form-control" name="refTransId" id="refTransId" value="" required> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-lg-10 col-lg-offset-2"> 
     <button type="reset" class="btn btn-default">Reset</button> 
     <button type="button" id="submit" class="btn btn-primary">Submit</button> 

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

Javascript:

$('#submit').on('click', function(){ 

    if($('#validate-form').valid()){ 
    var postData = $('#validate-form').serializeArray(); 
    $.ajax({ 
    type: 'post', 
    url: '<?php echo base_url(); ?>product/authCard', 
    data: postData, 
    beforeSend: function() 
    { 
     $('#submit').append(' ... <img src="<?=base_url()?>images/loader.gif" width="25px" height="" alt="loader.gif" />'); 
    }, 
    success: function(data){ 
     var test = $.parseJSON(data); 
     if(test.responseCode == 1) 
     { 
     $('#refTransId').val(test.transId); 
     $('#validate-form').attr('action', '<?=base_url()?>product/authenticate'); 
     $('#validate-form').submit(); 


     // $('#test').html('<div class="alert alert-dismissible alert-success">   <button type="button" class="close" data-dismiss="alert">&times;</button>' +test.description + ' AUTH CODE: ' +test.authCode+ ', TRANS ID: ' +test.transId                +'. </div>'); 
     } 
     else 
     { 
     $('#test').html('<div class="alert alert-dismissible alert-danger">   <button type="button" class="close" data-dismiss="alert">&times;</button>  An Error has been occured. Error code : ' +test.errorCode + ', Error Text : ' +test.errorText+ '. </div>'); 
     } 
     $('#submit').html('Submit'); 
    }   

    }); 
    } 

}); 

Answer 1

Добавить действие непосредственно на страницу с PHP

echo form_open('product/authenticate', array('class' => 'form-horizontal', 'id' => 'validate-form')); 

Answer 2

Я вижу две проблемы в коде

1. вы не вернули false в функции click чтобы остановить распространение следующего события.
2. в ответ АЯКС успеха вы отправите форму снова

Так модифицированный код должен быть как ниже.

$('#submit').on('click', function(e){ 

    if($('#validate-form').valid()){ 
     var postData = $('#validate-form').serializeArray(); 
     $.ajax({ 
      type: 'post', 
      url: '<?php echo base_url(); ?>product/authCard', 
      data: postData, 
      beforeSend: function() 
      { 
       $('#submit').append(' ... <img src="<?=base_url()?>images/loader.gif" width="25px" height="" alt="loader.gif" />'); 
      }, 
      success: function(data){ 
       var test = $.parseJSON(data); 
       if(test.responseCode == 1) 
       { 
       $('#refTransId').val(test.transId); 
       $('#validate-form').attr('action', '<?=base_url()?>product/authenticate'); 

       // $('#test').html('<div class="alert alert-dismissible alert-success"> <button type="button" class="close" data-dismiss="alert">&times;</button>' +test.description + ' AUTH CODE: ' +test.authCode+ ', TRANS ID: ' +test.transId                +'. </div>'); 
       } 
       else 
       { 
       $('#test').html('<div class="alert alert-dismissible alert-danger"><button type="button" class="close" data-dismiss="alert">&times;</button>  An Error has been occured. Error code : ' +test.errorCode + ', Error Text : ' +test.errorText+ '. </div>'); 
       } 
       $('#submit').html('Submit'); 
      } 
     }); 
    } 
    return false; 

});