Home » Jquery » javascript – jQuery submit form on button click?

javascript – jQuery submit form on button click?

Posted by: admin February 22, 2020 Leave a comment

Questions:

Here is the html of page (the website is NOT MINE);

<div class="row">
<main class="col-s-12 col-l-14 col-xl-14 col-hg-11 offset-xl-1 offset-hg-3 no-gutters gl-vspace-bpl-medium gl-vspace-bpall-small">
<div data-auto-id="delivery-address"></div>
<div class="row no-gutters">
<h4 class="col-s-12" data-auto-id="delivery-address-heading">Shipping Address</h4></div>
<form class="form___21EqM inlineItems___5-Bw1" method="post" novalidate="">
<div class="row no-gutters">
<div class="row">
<div class="row">
<div class="no-gutters gl-vspace-bpall-small col-s-12 col-l-12 col-m-6 left___bdFOT">
<div class="field___Jw7ur gl-form-item gl-form-item--required gl-form-item--success">
<div class="gl-input">
<label for="firstName" class="gl-input__label gl-input__label--hoisted">First Name<span class="gl-form-asterisk"></span></label>
<input type="text" placeholder=" " name="firstName" id="firstName" required="" class="gl-input__field gl-input__field--with-icon" maxlength="33" autocomplete="on" data-auto-id="shippingAddress-firstName" value="">
<svg class="gl-icon gl-input__icon">
<use xlink:href="#checkbox-checkmark"></use>
</svg>
</div>
</div>
</div>
<div class="no-gutters gl-vspace-bpall-small col-s-12 col-l-12 col-m-6 right___3r0Hx">
<div class="field___Jw7ur gl-form-item gl-form-item--required gl-form-item--success">
<div class="gl-input">
<label for="lastName" class="gl-input__label gl-input__label--hoisted">Last Name<span class="gl-form-asterisk"></span></label>
<input type="text" placeholder=" " name="lastName" id="lastName" required="" class="gl-input__field gl-input__field--with-icon" maxlength="33" autocomplete="on" data-auto-id="shippingAddress-lastName" value="">
<svg class="gl-icon gl-input__icon">
<use xlink:href="#checkbox-checkmark"></use>
</svg>
</div>
</div>
</div>
<div class="no-gutters gl-vspace-bpall-small col-s-12">
<div class="field___Jw7ur gl-form-item gl-form-item--required gl-form-item--success">
<div class="gl-input">
<label for="address1" class="gl-input__label gl-input__label--hoisted">First line of address<span class="gl-form-asterisk"></span></label>
<input type="text" placeholder=" " name="address1" id="address1" required="" class="gl-input__field gl-input__field--with-icon" maxlength="35" autocomplete="on" data-auto-id="shippingAddress-address1" value="">
<svg class="gl-icon gl-input__icon">
<use xlink:href="#checkbox-checkmark"></use>
</svg>
</div>
</div>
</div>
<div class="no-gutters gl-vspace-bpall-small col-s-12">
<div><a class="gl-link" data-auto-id="hidden-link-shippingAddress-address2">Add additional address info</a>
<div class="gl-vspace-bpall-medium"></div>
</div>
<div class="field--is-hidden___1nKfc field___Jw7ur gl-form-item">
<div class="gl-input">
<label for="address2" class="gl-input__label">Additional info<span class="gl-form-asterisk"></span></label>
<input type="text" placeholder=" " name="address2" id="address2" class="gl-input__field gl-input__field--empty gl-input__field--with-icon" maxlength="35" autocomplete="on" data-auto-id="shippingAddress-address2" value="">
<div class="gl-form-hint" data-auto-id="false">Apartment, Suite, Unit, Building, Floor (Optional)</div>
</div>
</div>
</div>
<div class="no-gutters gl-vspace-bpall-small col-s-12 col-l-12 col-m-6 left___bdFOT">
<div class="field___Jw7ur gl-form-item gl-form-item--required gl-form-item--success">
<div class="gl-input">
<label for="city" class="gl-input__label gl-input__label--hoisted">City<span class="gl-form-asterisk"></span></label>
<input type="text" placeholder=" " name="city" id="city" required="" class="gl-input__field gl-input__field--with-icon" maxlength="33" autocomplete="on" data-auto-id="shippingAddress-city" value="">
<svg class="gl-icon gl-input__icon">
<use xlink:href="#checkbox-checkmark"></use>
</svg>
</div>
</div>
</div>
<div class="no-gutters gl-vspace-bpall-small col-s-12 col-l-12 col-m-6 right___3r0Hx"><span><div class="gl-form-item"><div class="gl-native-dropdown" autoid="shippingAddress-stateCode" optionsautoid="shippingAddress-stateCode-options" data-auto-id="shippingAddress-stateCode"><div class="gl-native-dropdown__select"><span class="gl-native-dropdown__select-label"><span class="gl-native-dropdown__select-label-text">New York</span></span>
<svg class="gl-icon gl-native-dropdown__select-icon">
<use xlink:href="#dropdown"></use>
</svg>
</div>
<select class="gl-native-dropdown__select-element">
<option></option>
<option>AA Military</option>
</select>
</div>
</div>
</span>
</div>
<div class="no-gutters gl-vspace-bpall-small col-s-12 col-l-12 col-m-6 left___bdFOT">
<div class="field___Jw7ur gl-form-item gl-form-item--required gl-form-item--success">
<div class="gl-input">
<label for="zipcode" class="gl-input__label gl-input__label--hoisted">Zip Code<span class="gl-form-asterisk"></span></label>
<input type="text" placeholder=" " name="zipcode" id="zipcode" required="" class="gl-input__field gl-input__field--with-icon" maxlength="10" autocomplete="on" data-auto-id="shippingAddress-zipcode" value="">
<svg class="gl-icon gl-input__icon">
<use xlink:href="#checkbox-checkmark"></use>
</svg>
</div>
</div>
</div>
<div class="no-gutters gl-vspace-bpall-small col-s-12">
<div>
<div class="no-gutters"><strong>Country:</strong><span class="display_field_value___3DGcf" data-auto-id="delivery-country">USA</span></div>
<div class="gl-vspace-bpall-small "></div>
</div>
</div>
</div>
</div>
<div class="delivery-options___1hapU">
<div>
<div data-auto-id="delivery-option" class="row no-gutters gl-vspace-bpall-small delivery-option___1OuUH" role="presentation">
<div class="col-s-10 col-l-20 row no-gutters" data-auto-id="delivery-option-name">
<div class="delivery-option__details___3jpvC">
<div class="row">
<p class="delivery-option__title___TcPuy delivery-option__strong_title___10rYC"><strong>Shipping</strong></p>
</div>
<div class="row">
<div class="delivery-option__description">
<p class="delivery-option__line___1D6hB">UPS (3-5 Day Delivery)</p>
</div>
</div>
</div>
</div>
<div class="delivery-option__price___XTCL3 delivery-option__price--right gl-text-end col-s-2 col-l-4" data-auto-id="delivery-option-price">$6.00</div>
</div>
</div>
</div>
<h4 class="col-s-12 gl-vspace-bpall-medium"><span><span>Personal Details</span></span></h4>
<div class="row">
<div class="row">
<div class="no-gutters gl-vspace-bpall-small col-s-12">
<div class="field___Jw7ur gl-form-item gl-form-item--required gl-form-item--success">
<div class="gl-input">
<label for="phoneNumber" class="gl-input__label gl-input__label--hoisted">Phone Number<span class="gl-form-asterisk"></span></label>
<input type="tel" placeholder=" " name="phoneNumber" id="phoneNumber" required="" class="gl-input__field gl-input__field--with-icon" maxlength="25" autocomplete="on" data-auto-id="shippingAddress-phoneNumber" value="">
<svg class="gl-icon gl-input__icon">
<use xlink:href="#checkbox-checkmark"></use>
</svg>
</div>
</div>
</div>
<div class="no-gutters gl-vspace-bpall-small col-s-12">
<div class="field___Jw7ur gl-form-item gl-form-item--required gl-form-item--success">
<div class="gl-input">
<label for="emailAddress" class="gl-input__label gl-input__label--hoisted">Email<span class="gl-form-asterisk"></span></label>
<input type="email" placeholder=" " name="emailAddress" id="emailAddress" required="" class="gl-input__field gl-input__field--with-icon" maxlength="50" autocomplete="on" data-auto-id="shippingAddress-emailAddress" value="[email protected]">
<svg class="gl-icon gl-input__icon">
<use xlink:href="#checkbox-checkmark"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<div></div>
<div class="col-s-12 no-gutters billing-address-checkbox___2yx_n gl-vspace-bpall-large" data-auto-id="billing-address-confirmation">
<div class="gl-form__element gl-form__element--checkbox">
<div class="gl-form-item">
<div class="gl-checkbox gl-checkbox--checked">
<label class="gl-checkbox__label" data-auto-id="billing-address-checkbox-label">
<input type="checkbox" name="sameBillingAddress" class="gl-checkbox__input" data-auto-id="billing-address-checkbox" value="" checked="">
<svg class="gl-icon gl-checkbox__icon">
<use xlink:href="#checkbox-checkmark"></use>
</svg><span class="gl-checkbox__text">My billing and delivery information are the same.</span></label>
</div>
</div>
</div>
</div>
<div class="col-s-12 no-gutters gl-form__element gl-form__element--checkbox" data-auto-id="age-confirmation">
<div class="gl-form-item gl-form-item--required">
<div class="gl-checkbox gl-checkbox--checked consent-checkbox ">
<label class="gl-checkbox__label">
<input type="checkbox" class="gl-checkbox__input" required="" data-auto-id="consent-checkbox" value="" checked="">
<svg class="gl-icon gl-checkbox__icon">
<use xlink:href="#checkbox-checkmark"></use>
</svg><span class="gl-checkbox__text"><span>I'm 13+ years old. </span><span class="gl-form-asterisk"></span></span>
</label>
</div>
</div>
<div></div>
</div>
<div class="col-s-12 no-gutters gl-form__element gl-form__element--checkbox" data-auto-id="toc-confirmation">
<div class="gl-form-item gl-form-item--required">
<div class="gl-checkbox gl-checkbox--checked consent-checkbox___8-bHE">
<label class="gl-checkbox__label">
<input type="checkbox" class="gl-checkbox__input" required="" data-auto-id="explicit-consent-checkbox" value="" checked="">
<svg class="gl-icon gl-checkbox__icon">
<use xlink:href="#checkbox-checkmark"></use>
</svg><span class="gl-checkbox__text"><span><span>I accept the Yeezysupply.com </span><span><button class="gl-link" type="button">terms and conditions</button></span><span>, including the delivery terms, and </span><span><button class="gl-link" type="button">Privacy Policy</button></span><span></span></span><span class="gl-form-asterisk"></span></span>
</label>
</div>
</div>
</div>
<div class="col-m-12 col-s-12 gl-vspace-bpall-medium col-l-12 offset-l-6 row" style="justify-content: center;">
<button type="button" class="gl-cta gl-cta--primary" data-auto-id="review-and-pay-button" aria-label="Review and Pay"><span class="gl-cta__text">Review and Pay</span>
<svg class="gl-icon gl-cta__icon">
<use xlink:href="#arrow-right-long"></use>
</svg>
</button>
</div>
</main>
<aside class="col-s-12 col-l-9 col-xl-7 col-hg-6 offset-l-1 no-gutters">
<div class="gl-hidden-s-m gl-hidden-l">
<button type="button" class="gl-cta gl-cta--full-width gl-cta--paypal" aria-label="PayPal" data-auto-id="paypal-express-button" utagcategory="CHECKOUT"><span class="gl-cta__text gl-screen-reader-only"></span>
<svg class="gl-icon gl-cta__icon">
<use xlink:href="#arrow-right-long"></use>
</svg>
</button>
<form class="form___21EqM inlineItems___5-Bw1" method="post" novalidate="" action="" style="display: none;"></form>
</div>
<div class="gl-hidden-s-m gl-vspace-bpl-large">
<div class="panel___uhonh">
<div data-auto-id="glass-order-details-item-list-mobile" class="no-gutters">
<div class="order_details_item_group___-XG-B" data-auto-id="glass-order-details-delivery-group-mobile">
<div data-auto-id="glass-order-details-product-FV6125_590-mobile" class="gl-vspace-bpall-small">
<div class="line_item___1coA5" data-auto-id="glass-order-summary-line-item">
<div class="col-s-4 col-m-4 col-l-4 col-xl-4 no-gutters">
<div class="image_wrapper___2bE0T"><img src="https://assets.yeezysupply.com/images/w_280,h_280,f_auto,q_auto:sensitive/8453c34c94ae490cb790aad10125695b_ce49/FV6125_590_FV6125_04_standard.png.jpg?sh=364&amp;strip=false&amp;sw=364" alt="YEEZY POWERPHASE" data-auto-id="glass-order-summary-line-item-image"></div>
</div>
<div class="col-s-8 col-m-8 col-l-18 offset-l-2 col-xl-20 details___3xTcg no-right-gutter___5hL_K">
<div class="title___2Hm0l" data-auto-id="glass-order-summary-line-item-title">YEEZY POWERPHASE</div>
<div data-auto-id="glass-order-summary-line-item-attributes">
<div class="no-gutters col-s-8 col-l-16">
<div class="line-item__attribute___1qAS9 attribute-color-wrapper___1ZkDX"><span data-auto-id="">Quiet Grey</span></div><span class="size_quantity___tk2Ap"><div class="line-item__attribute___1qAS9"><span data-auto-id="">7</span></div>
</span>
</div>
<div class="no-gutters col-s-1 col-l-3">
<div class="line-item__attribute___1qAS9"><span data-auto-id="">1</span></div>
</div>
<div class="no-gutters col-s-3 col-l-5 line_item_price___3b-Qk">
<div class="gl-price" data-auto-id="glass-order-summary-line-item-price"><span class="gl-price__value">$120</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="gl-hidden-s-m gl-vspace-bpl-large">
<div class="panel___uhonh">
<div class="order-summary___rGKBg">
<div class="order-summary-section___2wNIe gl-body--s" data-auto-id="glass-cart-summary-product-total"><span class="order-summary-label___WhyV1" data-auto-id="glass-cart-summary-total-items">1 item</span><span data-auto-id="glass-cart-summary-product-value" class="notranslate">&nbsp;$120</span></div>
<div data-auto-id="glass-cart-delivery-discounts"></div>
<div class="order-summary-section___2wNIe gl-body--s" data-auto-id="glass-cart-summary-delivery-total"><span class="order-summary-label___WhyV1">Delivery</span><span data-auto-id="glass-cart-summary-delivery-value" class="notranslate">&nbsp;$6</span></div>
<div data-auto-id="glass-cart-order-discounts"></div>
<div class="order-summary-section___2wNIe gl-body--s" data-auto-id="glass-cart-summary-net-tax"><span data-auto-id="glass-cart-summary-net-tax-text">Sales Tax</span><span>-</span></div>
<div class="order-summary-total___j_6Pr" data-auto-id="glass-cart-summary-price-total"><strong class="order-summary-label___WhyV1 gl-body--s" data-auto-id="glass-cart-summary-price-text">Total</strong><span class="gl-body-l"><span class="notranslate"><strong data-auto-id="glass-cart-summary-price-value">&nbsp;$126</strong></span></span>
</div>
</div>
</div>
</div>
</aside>
</div>

