Second validation message with rwmb_frontend_after_display_confirmation

I also thought that I'd add that I tried some other options as tests. My hunch is that rwmb_frontend_after_display_confirmation runs before rwmb_frontend_after_process and that is why nesting the hooks as I did above does not work.

However, I tried other options that also do not work. For example this code does not output another message as desired:

add_filter( 'rwmb_frontend_validate', function( $validate, $config ) {

    add_action( 'rwmb_frontend_after_display_confirmation', function( $config ) {
      echo  "<div class=\"rwmb-error\">Unfortunately, your newsletter subscription failed.</div>";
    }, 9, 1 );

    return $validate;
}, 10, 2 );

I'm kind of at a loss of what else to try. I have yet to figure out any way to dynamically add a message depending on what the user submitted.

Hi Long,

Thank you for this additional idea. Is there a way to add the message without throwing the validation error?

If I use this example, my code will likely end up looking something like this (untested sudo-code):

add_filter( 'rwmb_frontend_validate', function( $validate, $config ) {
    if ( !empty( $_POST['subscribe_to_newsletter'] ) ) {
        
        add_email_to_Mailchimp();

        if ( add_email_to_Mailchimp() == 'error') {

           $validate .= "<div class=\"rwmb-error\">Unfortunately, your newsletter subscription failed. </div>";
        }
    }
    return $validate;
}, 10, 2 );

However, this means that validation for the form submission will depend on the Mailchimp API response as handled by my add_email_to_Mailchimp(); function. I do not want that behavior.

I want the form to be able to submit, but to also display an additional message to tell the user whether or not they were successfully subscribed after I have a chance to process all the data and transmit information to Mailchimp.

Hi Long,

That makes sense. I am working on that solution now; however I am having trouble with that hook still.

I have written some JS code to display my message, however, that code doesn't seem to run properly when called from rwmb_frontend_after_process.

To keep things simple, it looks like I can't even log something to the console. For example the following does not work!

add_action( 'rwmb_frontend_after_process', function( $config, $post_id ) {

echo '<script>
    console.log("rwmb_frontend_after_process can run JS");
  </script>';
//WILL NOT LOG TO CONSOLE

$data = [
    'field_1' => 'value 1',
    'field_2' => 'value 2',
    'field 3' => ['one', 'two', 'three'],
];

\MetaBox\CustomTable\API::update( $post_id, 'my-custom-table', $data );
}, 10, 2 );

Now, I know this code inserts the script properly because I can see the console log if I add die; right after the echo used to insert the script.

Trying to make the JS run after the DOM is loaded also doesn't work

echo '<script>
  window.addEventListener(\'load\', function() {
    console.log("rwmb_frontend_after_process can run JS");
  })
  </script>';
//DOES NOT WORK

Is there a different hook I need to use, or is there some modification to the JS that will make it work?

Okay, I understand that the page reloads, and so I can not use JS to print out something. However, I am trying to modify the HTML content of the page to display a message using JS per your suggestion. This is what you suggested:

I think you can use the hook rwmb_frontend_after_process and create some JS code to append the HTML code to the form after processing.

So if the page reloads, how am I supposed to append the HTML? I could write something to the database and then recall it after the reload, but that seems excessive for a task like this. I'm already using php to send the emails that I want. So, I don't understand how I am supposed to use rwmb_frontend_after_process to run some JS that will alter the HTML of the page.

Now, my JS function works perfectly inside rwmb_frontend_before_display_confirmation; however, it appears that I can not use rwmb_frontend_before_display_confirmation inside rwmb_frontend_after_process.

For reference, here is the JS function that I wrote to display the message as desired:

function subscriptionMessage(status = "none") {
  //Wait until the page exists.
  window.addEventListener('load', function() {
    console.log("subscription validation running");
    const mbValidationMessage = document.querySelector(".rwmb-confirmation");

    const message = document.createElement("div");

    if (status == "success") {
      message.className = "rwmb-confirmation";
      message.innerHTML = "Thanks for subscribing to our newsletter!";
    } else if (status == "error") {
      message.className = "rwmb-error";
      message.innerHTML = "Uh oh, we could not subscribe you to our newsletter.";
    } else {
      return;
    }
    mbValidationMessage.parentNode.insertBefore(message, mbValidationMessage.nextSibling);
  })
}

Hi Long,

I thought about using the template. However, I am making a plugin so I didn't want to use my child theme.

Ultimately, I decided to have my PHP functions set a session cookie to indicate success or failure. When my script runs, it uses the value of that cookie to display the proper message, and then destroys the cookie.

I tried putting the script in rwmb_frontend_after_display_confirmation, however that hook is broken when using AJAX submit on the form. Therefore, I ultimately had to put my script directly in the text of the normal MetaBox confirmation message.

Do you know if that AJAX bug has been fixed yet? I haven't had a chance to test yet, but the changelog for AIO 1.16.7 doesn't mention anything.

Hi Peter,

That is good to hear. Thanks for the update. Do you know when this new version of MB Frontend Submission will be released? Looks like it is not in AIO 1.16.9.

Thanks,
Graceson