CODEWITHSUNDEEP
phphtml
Kernelus
Kernelus

Reputation: 57

Show message after submit form without refreshing the page

I'm trying to make my contact form and i want it to show message (pop up, as a

or anything else) when it's successfully sent or error when it can't be sent. But i don't know how to do it. I tried a lot of things and nothink worked for me.

Here is my html code:

<form id="contact-form" action="wyslij.php" method="POST">

                            <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                <input type="text" name="name" value="" placeholder="Imie">
                            </div>                                

                            <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                <input type="text" name="subject" value="" placeholder="Temat">
                            </div>                                

                            <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                <input type="email" name="email" value="" placeholder="Email">
                            </div>

                            <div class="form-group col-lg-6 col-md-6 col-xs-12">
                                <input type="text" name="phone" value="" placeholder="Telefon">
                            </div>                               

                            <div class="form-group col-xs-12">
                                <textarea name="message" placeholder="Wiadomość"></textarea>
                            </div>
                            <div class="form-group col-xs-12 clearfix">
                                <input type="submit" class="pull-right" name="submit" value="Wyślij">
                            </div>

                        </form>

and here is my php code:

<?php
$owner_email = "[email protected]"; // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<    tutaj wpisz adres email na który mają byc wysyłane maile
$headers = "From: ".$_POST["email"]."\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/plain; charset=utf-8\r\n";
$headers .= "Content-Transfer-Encoding: 8bit";
$subject = 'Wiadomość ze strony internetowej';
$subject = "=?utf-8?B?".base64_encode($subject)."?=";
$messageBody = "";


if($_POST['name']!='nope'){
    $messageBody .= 'Imię i nazwisko: ' . $_POST["name"] ."\n";
    $messageBody .=  "\n";
}
if($_POST['email']!='nope'){
$mailnadawcy = $_POST['email'];
    $messageBody .= 'Email: ' . $_POST['email'] . "\n";
    $messageBody .= "\n"; 
}else{
    $headers = '';
}
if($_POST['subject']!='nope'){        
    $messageBody .= 'Temat: ' . $_POST['subject'] . "\n";
    $messageBody .= "\n";
}
if($_POST['phone']!='nope'){        
    $messageBody .= 'Telefon: ' . $_POST['phone'] . "\n";
    $messageBody .= "\n";
}    
if($_POST['message']!='nope'){
    $messageBody .= 'Treść: ' . $_POST['message'] . "\n";
}

if($_POST["stripHTML"] == 'true'){
    $messageBody = strip_tags($messageBody);
}
mail($owner_email, $subject, $messageBody, $headers);

?>

Upvotes: 0

Views: 2328

Answers (2)

Atif Tariq
Atif Tariq

Reputation: 2772

You can do it through AJAX.

<script>
$(document).ready(function(){
$("#contact-form").on("submit", function(e){
        e.preventDefault();
    dataString = jQuery('form#contact-form').serialize();
    jQuery.ajax({
        type: "POST",
        url: "full_path/wyslij.php",
        data: dataString,
        success:  function(data)
        { 
            alert('Form successfully submitted.')
        },
        error:  function(data)
        { 
            alert('Form not submitted.')
        }
    }); 
});
});
</script>

Also form action should be removed:

<form id="contact-form" method="POST">

Upvotes: 1

peanut
peanut

Reputation: 121

You will have to use javascript or jQuery if you don't want the page to reload, in jQuery for instance you can do:

$("#contact-form").on("submit", function(e){
    e.preventDefault();
    alert("Form submitted");
})

This doesn't handle validation, handling of input etc, I'd suggest making an Ajax request to one of your php files to handle the form data.

jQuery.post()

If this is a route you want to take, I'll write a small example

Upvotes: 0

Related Questions