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";
}
need to handle the form submission on the submit event, and return false preventing page refresh
$('#form').submit(function () {
sendContactForm();
return false;
});
Related
I have this script performed on submit:
function analyze() {
var answer = document.forms["questions"]["answer1"].value;
var item = document.getElementById("content");
item.innerHTML=answer;
}
Script is performed, but div doesn't keep the value, it changes back.
When you do a submit, your page is going to re-render, causing all of your elements to get back to their initial state. So changing the your div or whatever you have in the HTML with class content is going to reset to being back to being blank.
You probably want to save the answer in Browsers LocalStorage or some sort of data structure and then request it out of there.
Save your answer value to localStorage or sessionstorage and then show the same value in your div. If you are submitting form then it will re-load the page and clear the innerHTML of div.
A submit button causes the page to rerender. You have a number of options to prevent that:
Don't use a submit button, use a normal button that happens to SAY submit. You would then run the function "onClick" for the button, not "onSubmit" for the form. (this is what I recommend)
Return false from that function and/or call PreventDefault.
Actually submit it to the server and have the server do the work and return the page (probably not a good choice for performance reasons).
EDIT: you could do something with local or session storage, but that seem a bit rube-goldburg for the problem you have.
I have a page with 22 different forms that use ajax to send json to my server-side code. I have one form that needs to be submitted via a normal post, i'm attempting to break out of the function and let it process normally. It appears to work fine, the form is submitted it behaves as normal, afterwords if you submit another form the page refreshes, this can be duplicated every time.
$("form").submit(function(e) {
if( $('input[name="ticketpost"]').val() === "true" ) {
return;
}
e.preventDefault();
...
ajax/json stuff
My other function to trigger the submit of the special form is as follows:
$(".TicketPost").click(function() {
$("#ticketpost").submit();
});
I thank you ahead of time for your help.
Try adding e.preventDefault also in TicketPost click function
$(".TicketPost").click(function(e) {
e.preventDefault();
$("#ticketpost").submit();
});
Is it possibe to change the return URL of a button whose job is submitting a form to the server? The main deal here is that I don't have the script that controls the button, hence the word "stealing."
If you are curious about the use case, I have a Salesforce Visualforce page that has an embedded Flow in it. I want to jump out of the Flow when the user is half way through and a certain condition is met.
Assuming the button is not in an iFrame...
$('#some_button').click(function (e) {
e.preventDefault();
// Do stuff here then submit the form..
$('#some_form').submit();
});
You could also use this method for $('#some_form').submit().... You can read more about it here.
I am trying to post a form using ajax.
Right now, the code I have is
$("#sub").click(function() {
var tag = $("#tagbar").val();
var opinion = $("#op").val();
alert($("#expressform").serialize());
$.post("dbfunctions.php", $("#expressform").serialize());
});
This works, but it takes a long time to post and add to the database (thats what dbfunctions does) compared to how long it took before, when I was using a form action and refreshing the page. Why is this?
Also, if I remove the alert, the script stops working completely. I can't figure out anyway in which this makes sense.
Thanks
Make sure you cancel the default action of the button by returning false from the click handler:
$("#sub").click(function() {
$.post("dbfunctions.php", $("#expressform").serialize());
return false;
});
Also instead of subscribing for submit button clicks, it's better to subscribe to the submit event of the corresponding form directly:
$("#expressform").submit(function() {
$.post(this.action, $(this).serialize());
return false;
});
This way you are no longer hardcoding any urls in your javascript files. You are simply unobtrusively AJAXifying your form.
You can use below function for submit the data
through Ajax form Submit
$('#form1').ajaxForm({
success:function(response){
$('#save_data').html(response);
});
$('#btnSubmit').click(function() {
$('#form1').submit();
});
I want to have a feature to submit several forms on a page when the user leaves the page. There is this "do you wanna save?" question and my code so far is like this:
function checkForChanges( ) {
if (window.formform1Changed == true) {
if (window.asked == false) {
window.asked=true;
doSave = confirm("Wanna save? Click OK")
}
if (window.doSaveForms || doSave) {
window.doSaveForms = true;
document.forms.form1.submit();
}
}
if (window.formform2Changed == true) {
if (window.asked == false) {
window.asked=true;
doSave = confirm("Wanna save? Click OK.")
}
if (window.doSaveForms || doSave) {
window.doSaveForms = true;
document.forms.form2.submit();
}
}
}
It may seem a little bit of overkill but it is generated automatically by our template engine and may be extended to more forms.
The body tag:
<body
onLoad="init();
window.formform1Changed=false;
window.asked=false;
window.doSaveForms=false;
window.formform2Changed=false;"
onbeforeunload="checkForChanges();">
And interesting part of one of the forms (the other one looks identically:
<input value="xyz" id="la" onchange="window.formform1Changed=true;" />
<input name="save" onclick="window.formform2Changed=false; window.formform1Changed=false;" type="submit" value="save" />
Now to the problem:
If I change values in both forms and navigate away from the page, the question from the first form pops up. I click OK, the form is saved but the form1.submit() triggers a new onBeforeUnload event which breaks the whole logic of my idea.
The question now would be if there is a way to submit all forms on a page when only asking one time when the user navigates away?
Any help is highly appreciated!
Thanks.
Form submissions requires post-back, once you submit the first form, your page is redirected to the "action" of that form and you will lose the information in the rest of the forms you have.
Having multiple forms on the page is not the best idea, however, if you absolutely have to have them, the way to save all of them would be to replace full post-back with an AJAX call to a web-service (or a stand-alone page, that accepts query string parameters, though it's not as secure or flexible way). That way you can submit each form over the AJAX call without page redirecting.
As SLaks said, you will not be able to submit multiple forms in the way you are trying. You do have some other options though. Instead of traditional form submits you could make some kind of ajax calls to save the form data you care about. Here is an example using jquery and php (link)