AJAX和表单交互上的提交按钮

Question

I'm creating a simple website and a html page on it which contains a table that shows products. I load this table using AJAX and it work properly. Here is a screenshot:

Under the table I have buttons which perform CRUD operations using AJAX. They communicate to a php script on a server outside of my domain using GET method. When I click on Add product it opens a form with a button that whose onclick event calls a function which adds a product using AJAX. But, when I click, the whole page reloads and the product is not added. If I put the value that says wheter the call is async to false, it works as intended and the product is added to the table, however that is not the point of AJAX.

This is my code for adding a product(delete and update are almost the same).

<div id="addProductPopup">
    <div id="popupContact">
        <form id="form" method="post" name="form">
            <img id="close" src="/servis/Resursi/Slike/close.png" onclick ="hide('addProductPopup');">
            <h2>Dodavanje proizvoda</h2>
            <hr>
            <input id="name" name="naziv" placeholder="Naziv proizvoda" type="text" required>
            <input id="kolicina" name="kolicina" placeholder="Količina proizvoda" type="text" required>
            <input id="url" name="url" placeholder="URL slike" type="text" required>
            <input type="submit" value="Pošalji" class="popupButtons" onclick="addProduct()">
        </form>
    </div>

When I click on submit this function is called:

function addProduct(){

    var isValid = true;
    var url = "http://zamger.etf.unsa.ba/wt/proizvodi.php?brindexa=16390";

    var amount = document.form.kolicina.value;
    var naziv = document.form.naziv.value;
    var slikaurl = document.form.url.value;

    var validity = validateFields(naziv, slikaurl, amount);
    if(!validity) return false;
    var product = {
        naziv: naziv,
        kolicina: amount,
        slika: slikaurl
    };
    var requestObject = new XMLHttpRequest();
    requestObject.onreadystatechange = function(event) {
        if (requestObject.readyState == 4 && requestObject.status == 200)
        {
            loadProducts();
            event.preventDefault();
        }
    }
    requestObject.open("POST", url, true);
    requestObject.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    requestObject.send("akcija=dodavanje" + "&brindexa=16390&proizvod=" + JSON.stringify(product));
}

Answer 1

It is because you are not preventing the default action of the submit button click.

You can return false from an event handler to prevent the default action of an event so

<input type="submit" value="Pošalji" class="popupButtons" onclick="addProduct(); return false;">

---

But since you have a form with a submit button, I think it will be better to use the submit event handler like

<form id="form" method="post" name="form" onsubmit="addProduct(); return false;">
    ....
    <input type="submit" value="Pošalji" class="popupButtons">

Answer 2

Your problem is that your submit button still executes a real submit. You could change your addProducts method. The method have to return false to prevent the real submit.

Answer 3

Submit button performs default Submit action for HTML code.

Try to change Submit tag into Button tag. Or after AddProduct() in OnClick JS Action put

return false;

Answer 4

简单更改将输入type =“ button”代替tpye =“ submit”

<input type="button" value="Pošalji" class="popupButtons" onclick="addProduct()">