How to prevent refresh/reload after submitting the form

[gigikim]

Hi, 

I have the form in my popup for newsletter. It was working fine before, but somehow now it's reloading/refreshing the whole page after the submitting the form. Is it possible to prevent the refresh after submitting the form?

I'm using the customer form and snippets below. Our store: https://just-glow.com

Thank you. 

{%- assign form_id = 'newsletter-' | append: block.id -%}
                  {%- form 'customer', id: form_id, class: 'email-form' -%}
                    {%- unless form.posted_successfully? -%}
                  <-- some texts before submit --> 
                    <fieldset>
                      <input type="hidden" name="contact[tags]" value="newsletter">
                      <div class="form-row" style="position:relative">
                        <input
                          type="email"
                          class="newsletter__input"
                          value="{% if customer %}{{ customer.email }}{% endif %}"
                          placeholder="{{ 'general.newsletter.email_label' | t }}"
                          name="contact[email]"
                          id="Email-{{ form_id }}"
                          aria-label="{{ 'general.newsletter.email_label' | t }}"
                          autocorrect="off"
                          autocapitalize="off"
                          required
                          style="border-radius: var(--border-radius-buttons);"
                        >
                        <button
                          type="submit"
                          id="Subscribe-{{ form_id }}"
                          aria-label="{{ 'general.newsletter.submit_label' | t }}"
                        >
                          <span class="visually-hidden"> 
{{'general.newsletter.submit_label' | t }}</span>
                          <span aria-hidden="true" role="img">
                            Submit
                          </span>
                        </button>
                      </div>
                    </fieldset>
                  {% endunless %}
                  {%- if form.posted_successfully? -%}
                  <-- some texts for result --> 
                  {% endif %}
                  {%- endform -%}

[KetanKumar]

@gigikim 

Sorry you are facing this issue,
but its Shopify by default functionality some customer security purpose this make more secure every Shopify functionality 

[gigikim]

Hi thanks for the answer. 
So there is no way I can prevent it?.. 

[KetanKumar]

@gigikim 

you have try this code may be work its just example your will try on your form id

<!-- Your Form in Shopify -->
<form id="myForm">
  <input type="text" name="name" required placeholder="Name">
  <input type="email" name="email" required placeholder="Email">
  <button type="submit">Submit</button>
</form>

<!-- JavaScript -->
<script>
  document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault(); // Prevent form refresh

    // Collect form data
    var formData = new FormData(this);

    // Send the form data using AJAX
    fetch('/cart/add', {
      method: 'POST',
      body: formData,
    })
    .then(response => response.json())
    .then(data => {
      console.log('Form submitted successfully:', data);
      // You can update the DOM or show a success message here without reloading the page
    })
    .catch(error => {
      console.error('Error submitting form:', error);
    });
  });
</script>

[gigikim]

I've tried this chatgpt code already haha. Thanks for your help tho.