wysłanie formularza, przeładowanie strony, komunikat JS

0

Witajcie,
Dla was to pewnie pieroła, ale ja dopiero zaczynam działanie w php. Mam formularz na stronce i chciałbym dorzucić do tego skrypt wysyłający treść na email. Za pomocą google wymyśliłem sobie to tak:

<?php
   
   if(isset($_POST['wyslij']))
	{
		//var_dump($_POST);
		$adresat = '[email protected]';    // pod ten adres zostanie wysłana wiadomosc
		$email = $_POST['email'];
		$imie= $_POST['imie'];
		$wiadomosc=$_POST['wiadomosc'];
		$data=$_POST['data'];
		//$content = 'Imie:'.$imie.'\n\r email:'.$_POST['email:'].'\n\r wiadomosc:'.$_POST['wiadomosc'];
		$content = 'imie: '. $imie.'  \n\r data: '. $data.'  \n\r email: '.$email. '  \n\r Tresc: '.$wiadomosc;
		$header =    "From: [email protected] \nContent-Type:".
         ' text/plain;charset="iso-8859-2"'.
         "\nContent-Transfer-Encoding: 8bit";
		echo "
		<script language='javascript'>
			alert('Wysłano wiadomość');
		</script>";
	}
	


?>



<!DOCTYPE html>
<html lang="pl">
<head>
</head>


<body>
<form action="kontakt.php" method="post" enctype="miltipart/from-data">

treść formularza - nie istotne

	</form>
</body>
</html.

W zamyśle chciałbym aby po kliknięciu submita w formularzu strona została przeładowana, email wysłany w tle i pojawił się komunikat o wysłaniu. Jako tako to działa, lecz po kliknięciu wyślij strona się przeładowuje, pojawia się pusta strona z komunikatem "Wysłano wiadomość" i dopiero po kliknięciu OK wraca ponownie do strony z formularzem.
Jak zmienić kod aby po kliknięciu wyślij przeładowała sie strona i wyskoczył komunikat bez przejścia przez stronę pustą? Nie wiem nawet czy w dobrym miejscu umieściłem skrypt... Kontakt.php to strona z formularzem, stąd (nie mam pewnosci czy poprawnie) umieściłem to w action=)

1

Mieszasz javascript z PHP. Jak strona Ci się przeładowuje to uruchamia się zawsze alert. Potem jak klikniesz ok, dalej strona Ci się ładuje.
Dobrze wklej sformatowany kod, to bedzie można coś więcej powiedzieć.

0

Tutaj dodawałem formularze php to zlukaj klimat:
Skrypty do PHP

0

W takim razie spróbuje jeszcze raz to wkleić
Tak wygląda plik kontakt.php

<?php

   if(isset($_POST['wyslij']))
    {
        //var_dump($_POST);
        $adresat = '[email protected]';    // pod ten adres zostanie wysłana wiadomosc
        $email = $_POST['email'];
        $imie= $_POST['imie'];
        $wiadomosc=$_POST['wiadomosc'];
        $data=$_POST['data'];
        //$content = 'Imie:'.$imie.'\n\r email:'.$_POST['email:'].'\n\r wiadomosc:'.$_POST['wiadomosc'];
        $content = 'imie: '. $imie.'  \n\r data: '. $data.'  \n\r email: '.$email. '  \n\r Tresc: '.$wiadomosc;
        $header =    "From: [email protected] \nContent-Type:".
         ' text/plain;charset="iso-8859-2"'.
         "\nContent-Transfer-Encoding: 8bit";
        echo "
        <script language='javascript'>
            alert('Wysłano wiadomość');
        </script>";
    }

?>

<!DOCTYPE html>
<html lang="pl">
<head>
</head>

<body>
<form action="kontakt.php" method="post" enctype="miltipart/from-data">

treść formularza - nie istotne

    </form>
</body>
</html.

Świadomie mieszam js z php, tzn w php chciałem uruchomić skrypt wyświetlający komunikat a że znam metodę z wykorzystaniem js to skorzystałem z tego.
Alert nie wyskakuje przy każdym łądowaniu strony (nie ma go przy wejściu na stronę po wybraniu jej z menu). Dopiero po kliknięciu w submita pojawia się pusta strona z alertem a następnie po kliknięciu OK, przechodzi ponownie do strony z formularzem. Jednym słowem chce wywołać skrypt przy kliknięciu w przycisk i wyświetlić jakiś komunikat. Bez względu na to czy strona się przeładuje czy nie. Wiem, że bez przeładowania można zrobić to z AJAX ale to jeszcze nie ten level. Na razie chce ogarnąć małe podstawy php.

1

To jeśli dobrze rozumiem wszystko działa, tylko skrypt wywołuje się za wcześnie. Powinieneś więc wykonać go po załadowaniu całej strony. W jeqery jest document.ready. W czystym js jest trochę problemu z ogarnięciem kompatybilności przeglądarek ale zobacz np. Tu https://www.jstips.co/en/javascript/detect-document-ready-in-pure-js/

1

Nie trzeba od razu do tego jQuery zaciągać. Spróbuj tak (pisane z pamięci):

