jquery ajax成功后提交空表单

Question

我想在ajax成功后提交表单，但在ajax jquery提交带有空值的表单后。 基本上我在 codeigniter 工作，想要授权沙箱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

我发现您的代码中有两个问题

1. 您尚未在 click 函数中返回 false 来停止下一个事件传播。
2. 在 ajax 成功响应中，您已再次提交表单

修改后的代码应如下所示。

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

});