0

I have a jQuery ajax function which adds some hidden fields to a form. I am trying to change the action of the form and then submit it using jQuery if ajax returns successfully.

Here is the issue:

After ajax successfully adds those hidden fields to the form, I am submitting the form from the ajax. But when the submit/click event is called, the amount field (one of the hidden field) duplicates. However my php (ajax callback) function is returning only one amount field.

Here is my code:

function eeac_hbl_form()
{
    $fname        = $_POST['fname'];
    $lname        = $_POST['lname'];
    $email        = $_POST['email'];
    $phone        = $_POST['phone'];
    $country      = $_POST['countries'];
    $message      = $_POST['message'];

    $wp_travel_engine_settings = get_option( 'wp_travel_engine_settings', true );
    $obj = new Wp_Travel_Engine_Functions();
    $invoiceNo = str_pad(rand(100000, (int) 99999999999999999999),20,"0",STR_PAD_LEFT); 
    $amount = $_SESSION['trip-cost'];
    $amount = str_replace(",", "", $amount );
    $amount = (int) $amount; 
    $amount = str_pad(($amount*100),12,"0",STR_PAD_LEFT); 

    $merchantId = '913';

    $code = isset($wp_travel_engine_settings['currency_code']) ? $wp_travel_engine_settings['currency_code']: 'USD';
    $currencyCode = $obj->wp_travel_engine_currencies_symbol( $code );
    $secretKey = 'AKN'; 
    $nonSecure = $notravellers;
    $signatureString = $merchantId.$invoiceNo.$amount.$currencyCode.$nonSecure; 
    $signData = hash_hmac('SHA256', $signatureString, $secretKey, false);   
    $signData = strtoupper($signData);
    ob_start();
        ?>
    <input type="hidden" id="paymentGatewayID" name="paymentGatewayID" value="<?php echo $merchantId; ?>"/>  
    <input type="hidden" id="invoiceNo" name="invoiceNo" value="<?php echo $invoiceNo; ?>"/>  
    <input type="hidden" id="productDesc" name="productDesc" value="test"/>  
    <input type="hidden" id="amount" name="amount" value="<?php echo $amount;?>"/>  
    <input type="hidden" id="currencyCode" name="currencyCode" value="840"/>  
    <input type="hidden" id="userDefined1" name="userDefined1" value="test1"/>  
    <input type="hidden" id="nonSecure" name="nonSecure" value="here"/>  
    <input type="hidden" id="hashValue" name="hashValue" value="<?php echo $signData; ?>"/>
    <?php
    $data = ob_get_clean();
    wp_send_json_success( $data );
    die;
}
add_action( 'wp_ajax_eeac_hbl_form', 'eeac_hbl_form' );
add_action( 'wp_ajax_nopriv_eeac_hbl_form', 'eeac_hbl_form' );  

And here is my jQuery ajax,

$( '#wp-travel-engine-order-form .wp-travel-engine-submit' ).on( "click", function(e) {
        e.preventDefault();
        fname        = $('#fname').val();
        lname        = $('#lname').val();
        email        = $('#email').val();
        phone        = $('#phone').val();
        countries    = $('#country').val();
        form = $(this).parent();
        jQuery.ajax({
            dataType : 'json',   
            type: 'post',
            url: WTEAjaxData.ajaxurl,
            data: { action: 'eeac_hbl_form', fname:fname, lname:lname, email:email, phone:phone, countries:countries },
            beforeSend: function() {
                $("#loader").fadeIn(500);
            },
            success: function(response) {
                $('#wp-travel-engine-order-form').attr('action','https://hblpgw.2c2p.com/HBLPGW/Payment/Payment/Payment');
                $('#wp-travel-engine-order-form').html(response.data);
                // $('#wp-travel-engine-order-form').submit();
                $("form[name='wp-travel-engine-order-form']").submit();
            },
            complete: function() {
                $("#loader").fadeOut(500);
            }
        });
    });

Here is an screenshot on what I see on console after $("form[name='wp-travel-engine-order-form']").submit(); is called: http://prntscr.com/ldgd3g

I am stuck from last 24 hours and have no clue where I am doing it wrong :(

Any help would be appreciable.

  • Well, an easy way to debug it, is change the amount field id value to amount2 or something else. – Sally CJ Nov 2 '18 at 9:25
  • Yes I did but there is still the same issue. But when field name is changed, the issue is fixed but I can't change the field name :( – saurav.rox Nov 2 '18 at 9:30
  • In that case, in your success callback, try removing the first amount field after you call the .submit(). (Or upon calling it - hook to the submit event) – Sally CJ Nov 2 '18 at 9:40
  • Thanks for replying. I have also noticed, on every click on submit button there is amount field is being added again. Also, as you said If I remove the amount field from php callback, amount field is not added to the field and there would be no amount field at all. – saurav.rox Nov 2 '18 at 9:45
  • I mean, remove it from the DOM - e.g. $('#amount').remove(). Where is the original JS file? You can check it for the code which may be responsible in adding the (second) amount field. – Sally CJ Nov 2 '18 at 9:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.