Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making JavaScript not Reload the Page after a Form submit

    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,

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,990
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    The page will always reload after a submit, but you could pass the value to the new page with a cookie.

  • #3
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Or you could do the following:

    Code:
    <script type="text/javascript">
    function calc (e) {
        alert ("yay!");
        e.preventDefault();
    }
    </script>
    And the HTML mark-up:

    Code:
    <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)
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #4
    Banned
    Join Date
    Feb 2009
    Posts
    36
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Lantern:

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

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

    Code:
    <input type="button" value="Calculate" onclick="calc(this.form)">
    and a "Submit" button:

    Code:
    <input type="submit" value="Submit">
    The Calculate button will not submit the form.

  • #5
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Henley View Post
    Lantern:

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

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

    Code:
    <input type="button" value="Calculate" onclick="calc(this.form)">
    and a "Submit" button:

    Code:
    <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!

  • #6
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    document.observe("dom:loaded", function()
    {
    	$('allloan').observe("click", loancalcs.bind());
    });

  • #7
    Banned
    Join Date
    Feb 2009
    Posts
    36
    Thanks
    0
    Thanked 7 Times in 7 Posts
    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...

  • #8
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Banned
    Join Date
    Feb 2009
    Posts
    36
    Thanks
    0
    Thanked 7 Times in 7 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •