How to add message after submitting form? PHP, Wordpress

Question

I trying to make a feature, where the user recieves a message saying "Your changes have been saved" after the user has pressed "save changes". When the form is being submittet the page is just refreshed and not redirected to any other page.

I have tried several things but nothing seems to work. I am good at HTML but not PHP. I would love if any of you could help me out!

My code for my profile template is the folowing:

<div class="user-image">            
<div class="bordered-image thick-border">
    <?php echo get_avatar(ThemexUser::$data['user']['ID'], 200); ?>
</div>
<div class="user-image-uploader">
    <form action="<?php echo themex_url(); ?>" enctype="multipart/form-data" method="POST">
        <label for="avatar" class="button"><span class="button-icon upload"></span><?php _e('Skift billede','academy'); ?></label>
        <input type="file" class="shifted" id="avatar" name="avatar" />
        <input type="hidden" name="user_action" value="update_avatar" />
        <input type="hidden" name="nonce" value="<?php echo wp_create_nonce(THEMEX_PREFIX.'nonce'); ?>" />
    </form>
</div>
</div>
<div class="user-description">

<form action="<?php echo themex_url(); ?>" class="formatted-form" method="POST">
    <div class="message">
        <?php ThemexInterface::renderMessages(); ?>
    </div>
    <div class="sixcol column">
        <div class="field-wrapper">
            <input type="text" name="first_name" size="30" value="<?php echo ThemexUser::$data['user']['profile']['first_name']; ?>" placeholder="<?php _e('Fornavn','academy'); ?>" />
        </div>
    </div>
    <div class="sixcol column last">
        <div class="field-wrapper">
            <input type="text" name="last_name" size="30" value="<?php echo ThemexUser::$data['user']['profile']['last_name']; ?>" placeholder="<?php _e('Efternavn','academy'); ?>" />
        </div>
    </div>              
    <div class="clear"></div>

    <!-- ADRESSE -->
    <?php if(!ThemexCore::checkOption('profile_signature')) { ?>
    <div class="field-wrapper">
        <input type="text" name="signature" value="<?php echo ThemexUser::$data['user']['profile']['signature']; ?>" placeholder="<?php _e('Adresse','academy'); ?>" />
    </div>
    <?php } ?>

    <div class="user-fields">
        <?php ThemexForm::renderData('profile', array(), ThemexUser::$data['user']['profile']); ?>
    </div>

    <?php } ?>

    <a href="#" class="button submit-button"><span class="button-icon save">    </span><?php _e('Gem ændringer','academy'); ?></a>
    <input type="hidden" name="user_action" value="update_profile" />
    <input type="hidden" name="nonce" value="<?php echo wp_create_nonce(THEMEX_PREFIX.'nonce'); ?>" />
</form>

</div>

Answer 1

you are submitting to another url. So you can add something like the below to your functions file to display a message when the url is appended with msg. (you can account for multiple messages using the switch below, look it up) also you will need to add `?msg=yourmessagevariable' to your form action.

add_action('wp_print_scripts', 'notifcation', 100);

function notifcation () {

    if($_GET['msg']) {

        $message= sanitize_text_field($_GET['msg']);

        switch($message) {

            case 'reg-business':

                $notehead= 'Please register first';
                $msg= 'Please register your business before continuing';
                break;  

            case 'nowvalid':

                $notehead= "Congratulations";
                $msg='You have successfully connected ';
                break;

            case 'Completed':
                $notehead= 'Edited';
                $msg='You have successfully edited your advert';
                break;
        }


        ?>

            <section id="notification" class="notif notif-notice">
                  <h6 class="notif-title"><?php echo $notehead;?></h6>
                  <p><?php echo $msg; ?></p>

                  <div class="notif-controls">
                   <a href="index.html" class="notif-close">Close</a>
                   </div>
            </section>      

            <script type="text/javascript">

                jQuery(document).ready(function() {
                    setTimeout(function(){
                    jQuery('#notification').css('display', 'none');
                    },3000)

                });
                jQuery('.notif-close').click(function(e){
                    e.preventDefault();
                    jQuery(this).parent().parent().css('display', 'none');

                })

            </script>




        <?php

    }



}