I have a simple Visualforce page with an intake form. Main purpose of it- Submitting a new record after a successful data entry. I do have a lot of CSS on my page as I have: standardStylesheets="false"
I do have a Submit and Reset buttons that works perfectly.
Now all I am trying to do is: After a record was successfully submitted by a user via this Visualforce page, it should show an JavaScript alert message on the screen: Your input was received successfully. We will contact you soon.
How can I get a call-back or something like that after a record gets saved after the Submit click?
I have tried this(I am not sure if this is valid).
...
<apex:inputField value="{!newApplicant.SuppliedCompany}" required="true" label="Company" html-class="form-control form-control-max"/>
...
...
<apex:commandButton action="{!Applicant}" value="Submit"
onclick="onSubmit();" styleClass="btn-custom btn-primary submitForm"/>
<script>
function onSubmit(){
var isSubmit = false;
if(confirm('Are you sure you want to Submit?')){
isSubmit = true;
return isSubmit;
} else {
return isSubmit;
}
if(isSubmit){
alert('Your input was received successfully. We will contact you soon!');
return;
} else {
alert('Please fill out the required fields!');
}
}
</script>
Note: All my input fields are getting validated by required="true"
, and not by any custom field validations.
Best Answer
I think your action method will be called in the wrong spot so maybe consider creating an action function and then calling that instead of doing it using the action attribute. This will allow you to call your server method at the exact right time in your JS (after the form has been submitted and validated).
Then in your JS:
Disclaimer:
This is a SF site, not a JS site. If you need more assistance with JS visit http://stackoverflow.com
Update based on chat
To show a success message after the save is successful use
<apex:pageMessages
functionality.Add the tag to your vf page where you want the message to be displayed, than in your controller do the following:
Another update
Since you absolutely need alert messages and you don't want to convert your controller into code using the AJAX toolkit due to complexity, you can try to do the following workaround that should work although it's quite ugly.
First, you need to create a variable in your controller to store whether or not the operation is successufl. I'm including a message parameter just to show you how that would work, take it or leave it.
Then, you'll need to set the variable when a save is successful:
Then, in your page, you put a JS that uses these variables into an output panel. Re-render the panel after the operation. The JS can look 1 of two ways so Ill show them both:
Lastly, make sure you rerender this panel after the operation:
OR
Which ever suits your needs better.
When the output panel is re-rendered, the javascript will run and the isSuccessful variable will now have a value so the JS should show a message. You'll have to take steps to make sure that your message is not displayed at incorrect times.