Visszalép

onSubmit
Űrlap ellenőrzés elküldés előtt


Az onsubmit bemutatása

Következő űrlap formátum,
szerveroldali programnak vagy JavaScript programnak továbbítódik.

Eltérések küldőgomb meghatározásnál:
Szerveroldali programnak:
<input type="submit" value="Elküld">

JavaScript programnak:
Igy: <input type="button" id="btn_urlap" value="Elküld" onClick="feldolgozó-function()">
Vagy
Igy: <button id="btn_urlap" onClick="feldolgozó-function()"> Elküld </button>


Tesztelhető űrlap!

Neve?

Kora?

Telefonszáma



Teszteléshez, kattints az űrlap "Elküld" gombjára!

1. Első alkalommal, ne írj be semmit, csak küld el!
------ ( Egy figyelmeztetés jelenik meg. )

2. Második alkalommal, a "neve" mezőbe írj be valamit, és küld el!
------ ( Program feldolgozza űrlap adatait, és kiírja. )


Input mezők adatai:

Figyelj! PHP fájlok eredményei, csak localhosztról, azaz, szerverről jelennek meg!
PHP otthoni gyakorlásához, telepíteni kell az APACHE szervert és PHP motort (programot).

PHP lekérdezés print_r() függvénnyel:

<?php
    $tomb = array($_POST);
      echo"<pre>";
            print_r($tomb);
      echo"</pre>";
?>

PHP lekérdezés foreach() ciklussal:

<?php
$tomb = array($_POST);
   foreach($tomb as $tomb02)
    {
      foreach($tomb02 as $i=>$elem02)
        {
          if($i!="selectmultiple") {echo $i." = ".$elem02."<br>";}
          else {echo "selectmultiple = ".$elem02[0]."<br>";}
        }
    }

?>



Csak szerveroldalon futó programokhoz,
mint például a PHP-is, ezt a leírást alkalmazzuk.

<head>
<!--  Következő script, elhelyezhető a head szakaszban, vagy külön js fájlban is. -->

<script language="JavaScript">
 <!--  A JavaScript kód elrejtése

function uresCheck(mezo){
  if (mezo.value != "") { return true; }
  else{
    alert("A(z) "+ mezo.name +" mező üres, nincs kitöltve!");
    return false;
  }
}

function ellenoriz(){
     if (uresCheck(document.form.neve) ) {
                    /* 
                         Kettő meghatározást láthatunk, amelyikre szükségünk van, azt alkalmazzuk:  
                              - Ha email címre megy, akkor az űrlapon felhasználó által megadott, címet kérdezzük le.
                              - Ha feldolgozóprogramnak küldjük, akkor itt kell beírni, az action URL címet.
                    */

        // 1. Email címre megy, akkor ezt a meghatározást alkalmazzuk, és a tíltást oldjuk fel. 
        
// document.form.action = "mailto:"+document.form.akcio.value;

		   
        // 2. Szerveroldali feldolgozóprogramnak megy (pl: php), akkor ezt a meghatározást alkalmazzuk.
        // URL címet itt kell megadni, nem az űrlapon, és a tíltást oldjuk fel.
        
 // document.form.action = "Ide írjuk, feldolgozó URL címét";

				
          return true;
       }
     else { return false; }
}

// -->

</script>

</head>

<body>

<form name="form" id="form" method="POST" action="nincs" onSubmit="return ellenoriz()">
<p> Neve? <input type="text" name="neve" id="neve" size="30" > </p>

<p>Kora?  <input type="text" name="kora" id="kora" size="5" > </p>

<p>
Telefonszáma <input type="text" name="telefon" id="telefon"  size="20" >
<p>

    <!-- Következő szöveg és input elem csak akkor kell, ha akció email címre megy, email címet fehasználó írja be.  -->
<p> Űrlap a következő e-mail cimre lesz, elküldve.  <br><br>
    Email cím <input type="text"  name="akcio"  id="akcio"  size="30">
</p>
<br><br>

               <input type="submit" name="submit" value="Elküld">
</form>

<body>




JavaScript programhoz, szerveren vagy otthoni számítógépen,
ezt a leírást alkalmazzuk.

<head>
<!--  Ezt a jquery script-et, a head szakaszban kell elhelyezni.  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


<!--  Következő script, elhelyezhető a head szakaszban, vagy külön js fájlban is. -->

<script>
$(document).ready(function(){	

// ------ Űrlap ellenőrzés, és adatainak kiíratása, -----
  $("#btn_urlap").click(function(){
	  
	     var torles=''; 
	     var neve=$("#neve").val();
		 
	if(neve==''){ alert("A(z) --- neve --- mező üres, nincs kitöltve!"); $("#inputok_adatai").html(torles); }
	else{
	                   $("#inputok_adatai").html(torles);
  
                       var tomb= new Array();
                       var inputok_szama = $("input").length;
                       var input_elem=$("input");
	
     // -------- Tömbbe íratjuk az adatokat.		
                        for(i=0; i<inputok_szama; i++){
                            var xx=input_elem[i].value;
                            tomb[i]=xx;
                         }

     // -------- Input adatok lekérdezése, a tömbből.	
                        for(i=0; i<inputok_szama; i++){
                                if(tomb[i] !="") { tartalom=(i+". "+tomb[i]+"<br>"); $("#inputok_adatai").append(tartalom);   }
                                 else { tartalom=(i+". Üres.<br>");  $("#inputok_adatai").append(tartalom);   }
                         }
	          }

    });

});

</script>

</head>

<body>

<form name="form" id="form">

<p> Neve? <input type="text" name="neve" id="neve" size="30" > </p>

<p>Kora?  <input type="text" name="kora" id="kora" size="5" > </p>

<p>
Telefonszáma <input type="text" name="telefon" id="telefon"  size="20" >
<p>
<br><br>
                  <input type="button"  name="btn_urlap" id="btn_urlap" value="Elküld" >
</form>

</body>


































url(Nincs-hatterkep.xxx)