0

I want to display an error message to a user when a php POST form fails. The form lets a user create a new team on my site. If the team name is not unique, the query fails. I want to display a generic error message when this happens.

Here is my form:

        <form method="post" id="create_team" action="">
            <p class="form">
                <label for="team_name"><?php _e('Team Name:', 'profile'); ?></label>
                <input class="text-input" name="team_name" type="text" id="team_name" value="<?php the_author_meta( 'team_name', $current_user->ID ); ?>" />
            </p>

            <p class="form">
                <select name="team_type" id="team_type" class="styled-select">
                    <option value="" selected disabled >Team Type</option>
                    <option value="School">School</option>
                    <option value="Neighborhood">Neighborhood</option>
                    <option value="Organization">Organization</option>
                </select>
              </p>
            <p class="form-submit" id="create-team-submit">
                <input name="create_team" type="submit" id="create_team" class="submit button" value= "submit" />
            </p>
        </form>

Here is the handler in functions.php:

function mytheme_insert_new_team() {

      $name  = $_POST['team_name'];
      $type  = $_POST['team_type'];
      global $wpdb;
      $table_name = "wp_teams";

      $wpdb->insert($table_name, array(
                                'team_name' => $name,
                                'team_type' => $type
                                ),array(
                                '%s',
                                '%s')
                                    );
            if(!$response){
                if($wpdb->last_error !== ''){
                    mytheme_print_error();
                }
            }else{
                mytheme_redirect();
            }
 }

And here is my function to show the error, also in functions.php:

function mytheme_print_error(){
        //append the error message after the form
        echo "<script>

                        var error = document.createElement('div');
                        error.class = 'error';
                        error.value = 'There was an error. Please try again';
                        var element = document.getElementById('create-team-submit');
                        element.appendChild(error);

                    </script>";
}

I get the following error:

Uncaught TypeError: Cannot read property 'appendChild' of null

I have double checked for typos but I can't seem to fix it. Any advice?

5
  • That is a JavaScript error, which happened most likely because the submit button wrapper (which has create-team-submit as its id) was not found on the page when the appendChild() method is called. Second issue I see, is that you should use error.innerHTML and not error.value since you're creating a div element and not a form field (e.g. <input>) that has a value.
    – Sally CJ
    Commented Sep 26, 2018 at 3:32
  • 1
    @SallyCJ Thank you. I changed .value to .innerHTML.
    – ellen
    Commented Sep 26, 2018 at 4:04
  • I am not sure what to do about the element not being found on the page - it should exist when the method is called because it's called after the form loads, right?
    – ellen
    Commented Sep 26, 2018 at 4:05
  • Yes.. but is the mytheme_insert_new_team() called after the form is displayed on the page, or is it before the content of the page loads? I'm asking because I could see that upon successful submission, the user is redirected (to the same page?).
    – Sally CJ
    Commented Sep 26, 2018 at 4:33
  • If after the form is submitted, and there was an error, and the form hasn't been displayed yet, and you called the mytheme_print_error(), then that would result in the JS error there.
    – Sally CJ
    Commented Sep 26, 2018 at 4:43

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.