I have an input submit button that once clicked activates php.

Now the problem I have is that I have the neccessary code (or what i think is) to stop from the input button working (as I have used the same technique on the other input submit buttons).

To get to the point I am using

blah blah blah

return false;

That should deactivate the button, but in this case it just proceeds to the next page. =(

Any Ideas?

Thanks, Regards X

Dani AI

Generated

Short summary and practical fixes based on the thread: the usual reasons a return false (or an inline handler) fails are a JavaScript error earlier on the page, wrong quoting in an inline attribute, or that the form was being submitted by something other than that button (for example pressing Enter in a field or code calling form.submit()). already spotted the quoting/syntax trap and gave the correct cross-browser distinction between preventDefault() and returnValue.

Prefer attaching logic to the form submit event rather than relying on a single button onclick. That catches Enter-key submissions and programmatic submits. Use e.preventDefault() in modern browsers, and disable the submit control or use a guard to avoid double-submits.

Example pattern (unobtrusive, robust):

/* attach after DOM is ready */
var form = document.getElementById('myForm');
var btn = document.getElementById('submitBtn');
var sending = false;

form.addEventListener('submit', function (e) {
  if (!myValidation()) {          // perform your checks
    e.preventDefault();
    return;
  }
  if (sending) {                  // block duplicate sends
    e.preventDefault();
    return;
  }
  sending = true;
  btn.disabled = true;
});

Troubleshooting checklist:

  • Open the browser console for syntax/runtime errors that stop JS execution.
  • Confirm your handler runs (temporary console.log or a breakpoint).
  • If the action should never submit, change the control to type="button" or handle the form submit instead.
  • Always keep server-side validation; client-side blocking is usability only.
  • For compatibility notes, see the standard preventDefault() behavior and how to attach listeners with addEventListener on MDN: Event.preventDefault() and addEventListener.

Recommended Answers

All 9 Replies

Just as an example this would stop a submit button from submitting.

<input type="submit" onclick="return confirm("Are You Sure?");" />

If they accept then it continues, if they cancel nothing happens.

No didnt work =(

Now the problem I have is that I have the neccessary code (or what i think is) to stop from the input button working (as I have used the same technique on the other input submit buttons).

Applying the same technique should yield the same results. Is there other JavaScript on the page? Does this other JavaScript that is running possibly have an error? If there are any errors, the JavaScript will quit executing, and thus the return false will never be reached.

<input type="submit" onclick="return confirm("Are You Sure?");" />

This example does not work because the inner quotes are not escaped properly. Try this similar code with imbedded single-quotes:

<input type="submit" onclick="return confirm('Are You Sure?');" />

An alternative approach to using a return statement is to set the "event.returnValue" to false:

<input type="submit" onclick="if (!confirm('Are You Sure?')) event.returnValue = false;" />

If none of these ideas work, please post all JavaScript relating to the page that relates to this submit button or form, and perhaps some invalid code can be identified that is stopping your entire command from executing properly, so the "return false" is never reached.

~ mellamokb

~ mellamokb

what can i say? Again you came through in strides, worked perfectly first time no problems.
Thankyou very much again =)

No problem. Glad to help!

~ mellamokb

> An alternative approach to using a return statement is to set the "event.returnValue" to false:
...which would only work in IE.

In IE the event generated becomes a event property of the window object whereas in Gecko based browsers it is passed as a first argument to the event listener. A better approach would be:

function handle(e) {
	var e = e || window.event;
	if(!confirm("Do you want to continue?")) {
		if(e.preventDefault) {
			e.preventDefault();
		}
		else {
			e.returnValue = false;
		}
	}
}

<!-- more code -->

<input type="submit" onclick="handle(event);" />

Thanks SOS for that.

I was just wondering what is the difference between:

returnValue= true;

and

e.returnValue= true;

And

e.preventDefault();

Just allows the default commands to proceed i gather?

Also I was never using a confirm button they just suggested I did.

Regards, X

> returnValue= true; This sets the value of the global variable returnValue to true and has got nothing to do with your issue.

> e.returnValue = true; This sets the return value of the event to ' true ' and is a MS only property. So your onclick returns false if the validation fails and thereby prevents form submission.

> e.preventDefault() This cancels / prevents the default action caused by the event. In our case, the click action submits the form which is prevented by calling p reventDefault(). It is important to notice that both e.returnValue = false; and e.preventDefault() in our case achieve the same purpose(of cancelling the forum submission) for different browser types.

commented: Very helpful information =) +1

Perfect thankyou for all the information and help. Very detailed and summarized =)

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.