JQuery와 내가 아약스 성공 후 양식을 제출하려면 아약스 성공

Question

후 빈 양식을 제출하지만 아약스 JQuery와 빈 값으로 양식을 제출 한 후. 기본적으로 나는 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> 

자바 스크립트입니다 :

$('#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. click funct에서 false를 반환하지 않았습니다. 다음 이벤트 전달을 중지합니다. 다시

그래서 수정 된 코드는 아래와 같이해야합니다 양식을 제출 한 아약스 성공 응답

.

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

});