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

Odpowiedz Nowy wątek
2018-12-28 17:06
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=)

edytowany 2x, ostatnio: qwee, 2018-12-28 17:07

Pozostało 580 znaków

2018-12-28 17:38
0

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ć.

Pozostało 580 znaków

2018-12-28 17:40
0

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


Pozostało 580 znaków

2018-12-28 17:51
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.

Pozostało 580 znaków

2018-12-28 18:03
0

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/java[...]ct-document-ready-in-pure-js/

Pozostało 580 znaków

2018-12-28 19:22
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>
edytowany 2x, ostatnio: leonpro778, 2018-12-28 19:23
Myślałem podobnie, ale i tak skrypt będzie starał się wykonać przed wyrenderiwaniem całej zawartości strony. - jurek1980 2018-12-28 19:27
Chyba najpierw wczyta HTML a dopiero później wykona sprawdzenie :) - leonpro778 2018-12-28 19:29
Nie będę się spierał. Tylko autor ma właśnie ten problem że alert wywołuje mu się wcześniej niż kontent- strona jest biała. No to w takim wypadku wykonanie skryptu ze zmienną nic nie zamieni:) - jurek1980 2018-12-28 19:37
Jeżeli osadzimy kod w tagach <script> na końcu strony to wykona się on po wczytaniu "od góry do dołu" czyli na końcu. Można też w JS użyć defer :) - leonpro778 2018-12-28 19:40

Pozostało 580 znaków

2018-12-29 13:53
Szalony Karp
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);

?

A czy JS w ogóle jest tutaj konieczny? Nie lepiej pokazać strony "dziekujemy za rejestrację" i przekierować przez PHP? - upabove 2018-12-29 17:26
@upabove Na pewno łatwiej ale nie lepiej. Czy osobna stron w PHP jest tutaj konieczna? Nie lepiej zrobić właśnie zapytanie AJAX'em, na success wyświetlić modala z podziękowaniem, a potem zrobić ewentualne przekierowanie w JS? Po co rendenować/serwować osobną stronę z podziękowaniem? Co z usability? Po co dodatkowo obciążać serwer? Jak to wygląda na stronach Google czy FB? Uczmy się dobrych praktyk. - siloam 2018-12-29 21:51
@siloam: kłóciłbym się, czy to dobre praktyki i czy łatwiej. Jeśli martwię się o wydajność nie używam wordpressa, jeśli stosuję dobre praktyki to JS jako efekt, chyba, że cała aplikacja działa na AJAX. A jak to wygląda na większości stron - zazwyczaj jest to osobna strona z podziękowaniem i informacją o nadchodzącym e-mail z linkiem potwierdzającym, lub powrót na stronę poprzednią/główną i wyskakujący komunikat, przy czym to drugie też jest obsługiwane po stronie backend, na front jest tylko skrypt komunikatu. Podsumowując - nie zgadzam się :) - upabove 2019-01-03 07:54

Pozostało 580 znaków

2018-12-30 10:48
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

edytowany 2x, ostatnio: hopaj, 2018-12-30 10:53

Pozostało 580 znaków

2018-12-30 13:36
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ę!";
    }
?>

Nie pomagam naPW.!.

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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