0

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

}
Shaun314
  • 3,191
  • 4
  • 22
  • 27
  • [JQuery post()](http://api.jquery.com/jQuery.post/) will allow you to sent data via AJAX. Perhaps [read this instead](http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) – musefan Jul 01 '13 at 13:49
  • So assuming this is the line I need to use in my code: "$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})" -what is my url, I don't have php.. And do I need to change the "#theForm" to one of my vars? – Shaun314 Jul 01 '13 at 14:02
  • `#theForm` is a JQuery selector, I would suggest getting a basic understanding of JQuery first. The URL is the URL for the page you are submiting (i.e. your `action`) – musefan Jul 01 '13 at 14:07
  • Oh, so theForm is like my form id? And the URL, is that like ..webPage.html?action=doThis&tag=myTag kind of thing? – Shaun314 Jul 01 '13 at 14:18
  • If you want to summarize that in an answer, ill give you 25 rep haha – Shaun314 Jul 01 '13 at 14:20
  • Ok, so when I go to try and implement this, I have no clue where to put that code.. Would it be possible for you to just copy my code above, add your answer in, and call it good? Like I said earlier, I will give you the 25 rep if you do.. – Shaun314 Jul 01 '13 at 15:03
  • You need to include the JQuery library first, then depending on which method you go for you may need to include a JQuery plugin (but I wouldn't go for something that requires a plugin for this). [The answers on this question](http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) are much more detailed, you should be able to use on of them. [This one looks the best](http://stackoverflow.com/a/6960586/838807) – musefan Jul 01 '13 at 15:06

1 Answers1

-1

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

$('#form').submit(function () {
 sendContactForm();
 return false;
});
Harshad N Purohit
  • 37
  • 5
  • 1
    And where is the jQuery tag? – epascarello Jul 01 '13 at 13:56
  • Would this replace my "myform.submit()" line? And what goes in the #form, do I leave that as it is, or do I need to put something else there? And what is the sendContactForm(); - where did that come from? – Shaun314 Jul 01 '13 at 14:00
  • 1
    This answer does not solve the issue, the OP is forcing the form to submit in order to send the data. The question is, how to send the data without a refresh (and the answer is to use AJAX) – musefan Jul 01 '13 at 14:09