Send Request to server on button press without refreshing page

Question

I have a web page with a push button on it. The button makes a call to a js function I wrote that will populate a form and then submit that form. Upon form submission, I would like set the value of the button to "enabled" instead of "disabled". My server (created in Python/Linux Env.) is able to interpret the get requests and take care of what it needs to just fine.

The problem is that every time I submit a form, the page refreshes itself, which effectively means I can't toggle values back and forth (at least not the way I am doing it now)

Ultimately what I need is a way for a user to press a button to toggle a value and have the server be able to react to that button press. If I don't need a form to do this, awesome! I just used the form because it seemed like the best approach at the time.

Here is my code:

function createForm(tagStr,piStr)
{

myform=document.createElement('form');
myform.method='get';
myform.action='http://172.26.177.17/standardTable.html';

input2=document.createElement('input');
input2.type='hidden';
input2.name='tagID';
input2.value=tagStr;

input3=document.createElement('input');
input3.type='hidden';
input3.name='piID';
input3.value=piStr;

elem= document.getElementById("mapButton");

input4=document.createElement('input');
input4.type='hidden';
input4.name='Action';
input4.value=elem.value;

myform.appendChild(input2);
myform.appendChild(input3);
myform.appendChild(input4);
document.body.appendChild(myform);
myform.submit();

if (elem.value == "Disabled") elem.value = "Enabled";
else elem.value = "Disabled";       

}

Answer 1

need to handle the form submission on the submit event, and return false preventing page refresh

$('#form').submit(function () {
 sendContactForm();
 return false;
});