Submit form while staying on same page

Question

I have the following setup: https://jsfiddle.net/uosLke60/

input.Add_To_Cart_Button {
  background-color: #000;
  color: #fff;
  border: none;
  font: inherit;
  cursor: pointer;
  font-size: 13px;
  margin-bottom: 40px;
  width: 120px;
  -webkit-appearance: none;
  border-radius: 0;
}

<div class="Product_Card_Button">
  <form method="post" action="/cart/add">
    <quantity-input class="quantity" style="width: 120px; min-height: 25.4px; display: inline-flex;">
      <button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
      <input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
      <button class="quantity__button no-js-hidden" name="plus" type="button">+</button>
    </quantity-input>
    <br>
    <input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
  </form>
</div>

When the add to cart button is pressed, the page refreshes. How can I adjust it so that the product is added to cart without the page refresh? Any suggestions would be helpful. Thanks.

I wanted it to stay within html using a simple form submission. But if javascript is the only way then so be it. I'll edit the question to reflect this — fiddle, May 23 '22 at 22:19
@Barmar would you be able to suggest how I can achieve this with Javascript? Thank you — fiddle, May 23 '22 at 22:29
Does this answer your question? [jQuery AJAX submit form](https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) — Jake Holzinger, May 23 '22 at 22:47
@JakeHolzinger It doesn't unfortunately. Tried multiple suggestions on that post but my page keeps refreshing. — fiddle, Jun 03 '22 at 16:18

score 0 · Answer 1 · answered May 23 '22 at 22:17

0

You should use Ajax to achieve that, so it is possible to update parts of a web page, without reloading the whole page..

answered May 23 '22 at 22:17

Boris

1
1

Submit form while staying on same page

1 Answers1