CODEWITHSUNDEEP
jqueryhtmlajax
Arif Sami
Arif Sami

Reputation: 317

jquery submit empty form after ajax success

I want to submit form after ajax success, but after ajax jquery submit form with empty values. basically i work in codeigniter and want to authorize a sandbox authorize.net transaction. my code is

<?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');
    }           

  });
  }

});

Upvotes: 2

Views: 1071

Answers (2)

madalinivascu
madalinivascu

Reputation: 32354

Add the action directly to your page with php

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

Upvotes: 1

Haresh Vidja
Haresh Vidja

Reputation: 8496

I see there are two issues in your code

  1. you have not returned false in the click function to stop next event propagation.
  2. in ajax success response you have submitted the form again

So modified code should be like as below.

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

});

Upvotes: 1

Related Questions