AJAX Form submit without refresh.

Posted on 2007-07-23
Last Modified: 2008-01-09
I have a small form which a user will sit in front of for an hour or so, entering some data from faxes. The form contains several selections which take a while to determine.

I want to be able to submit the form via AJAX and not have a refresh which will then need to go and get all the select data again. Yeah, I could cache it, but I'd rather have the form on the screen, the user enters the data and presses "submit" and they're told "OK" or "something went wrong" sort of thing. If it is OK, then the form is cleared and ready for the next lot of data and the fax is put into 1 pile. If something went wrong it goes into another pile.

The code is intranet only.

I'm using prototype.js V1.5.1.1

How do I submit a form via AJAX, and NOT have the form refresh?

Question by:RQuadling
    LVL 75

    Expert Comment

    by:Michel Plungjan
    LVL 75

    Accepted Solution

    so in your case

    <script src="prototype.js"></script>
    function mySubmit() {
        onComplete: function(){ $('message').innerHTML='Form data saved!'; $('person-example').reset(); $('person-example').elements[0].focus();  }
    <body onLoad="$('person-example').elements[0].focus()">
    <form id="person-example" method="POST" action="/user/info" onSubmit="mySubmit(); return false">
      <fieldset><legend>User info</legend>
      <div><label for="username">Username:</label>
        <input type="text" name="username" id="username" value="" /></div>
      <div><label for="age">Age:</label>
        <input type="text" name="age" id="age" value="" size="3" /></div>

      <div><label for="hobbies">Your hobbies are:</label>
      <select name="hobbies[]" id="hobbies" multiple="multiple">
      <div class="buttonrow"><input type="submit" value="GO!" /><span id="message"></span></div>
    LVL 40

    Author Comment

    Ha. I've got a printed manual and it is only V1.5.0, so that's why I missed it.

    Ha ha!

    The mySubmit function is called how?
    LVL 75

    Expert Comment

    by:Michel Plungjan
    Please reload. I added it a minute later
    LVL 40

    Author Comment

    Ha. OK. I think this is why mine is broken. I'm using ...

    Event.observe('fleetForm', 'submit', mySubmit);

    And this adds mySubmit to the onSubmit to do list,rather than replaces it. So even returning false in mySubmit is not having the effect I wanted.

    Trying onSubmit="..." now ...
    LVL 75

    Expert Comment

    by:Michel Plungjan
    LVL 40

    Author Comment

    All done. Thanks.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 for Beginning Beginners

    Are you looking for an efficient introduction to HTML5? Have you tried other HTML5 courses and found them too complex? Do you need just the basics of HTML5 to use with Wordpress or other content management system? If you said yes to any of these questions, this course is for you.

    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now