html javascript pop up form submit

[baseballfury]

Hi all,

My problem is i've got this form that submits fine but when i try to redirect it i keep getting an error.
I want to redirect to another page so the user can't refresh the page and submit the form multiple of times.
I've been using 'header' to redirect but keep getting issues with it.

I've thought about a pop-up form so it doesn't interfere with the main page and can be closed once submitted but not sure if that's the best solution or even possible.

Just wondering if anyone knows of any good example scripts or can just help me out in any way.

Much appreciated,

Tom.

[Airshow]

bbFury,

It's much simpler intercept form submission with an onsubmit handler that tests to see if submission has already been attempted and returns true (allow submission) or false (suppress further submissions) accordingly.

You will need a "submitted" boolean flag, initialisd to false. With a little ingenuity, you can avoid using the global namespace.

onload = function() {
  var submitted = false;//initialise flag to false;
  document.myForm.onsubmit = function() {
    if(!submitted) { return (submitted = true); }//allow first form submission
    else { return false; }//suppress further form submissions
  }
};

Then your test function will be something like:
and the corresponding form tag:

<form name="myForm" method="..." action="...">

untested - may need debugging

Airshow

[Airshow]

At its simplest, the script boils down to:

onload = function() {
  var submitted = false;
  document.myForm.onsubmit = function() { return (!submitted) ? submitted = true : false; };
};

Airshow

[baseballfury]

Thanks for bailing me out again airshow.
Would this code go on the same page as the form or on the page i'm posting to.

cheers,

Tom.

[Airshow]

Hi Tom,

The code goes on the same page as your form. Stick it in tags within the document's

If the document already has an onload function, then simply paste my two lines of code into it.Airshow

[baseballfury]

Hey Airshow,

sorry to bother you but the form i've currently got posts to sendmail.php then that file sends the actual email details to the emal address. The problem i've got is that sendmail doesnt automatically redirect which gives the user the opportunity to refresh and resubmit the form.
I was trying to use session variables and all sorts to check if the form had been submitted and forward or display an error message depending upon the result.
Does your method submit the details in just one page because it's not working for my situation.
my onload looks like the following:

the other 2 functions load in database queries...

regards,

Tom.

[Airshow]

bbFury,

My method doesn't cater for the user refreshing the page. You would need to use either a cookie (client-side) or session variable (server-side) for that.

In either case, if there is any chance that another legal form submission in the same session, you need to decide on (and implement) "expiry rules". This aspect could be probelmatic, though maybe someone else has first hand experience and will ba able to advise.

I suggest that a javascript trap (as per my suggestion above) is used as the first line of defence. My code can be modified to provide an alert if a subsequent submission is attempted:

onload = function() {
  var submitted = false;
  document.myForm.onsubmit = function() {
    if(!submitted){ return submitted = true; }
    else{
      alert('Form has been submitted. Please be patient');
      return false;
    }
  };
};

(With slightly more effort you could display the message on the page instead)

For the next line of defence, the simplest thing is probably to implement a "flood interval" - ie. on successful form submission, have email.php set a session variable (server-side) containing the date/time at which the successful request was made. The page needs to test this variable against current time in order to suppress repeat resuests within a certain time limit (the flood interval, which you hard code in email.php).

The user will definately want feedback to inform that the server has responded (or not). For this, you should arrange to email.php to do one of the following:compose and serve a page containing an appropriate feedback message (as per conventional php pages)
compose and return an appropriate feedback message (not in a page) for display using AJAX/DHTML techniques.
For the latter, the request (form submission) would need to be made in the AJAX way, which is a little mind-blowing if you've not done it before but not too tricky in the overall scheme of things. There a plenty of examples on Daniweb and elsewhere to help.

Either way, I don't think you should need to redirect (ie serve a different page from the one that was requested).

Airshow

[Airshow]

Oh yes, tere are errors in your statement, which is equivalent to:

onload = function() {
	var submitted = false;
	document.myForm.onsubmit = function() { return (!submitted) ? submitted = true : false; };
};
onload = function() {
	var submitted = false;
	document.myForm.onsubmit = function() { return (!submitted) ? submitted = true : false; };
};
showpromo();
showclass();

It should be:

onload = function() {
	var submitted = false;
	document.myForm.onsubmit = function() { return (!submitted) ? submitted = true : false; };
	showpromo();
	showclass();
};

(In Daniweb remember to click "Toggle plain text" before copying code to clipboard or you can get everything twice).Airshow