0

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.

2

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.

7
  • I get this, but I have a situation where I need to have the fields validated. With your code, if I click on OK at the alert: Are you sure you want to Submit?, I get the success alert even I if I have validation issues. All I am trying is, Get the success alert after the record gets created successfully. Is there a call-back or something I can make use off? – Austin Evans Jun 18 '18 at 20:40
  • 1
    You're missing the key point of my answer. Converting it to an action function allows you to call it from JS at the exact right time. What you would want to do is is change it so that if submit is true AND the validations have passed. I'll update my answer to reflect this. – gNerb Jun 18 '18 at 20:45
  • Sounds good gNerb. – Austin Evans Jun 18 '18 at 20:46
  • I've updated my answer. – gNerb Jun 18 '18 at 20:50
  • I am using my input fields as: <apex:inputField required="true" and not by JS function for complete form Validations. Is there a way I can get/implement that validationForm( ) kind of check here? – Austin Evans Jun 18 '18 at 20:53
-1

Apex:commandbutton does support oncomplete event that runs when server side call is finished.

The JavaScript invoked when the result of an AJAX update request completes on the client.

You can use this to show success message. https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_commandButton.htm

2
  • I have tried that already. Inclusion of oncomplete in the commandButton, the form is not even getting submitted. Am I missing something here? – Austin Evans Jun 18 '18 at 19:44
  • The code sample has the "please fill out the required fields" line which leads me to believe he wants to run the JS BEFORE firing the server method, not after. – gNerb Jun 18 '18 at 20:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.