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','');
$('#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:
I am stuck from last 24 hours and have no clue where I am doing it wrong :(
Any help would be appreciable.