...

View Full Version : Making JavaScript not Reload the Page after a Form submit



Lanternkami
03-13-2009, 06:41 PM
Im working on my final project for my DOM and DHTML class and we have to make a calculator site. I have it working (for the most part) thanks to the help of several members here ^^. I was wondering If there was a way to make it so whenever the form finishes executing that the page wont reload, right now I have an alert pop up and say the result but I would like to have it put the result back into the form so the user can use it for other calculations. I didn't know if there was an easy way to do this, or what I would have to use, were allowed to use Prototype and Ajax, but I dont know how to use Ajax all that well... Any help would be awesome, thx,

Philip M
03-13-2009, 06:48 PM
The page will always reload after a submit, but you could pass the value to the new page with a cookie.

Eldarrion
03-13-2009, 06:53 PM
Or you could do the following:



<script type="text/javascript">
function calc (e) {
alert ("yay!");
e.preventDefault();
}
</script>


And the HTML mark-up:



<form>
<input type="text" name="blah" />
<input type="submit" value="Go! Or not?" onclick="calc(event)" />
</form>


Which in turn will prevent the button submit from taking the default action... that being submitting to the location, specified in form action. Not sure how this will work cross-browser, I know for sure it does work in FF(And probably all other reasonable browsers, but haven't tested it in IE... it might require a bit of extra coding there)

Henley
03-13-2009, 06:55 PM
Lantern:

Can all the calculations be made locally, without obtaining data from the server?

If so, why not have a "Calculate" button:


<input type="button" value="Calculate" onclick="calc(this.form)">

and a "Submit" button:


<input type="submit" value="Submit">

The Calculate button will not submit the form.

Lanternkami
03-13-2009, 06:58 PM
Lantern:

Can all the calculations be made locally, without obtaining data from the server?

If so, why not have a "Calculate" button:


<input type="button" value="Calculate" onclick="calc(this.form)">

and a "Submit" button:


<input type="submit" value="Submit">

The Calculate button will not submit the form.


That may acctually work lol, esspecially since im not acctually submitting anything to begin with, its not sending any data to the server or anything. Thx for the input guys!

Lanternkami
03-13-2009, 07:04 PM
It did work, like a charm, but its now running the function whenever I change something in the form, before i was using document.observe to watch for a submit, what would i need to use now? I have it set for click but that seems to be wrong, Ill keep trying stuff hopefully ill get it. heres the code i had:


document.observe("dom:loaded", function()
{
$('allloan').observe("click", loancalcs.bind());
});

Henley
03-13-2009, 07:14 PM
That's not stand-alone JavaScript. That's some sort of "framework."

Why you would need the overhead of a framework to perform calculations based upon user input, eludes me.

I have no idea why you need to "watch" for a "submit," when only an <input type="submit"> will submit the form.

Can't help you...

Lanternkami
03-13-2009, 07:16 PM
Its the way my teacher wants it done lol, the way the calculators are set up is so that we have more then one form on each page, so he wants us to set it to watch each form for a submit and then run the function. I wish it wasnt a requirement because its just making it more frustrating.

Henley
03-13-2009, 07:30 PM
I still don't understand why there can't be a "Calculate" and "Submit" button for each form.

Sorry, I just can't help you. It seems to me that the framework needlessly complicates an otherwise straightforward process.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum