0

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>
1
  • 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. Aug 13, 2022 at 7:17

2 Answers 2

0

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.

1
  • 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"); }
    – Jayreis
    Aug 19, 2022 at 0:26
0

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;
      });
    });
1
  • 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
    – Jayreis
    Aug 14, 2022 at 0:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.