We Keep Coding

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

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

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.

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;

Simple Change put input type="button" instead of tpye="submit"
<input type="button" value="Pošalji" class="popupButtons" onclick="addProduct()">

Submit image via AjaxForm and perform callback

I have the following function
(inside onchange; console.log works well)
$("#prof_picture").ajaxForm(
{
target: '#preview',
success: function(response){
console.log("called");
}
});
The success function is not called and therefore no feedback is received. Feedback is echoed in the following way "{message:"success",action:"something",data:Array}". Can someone help me please? Thank you very much
Here is the form
<form id="profile_picture_upload" enctype="multipart/form-data" action="profile/uploadProfilePicture.php" method="post" name="prof_picture">
<input id="profpic1" style="display:none;" name="profile_picture" type="file">
<a id="change_profile_picture" class="profile_option" onclick="$('#profpic1').click();">Upload</a>
</form>

As Quentin mentioned, the form isn't submitting.
Bind the ajax to the correct form ID instead of the name of the form
$("#profile_picture_upload").ajaxForm(
{
target: '#preview',
success: function(response){
console.log("called");
}
});
And use this html to submit the form
<form id="profile_picture_upload" enctype="multipart/form-data" action="profile/uploadProfilePicture.php" method="post" name="prof_picture">
<input id="profpic1" style="display:none;" name="profile_picture" type="file" onchange="$('#profile_picture_upload').submit();">
<a id="change_profile_picture" class="profile_option" onclick="$('#profpic1').click();">Upload</a>
</form>
though it'll click through to the next page if you do this, so you probably want to add the return false to prevent it from leaving this page.

Change URL before form submit

HTML
<form id="form" method="post" action="/create_test1/54ae2be44a1bfef3138b4569">
.
.
.
<input type="button" id="export" value="Export">
</form>
jQuery
$("#export").click(function(){
url = $("#form").attr("action");
url = url.replace("create_test1","export_test1"); // This is OK
$('#form').attr('action', url).submit(); //Here form is not submited
});
Actual URL : /create_test1/54ae2be44a1bfef3138b4569
I want URL : /export_test1/54ae2be44a1bfef3138b4569
My Question is How to submit form after changing action?

$("#export").click(function()
{
$('#form').attr('action', '/export_test1/54ae2be44a1bfef3138b4569');
});

How can I apply changes to the web after the POST method?

Any changes that I want does not take effect because the page refreshes itself whenever I click a button.
With the POST method on it. This the scenario, I clicked the button, then changes take effect like editing the inner html of a division, after that, the page refreshes itself that is why all the changes disappears. Please help me if there are any ways that changes can be made after the page refreshes.
This is my code. Can you tell me how to use ajax on it?
<form name="myForm" method="POST">
<button style="border-radius:0px;" type="submit" name="tabExe" id="tabExe" href="#Exec" onClick="myFunction('Executive');" class="btn btn-primary">Executive Room>
</button>
</form>
<script>
function myFunction(str){
if(document.getElementById(str) == tabExe){
document.getElementById('room1').innerHTML = "Room 101";
}
}
</script>

Consider this code of Javascript ajax as you need:
function submit()
{
var xhReq = new XMLHttpRequest();
xhReq.open("POST", "yourpage.phtml?param1=2&param2=10", false);
xhReq.send(null);
var serverResponse = xhReq.responseText;
alert(serverResponse);
return false;
}
HTML onsubmit method:
<form name="myForm" method="POST" onsubmit="return submit()">

When u clicked on submit button . form submitted. But when u use button as type, It will not refresh.
remove type ="submit". use type type ="button"
add return false; in onclick function. So it change bydefault property.
<form name="myForm" method="POST">
<button style="border-radius:0px;" name="tabExe" id="tabExe" href="#Exec"
onClick="myFunction('Executive'); return false;" class="btn btn-primary">
Executive Room>
</button>
</form>
<script>
function myFunction(str){
alert();
if(document.getElementById(str) == tabExe){
document.getElementById('room1').innerHTML = "Room 101";
}
}
</script>

Struts2 dojo submit button render issue

I have struts2 with dojo submit button(ajax call) in dialog window.I want to retain the popup window after submit the button.but its not retain the same form.
<div id="dialog-form">
<form action="finder" method="post" id="form1">
<textarea id="products" name="productNo"><s:property value='productNo'/>
</textarea>
<sx:submit targets="dialog-form"></sx:submit>
parent page form:
<div id="form_parent">
<form action="search" method="post">
-------------------------
--------------------------
</form>
</div>
searchaction.java
public String finder()
{
---------------------
return "search" //which is going to return parent page.
}
when i'm submitting the page , its closing the popup window and opening parent page. How to retain the popup window ?

I don't know struts2, but following the documentation at http://struts.apache.org/release/2.3.x/docs/dojo-submit.html, I would try something like :
<form id="form1" action="search">
---------
---------
<sx:submit beforeNotifyTopics="/before" />
</form>
<script type="text/javascript">
dojo.event.topic.subscribe("/before", function(event, widget){
dojo.stopEvent(event);
dojo.xhrPost({
form : dojo.byId("form1")
});
});
</script>