jjery在ajax成功后提交空表单

时间:2016-08-03 06:13:59

标签: jquery html 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');
    }           

  });
  }

});

2 个答案:

答案 0 :(得分:1)

使用php

将操作直接添加到您的页面
echo form_open('product/authenticate', array('class' => 'form-horizontal', 'id' => 'validate-form'));

答案 1 :(得分:1)

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

  1. 您未在click函数中返回false以停止下一个事件传播。
  2. 在ajax成功回复中,您已再次提交表单
  3. 所以修改后的代码应该如下所示。

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