<?php
	if(isset($_POST['wyslij']))
    {
        //var_dump($_POST);
		$adresat = '[email protected]';    // pod ten adres zostanie wysłana wiadomosc
        $email = $_POST['email'];
        $imie= $_POST['imie'];
        $wiadomosc=$_POST['wiadomosc'];
        $data=$_POST['data'];
        //$content = 'Imie:'.$imie.'\n\r email:'.$_POST['email'].'\n\r wiadomosc:'.$_POST['wiadomosc'];
        $content = 'imie: '. $imie.'  \n\r data: '. $data.'  \n\r email: '.$email. '  \n\r Tresc: '.$wiadomosc;
        $header =    "From: [email protected] \nContent-Type:".
         ' text/plain;charset="iso-8859-2"'.
         "\nContent-Transfer-Encoding: 8bit";
		 
		 $email = mail($adresat, $imie, $content);
    }
 
?>

<!DOCTYPE html>
<html lang="pl">
<head>
</head>
 
<body>
	<form action="kontakt.php" method="post" enctype="miltipart/from-data">
		treść formularza - nie istotne<br /><br />
    </form>
	
	<?php
		if ($email) {
			echo "
				<script language='javascript'>
					alert('Wysłano wiadomość');
				</script>
			";
		}
	?>
</body>
</html>

0

Chcę zrobić podobnie jak qwee, mam formularz rejestracyjny i go sprawdzam po stronie serwera, jak wszystko ok to wypisuję poprzez echo: "Zarejestrowano". Chciałbym aby ten komunikat pojawił się na środku strony na pierwszym tle, po chwili zniknął i przeniosło np. na index.php. Wystarczy jak ten komunikat wrzucę do kontenera i w js mu dodam, usunę klasy aby się pojawił i zniknął? Przekierowanie zrobić tym:

setTimeout("location.href='http://nasz-nowa-domena.pl';",5000);

?

0

Czesc. Mozna zrobic to następująco. Potrzebnych bedzie kilka plików.
odliczanie.js
modal.js
plik gdzie osadzic trzeba bedzie wszystko nazwa dowolna
modal.css

Plik formatujacy *.html, *.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Przyklad</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="modal.css">	
  <script src="modal.js"></script>	
 	<script src="odliczanie.js"></script>	
	
</head>
<body>


<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
               <i class="glyphicon glyphicon-user" style="color: yellow"></i> Dziękujemy za rejestracje.
            </div>
        </div>
    </div>
</div>
<div id="czas"> </div>
<script type="text/javascript">
 counter(0,5);
 </script>


</body>
</html>

Plik modal.js

$(document).ready(function(){
	     cache: 'false',
        $("#myModal").modal('show');
		   setTimeout(function() {
         $('#myModal').modal('hide');}, 4000);
			
    });

Plik modal.css / modyfikowanie modala


.modal-backdrop {
     background-color: rgba(0,0,0,.0001) !important; // usuniecie tla modala
}

.modal-dialog {

        max-width: 320px;
		  max-height: 40px;
		  position: fixed;
        top: 30%;
        left: 40%;

      }

       .modal-body {
	position: relative;
	overflow-y: auto;
	padding: 12px;
	background: #0B3861;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: White;
	font-weight: normal;
	font-variant: normal;
	font-style: normal;
	font-size: 11px
}
.modal-header {
	position: relative;
	overflow-y: auto;
	padding: 12px;
	background: #0B3861;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: White;
	font-weight: normal;
	font-variant: normal;
	font-style: normal;
	font-size: 11px
}
.modal-footer {
	position: relative;
	overflow-y: auto;
	padding: 12px;
	background: #0B3861;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: White;
	font-weight: normal;
	font-variant: normal;
	font-style: normal;
	font-size: 11px
}

Plik odliczanie.js

 var secs = 0;
 var element = 'czas';
 var T = null;
 function count(id){
         temp = secs;

         if(secs > 0){


                 var result = " Przeniesienie za: ";
                 temp %= 60;
                 result += temp + ' sek..';
                 document.getElementById(element).innerHTML = result;

                 secs--;
         }else{
                 document.location="nowastrona.php"
                 clearInterval(T);
         }

 }
 function counter(minutes, seconds){

         secs =  minutes*60 + seconds;

         T = window.setInterval("count()", 1000);
     
 }

Wywolac plik html/php

0

Plik kontakt.php

<!DOCTYPE html>
<html lang="pl">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("form").submit(function(event) {
$.post( "from.php", $(this).serialize(), function( data ) {
  alert(data);
});
event.preventDefault();
});
});
</script>
</head>

<body>
<form action="kontakt.php" method="post" enctype="miltipart/from-data">

treść formularza - nie istotne

    </form>
</body>
</html>

Plik: form.php

<?php
   if(isset($_POST['wyslij']))
    {
        //var_dump($_POST);
        $adresat = '[email protected]';    // pod ten adres zostanie wysłana wiadomosc
        $email = $_POST['email'];
        $imie= $_POST['imie'];
        $wiadomosc=$_POST['wiadomosc'];
        $data=$_POST['data'];
        //$content = 'Imie:'.$imie.'\n\r email:'.$_POST['email:'].'\n\r wiadomosc:'.$_POST['wiadomosc'];
        $content = 'imie: '. $imie.'  \n\r data: '. $data.'  \n\r email: '.$email. '  \n\r Tresc: '.$wiadomosc;
        $header =    "From: [email protected] \nContent-Type:".
         ' text/plain;charset="iso-8859-2"'.
         "\nContent-Transfer-Encoding: 8bit";
       echo "Wiadomość została wysłana!";
    } else {
        echo "Wysyłanie nie powiodło się!";
    }
?>

wysłanie formularza, przeładowanie strony, komunikat JS

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami