Potwierdzenie maila wyskakujące w modal Bootstrap

Question

Chciałabym umieścić powiadomienie z formularza kontaktowego o poprawnie wypełnionym mailu i informacji, że odezwiemy się oraz info o błędzie, w oknie modalnym bootstrap. Wszystko dzieje się po kliknięciu na przycisk "submit" Problemy są dwa:

1. Okno modalne bardzo szybko znika, tak że tylko sekundę można załapać treść.

2. Treść rezultatu php się nie wyświetla. Mimo, że wyświetla się w przypadku prób w innych miejscach na stronie.

 

Będę wdzięczna za pomoc.

<?php
	if (isset($_POST["submit"])) {
		$name = $_POST['name'];
		$email = $_POST['email'];
		$message = $_POST['message'];
		$human = intval($_POST['human']);
		$from = 'Formularz kontaktowy'; 
		$to = 'ktos@gmail.com'; 
		$subject = 'Wiadomość z formularza kontaktowego ';
		
		$body ="From: $name\n E-Mail: $email\n Message:\n $message";
		if (!$_POST['name']) {
			$errName = 'Proszę wpisz swoje imię i nazwisko';
		}
		
		if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
			$errEmail = 'Proszę wpisz poprawny adres e-mail';
		}
		
		if (!$_POST['message']) {
			$errMessage = 'Proszę wpisz swoją wiadomość';
		}
		if ($human !== 5) {
			$errHuman = 'Twój wynik nie jest poprawny';
		}
if (!$errName && !$errEmail && !$errMessage && !$errHuman) {
	if (mail ($to, $subject, $body, $from)) {
		$result='<div class="alert alert-success">Dziękujęmy! Odezwiemy się w ciągu 24 godzin.</div>';
	} else {
		$result='<div class="alert alert-danger">Przepraszamy. Nastąpił błąd przy wysyłaniu wiadomości. Spróbój ponownie później.</div>';
	}
}
	}
?>

 

                 <div class="modal" id="result" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Zamknij"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                            <?php echo $result; ?>

                    </div>
                    <div class="modal-footer">
                        <p>yo man</p>
                    </div>
                </div>
            </div>
        </div>          

 <section id="contact">
                        <div class="container">
                            <div class="row">
                                <div class="page-header col-xs-12">
                                    <h1>Kontakt</h1>
                                </div>
                                <div id="form">
                                    <div class="col-xs-12 col-sm-12 col-md-6">
                                        <h2 class="text-center">Formularz kontaktowy</h2>
                                        <form class="form-horizontal" role="form" method="post" role="dialog">
                                            <div class="form-group">
                                                <label for="name" class="col-xs-3 control-label">Imię i nazwisko</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control" id="name" name="name" placeholder="Imię i nazwisko" 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-xs-3 control-label">Email</label>
                                                <div class="col-xs-9">
                                                    <input type="email" class="form-control" id="email" name="email" placeholder="przykład@przykład.com" 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-xs-3 control-label">Wiadomość</label>
                                                <div class="col-xs-9">
                                                    <textarea class="form-control" rows="15" name="message" placeholder="Twoja wiadomość"><?php echo htmlspecialchars($_POST['message']);?></textarea>
                                                    <?php echo "<p class='text-danger'>$errMessage</p>";?>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="human" class="col-xs-3 control-label">2 + 3 = ?</label>
                                                <div class="col-xs-9">
                                                    <input type="text" class="form-control" id="human" name="human" placeholder="Twoja odpowiedź">
                                                    <?php echo "<p class='text-danger'>$errHuman</p>";?>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-xs-9 col-xs-offset-3">
                                                    <input id="submit" name="submit" type="submit" value="Wyślij" class="btn btn-primary">
                                                </div>
                                            </div>

                                        </form>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

 

$("form").on('submit', function(){
   $('#result').show();
})
  

 

Answer 1

1. Zamiast funkcji mail polecam zainteresować się PHPMailerem.

2. http://api.jquery.com/jquery.ajax/

Comments

Chciałam to zrobić tym sposobem jako też, że nie używałam ajax'a. Ale dzięki za info.

 

Mały update. Okno modalne już nie znika od razu. Pozostaje kwestia dlaczego rezultat php nie pokazuje się w oknie modalnym.

Zmiany:

      $('#submit').on('click',function(clickEvent) {
        clickEvent.preventDefault();
        $("#result").modal("show");
    });

 

---

Nie kontaktujesz się z serwerem, więc jak te dane z php mają być odebrane? Użyj Ajaxa i nie będzie problemu.