Posting Form after OnClick event

[JasonHarper]

Hello,

 

When a user clicks a Submit button on my page, I'm using an onClick event to essentially just disable the button and change the message to 'Saving'.  However, when I add the onClick code, the form no longer posts using PHP.  The button does indeed change but the postback never occurs.  Is there something extra I need to add or do?

 

Thank you!!

 

This is my submit button:

<input type="submit" id="submit" value="Save Changes" onclick="this.disabled=true; this.value='Saving'">|<a href="/">Cancel</a>

 

Then I have the normal PHP stuff for postback which isn't firing....

 

//IF POSTBACK
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
	//DO STUFF HERE
}

[.josh]

It's not posting because you disabled the button.  It's like cutting the wires between the switch and battery and then wondering why the lightbulb doesn't light up when you flip the switch... if you're lookin' to post the form w/out refreshing the page, then use ajax.

[JasonHarper]

Thanks for the reply!  Duh - that makes total sense - not sure what I was thinking.

 

Is there an effective way to disable the button and still post the form?  I'm OK with a page refresh....

 

Thank you! 

[.josh]

I don't understand why you are trying to disable the button...it's the button that allows the user to submit the form, yes?  The button sort of has to work in order for the user to submit the form...

[JasonHarper]

I'm trying to disable for more of a visual aesthetic...to let the user know something is happening. T he button changes color and says 'Saving' when in a disabled state.  On my forms where the submit also processes a credit card transaction, I want to avoid multiple clicks....  Thanks again for the help!

[.josh]

Then IMO you should look into using AJAX.  Do you use a framework like jQuery?

 

 

[JasonHarper]

OK  - thanks!  The only jQuery I'm really using is for navigation based stuff.  Everything else is all PHP.

[Philip]

You'd need to move the JS into a function:

<script language="text/javascript"> 
function fireSubmit() { 
  document.myForm.submit.disabled = true;
  document.myForm.submit.value = 'Saving...';
  document.myForm.submit(); 
} 
</script>

<form name="myForm">
<input type="text" name="blahText">
<input type="button" value="submit" name="submit" onclick="fireSubmit()"> 
</form>

Untested, but should work (submit button might need to be named something other than submit in order to avoid conflict with the function).

[JasonHarper]

Thanks KingPhilip!

 

I implemented that code and now the form is indeed posting but the attributes of the button don't seem to be changing.  Here is my current code:

 

function fireSubmit() { 
  document.emailNotifications.submitButton.disabled = true;
  document.emailNotifications.submitButton.value = 'Saving...';
  document.emailNotifications.submit(); 
} 
</script>    

 

<form id="emailNotifications" name="emailNotifications" method="post" action="email-notifications.php">
<input type="submit" id="submitButton" name="submitButton" value="Save Changes" onclick="fireSubmit()">
</form>