CODEWITHSUNDEEP
javascripthtmlajax
EldarGranulo
EldarGranulo

Reputation: 1615

AJAX and submit button on form interaction

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:

http://pokit.org/get/?1ff94a636771d2713849d74364cd4d1a.jpg

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));
}

Upvotes: 0

Views: 158

Answers (4)

Ashish Mehta
Ashish Mehta

Reputation: 7424

Simple Change put input type="button" instead of tpye="submit" 

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

Upvotes: 1

Marcin Wesel
Marcin Wesel

Reputation: 104

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;

Upvotes: 1

webcodecs
webcodecs

Reputation: 217

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.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388446

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">

Upvotes: 1

Related Questions