In order;

  1. I click the button as follows;
$('[data-auto-id="review-and-pay-button"]').click()
  1. I put in values into the textfields;
var input = document.querySelectorAll('[data-auto-id="shippingAddress-firstName"]')[0];
var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
nativeInputValueSetter.call(input, 'Bob');
var ev2 = new Event('change', { bubbles: true});
input.dispatchEvent(ev2);
var input2 = document.querySelectorAll('[data-auto-id="shippingAddress-lastName"]')[0];
var nativeInputValueSetter2 = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
nativeInputValueSetter2.call(input2, 'Lee');
var ev3 = new Event('change', { bubbles: true});
input2.dispatchEvent(ev3);
var input3 = document.querySelectorAll('[data-auto-id="shippingAddress-address1"]')[0];
var nativeInputValueSetter3 = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
nativeInputValueSetter3.call(input3, '123 Fake Avenue');
var ev4 = new Event('change', { bubbles: true});
input3.dispatchEvent(ev4);
var input4 = document.querySelectorAll('[data-auto-id="shippingAddress-city"]')[0];
var nativeInputValueSetter4 = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
nativeInputValueSetter4.call(input4, 'New York City');
var ev5 = new Event('change', { bubbles: true});
input4.dispatchEvent(ev5);
let selectedValue2 = 'New York';
let select2 = document.querySelectorAll('.gl-native-dropdown__select-element')[0];
select2.value = selectedValue2;
var nativeInputValueSetter5 = Object.getOwnPropertyDescriptor(window.HTMLSelectElement.prototype, "value").set;
nativeInputValueSetter5.call(select2, selectedValue2);
var ev6 = new Event('change', { bubbles: true});
select2.dispatchEvent(ev6);
var input5 = document.querySelectorAll('[data-auto-id="shippingAddress-zipcode"]')[0];
var nativeInputValueSetter6 = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
nativeInputValueSetter6.call(input5, '10001');
var ev7 = new Event('change', { bubbles: true});
input5.dispatchEvent(ev7);
var input6 = document.querySelectorAll('[data-auto-id="shippingAddress-phoneNumber"]')[0];
var nativeInputValueSetter7 = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
nativeInputValueSetter7.call(input6, '647 123 1234');
var ev8 = new Event('change', { bubbles: true});
input6.dispatchEvent(ev8);
var input7 = document.querySelectorAll('[data-auto-id="shippingAddress-emailAddress"]')[0];
var nativeInputValueSetter8 = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
nativeInputValueSetter8.call(input7, '[email protected]');
var ev9 = new Event('change', { bubbles: true});
input7.dispatchEvent(ev9);
  1. I submit form;
$('[class="form___21EqM inlineItems___5-Bw1"]')[0].submit;
  1. I click button;
$('.gl-cta__text').click();

BUT SUBMITTING FORM (STEP 3) AND CLICKING BUTTON (STEP 4) just REFRESHES THE PAGE and DOES NOT PROCEED.

$(this.document).submit(function(e){
var form = $(e.target);
if(form.is('.form___21EqM inlineItems___5-Bw1')){ // check if this is the form that you want (delete this check to apply this to all forms)
e.preventDefault();
jQuery.ajax({
type: "POST",
url: form.attr("action"), 
data: form.serialize(), // serializes the form's elements.
success: function(data) {
console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
}
});
}
});

But I get an error “SyntaxError: The string did not match the expected pattern.”

Anything helps, any answer is appreciated.

Thanks.

How to&Answer:

hm, the problems could be anywhere…

try to check what you are sending by using something like or DevTools (expert skills)

beforeSend: function() { }, 

SyntaxError: The string did not match the expected pattern.

May also rise because of PHP error. If passed by you data creates the php error, the answer from server will be not expected.

the using of e.preventDefault(); will stop form submitting and page refresh.

Good luck.