jquery - jQuery在ajax成功后提交空表单

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

  });
  }

});

最佳答案

我知道你的代码有两个问题
您没有在click函数中返回false以停止下一个事件传播。
在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;

});

关于jquery - jQuery在ajax成功后提交空表单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38735745/