• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4501
  • Last Modified:

AJAX Form submit without refresh.

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?


0
Richard Quadling
Asked:
Richard Quadling
  • 4
  • 3
1 Solution
 
Michel PlungjanIT ExpertCommented:
0
 
Michel PlungjanIT ExpertCommented:
so in your case

<html>
<head>
<script src="prototype.js"></script>
<script>
function mySubmit() {
  $('message').innerHTML='Loading...';
  $('person-example').request({
    onComplete: function(){ $('message').innerHTML='Form data saved!'; $('person-example').reset(); $('person-example').elements[0].focus();  }
  })
}
</script>
</head>
<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">
    <option>coding</option>
    <option>swimming</option>
    <option>hiking</option>
    <option>drawing</option>
  </select>
 </div>
  <div class="buttonrow"><input type="submit" value="GO!" /><span id="message"></span></div>
  </fieldset>
</form>
</body>
</html>
0
 
Richard QuadlingSenior Software DeverloperAuthor Commented:
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?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Michel PlungjanIT ExpertCommented:
Please reload. I added it a minute later
0
 
Richard QuadlingSenior Software DeverloperAuthor Commented:
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 ...
0
 
Michel PlungjanIT ExpertCommented:
0
 
Richard QuadlingSenior Software DeverloperAuthor Commented:
All done. Thanks.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now