[SalesForce] Visualforce: Alert message after Successful record Save

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).

<apex:actionFunction name="applicant" action="{!Applicant}"/>
<apex:commandButton value="Submit" onclick="onSubmit();" styleClass="btn-custom btn-primary submitForm"/>

Then in your JS:

function onSubmit(){
    var isSubmit = confirm('Are you sure you want to Submit?');
    var isValid == validateForm();

    if(isSubmit && isValid){
        alert('Your input was received successfully. We will contact you soon!');
        applicant(); // Call your server method after displaying your alert
    } else {
        alert('Please fill out the required fields!');
    }
}

function validateForm() {
    if (...) {
        return true;
    } else {
        return false;
    }
}

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:

try {
    upsert record;
    ApexPages.addMessage(new ApexPages.message(
        ApexPages.SEVERITY.Confirm,
        'Record successfully saved'
    ));
} catch (Exception ex) {
    ApexPages.addMessage(new ApexPages.message(
        ApexPages.SEVERITY.Fatal,
        ex.getMessage()
    ));
}

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.

public boolean saveSuccessful {get; set;}
public string message {get; set;}

Then, you'll need to set the variable when a save is successful:

try {
    upsert record;
    saveSuccessful = true;
    message = 'YAY!!';
} catch(DMLException) {
    saveSuccessful = false;
    message = ex.getMessage();
}

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:

<apex:outputPanel id="renderTarget">
    <script>
        // message on page
        if ('{!saveSuccessful}' === 'true') {
            alert('Yay!');
        } else if ('{!saveSuccessful}' === 'false') {
            alert('Boo!');
        }

        // -OR-
        // message in controller
        if ('{!saveSuccessful}' !== 'null') {
            alert('{!message}');
        }
    <script>
</apex:outputPanel>

Lastly, make sure you rerender this panel after the operation:

<apex:actionfunction action="" rerender="renderTarget"/>

OR

<apex:commandButton action="" rerender="renderTarget"/>

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.

Related Topic