Member Avatar for 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.

  • 2 Contributors
  • 7 Replies
  • 263 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for 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

Edited by Airshow because: n/a
Member Avatar for Airshow

At its simplest, the script boils down to:

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

Airshow

Edited by Airshow because: n/a
Member Avatar for 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.

Member Avatar for Airshow

Hi Tom,

The code goes on the same page as your form. Stick it in <script></script> tags within the document's <head></head>

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

Airshow

Edited by Airshow because: n/a
Member Avatar for 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:

<body 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()">

the other 2 functions load in database queries...

regards,

Tom.

Member Avatar for 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

Member Avatar for Airshow

Oh yes, tere are errors in your <body onload="..."> 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

Edited by Airshow because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.