How to submit a php form, without reloading the page

Asked

Viewed 42 times

0

When I click submit in the form, I wanted it to validate the fields, with PHP, but not reload the page.

I’m using this code:

<?php
    if (isset($_POST["submit"])) {
        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = $_POST['message'];
        $human = intval($_POST['human']);
        $from = 'Contato do site'; 
        $to = 'giovanni@'; 
        $subject = 'Formulário de contato - ';

        $body ="Enviado por: $name\n E-Mail: $email\n Menssagem:\n $message";

        // Check if name has been entered
        if (!$_POST['name']) {
            $errName = 'Por favor, insira o seu nome';
        }

        // Check if email has been entered and is valid
        if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
            $errEmail = 'Por favor, insira um endereço de e-mail válido';
        }

        //Check if message has been entered
        if (!$_POST['message']) {
            $errMessage = 'Por favor, insira a sua mensagem';
        }

// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage) {
    if (mail ($to, $subject, $body, $from)) {
        $result='<div class="alert alert-success">Obrigado! Entraremos em contato em breve!</div>';
    } else {
        $result='<div class="alert alert-danger">Desculpe, houve um erro ao enviar a sua mensagem. Por favor tente de novo mais tarde.</div>';
    }
}
    }
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Bootstrap contact form with PHP example">
    <meta name="author" content="BootstrapBay.com">
    <title>Bootstrap Contact Form With PHP Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h1 class="page-header text-center">Contact Form Example</h1>
                <form class="form-horizontal" role="form" method="post" action="index.php">
                    <div class="form-group">
                        <label for="name" class="col-sm-2">Nome</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="name" name="name" placeholder="Seu Nome" value="<?php echo htmlspecialchars($_POST['name']); ?>">
                            <?php echo "<p class='text-danger'>$errName</p>";?>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-2">Email</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="email" name="email" placeholder="Seu E-mail" value="<?php echo htmlspecialchars($_POST['email']); ?>">
                            <?php echo "<p class='text-danger'>$errEmail</p>";?>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="message" class="col-sm-2">Menssagem</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="4" name="message" placeholder="Sua Mensagem"><?php echo htmlspecialchars($_POST['message']);?></textarea>
                            <?php echo "<p class='text-danger'>$errMessage</p>";?>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-10 col-sm-offset-2">
                            <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-10 col-sm-offset-2">
                            <?php echo $result; ?>  
                        </div>
                    </div>
                </form> 
            </div>
        </div>
    </div>   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

I usually leave in another page PHP and call by the action, but I decided to leave everything in one page to see if it worked, but it did not work.

  • 3

    Good afternoon Giovanni, you know what ajax is?

  • @Guilhermenascimento I know, but I would give me about 30% of notion about ajax. But you can say there William, that I run behind knowing!!

  • To do the validation on the same page it is necessary that the validation is done by javascript without necessarily sending the data. For this there are plugins that do the validation task, I use quite the validate jquery -> http://jqueryvalidation.org/ which is very good. Take a look at it.

  • Ajax does not refresh the page as @Guilhermenascimento said

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.