Magento2 Jquery Post Form via Ajax

Question

I have a basic html form and what I want is when clicking the submit button to use Jquery and Ajax to post the contents to an external url instead of reloading the entire page. However whats happening is clicking submit makes the entire page reload and nothing gets posted to the external url

<form id="newsletter-validate-detail" class="form subscribe" action="" method="post">
<input type="hidden" name="api_key" id="api_key" value="12345" readonly>
<input type="hidden" id="hp" name="hp" value="">
<input type="hidden" name="list" id="list" value="56789" readonly>
<input type="hidden" name="boolean" value="false" readonly>
<input type="hidden" name="country" id="country" value="US" readonly>
<input type="hidden" name="gdpr" value="true" readonly>
<div class="newsletter-inner d-flex">
 <input type="email" id="email" name="email" class="form-control"/>
 <button type="submit" title="Subscribe" class="btn btn-primary action subscribe">Subscribe</button>
 </div>
 <div for="newsletter" generated="true" class="mage-error error p-2" id="newsletter-error"></div>
 </form> 

My JS code

 <script>
 require(['jquery','jquery-ui'],function($){
 'use strict';
 console.log("test");
 $("#newsletter-validate-detail").submit(function(e){
 e.preventDefault();
 var formData = {
 email $("#email").val(),
 api_key: $("#api_key").val(),
 list: $("#list").val(),
 hp: $("#hp").val(),
 country: $("#country").val(),
 gdpr: $("#gdpr").val(),
 };
 $.ajax({
 type: "POST",
 url: "https://sendyco.cross.com/subscribe",
 data: formData,
 dataType: "json",
 success: function(response){
 console.log(response.output);
 $("#newsletter-validate-detail").hide();
 $(".newsletteremailadded").show("slow");
 }
 });
 return false;
 });
});
</script>

• Victor Tihonchuk: Just few small ideological suggests to your code. 1. when you use require for handle load some object like jQuery make sense to set internal name for it instead of use global one name. Example: require(['jquery'],function($){$('...')}. 2. Don't forget to handle default event behavior and pass event object to related functions.

Answer 1

can you check below two links for send post form data using AJAX without reload page.

https://magento.stackexchange.com/a/158545/85907

Magento 2: Insert Form data Using AJAX Request

If any query let me know.

Thanks.

• Jayreis: Thanks . I got the code to work . However now after the Ajax is executed I am not able to hide and show specific divs $.ajax({ type: "POST", url: "sendyco.cross.com/subscribe", data: formData, dataType: "json", success: function(response){ console.log(response.output); $(".footer-newslettertitle").hide(); $("#newsletter-validate-detail").hide(); $(".newsletteremailadded").show("slow"); }

Answer 2

Please update your code like this.

jQuery("#newsletter-validate-detail").submit(function(e){
 e.preventDefault();
 var formData = {
 email $("#email").val(),
 api_key: $("#api_key").val(),
 list: $("#list").val(),
 hp: $("#hp").val(),
 country: $("#country").val(),
 gdpr: $("#gdpr").val(),
 };
 jQuery.ajax({
 type: "POST",
 url: "https://sendyco.cross.com/subscribe",
 data: formData,
 dataType: "json",
 success: function(response){
 console.log(response.output);
 }
 });
 return false;
 });
 });

• Jayreis: I changed by code to match what you have. However the page still just reloads after clicking the submit button. However I am sure Jquery is loaded and working on the page as i have other calls to Jquery on the website which work just fine