Főoldalra

jQuery submit() és a select()

A submit()

Űrlapok adatai a teszt példákban, nem továbbítódnak.


Alapértelmezés szerint, űrlap Submit eleme, így működik. Most, kiegészítjük egy figyelmeztetéssel is. 
<head>
<script>
$(document).ready(function(){
    // A form elemre, egyedi id=sub02 azonosítója alpján hivatkozunk.
    $("#sub02").submit(function(){
        alert("Submit gombra kattintott.\n Űrlap adatok továbbításra kerültek.");
    });
});
</script>
</head>
<body>
<form id="sub02" action="">
  Vezetékneve: <input type="text" name="Name" value="jQery"><br>
  Lakhely címe: <input type="text" name="Cime" value="JavaScript út 12"><br>
  
  <input type="submit" value="Submit. Kattints ide!">
</form>

</body>

Ez egy teszt ürlap. Adatok nem továbbítódnak!

Vezetékneve:
Lakhely címe:





Megjegyzés:
Trigger = Aktivál; Aktiválás. Valamilyen esemény külső aktíválása.
Például, egy esemény bekövetkezésekor, meghívja (aktíválja) előző eseményt, függvényt, és módosíthatja azt.


A button gombra történő kattintás váltja ki, a submit gombot. (Trigger eseményt.) 
<head>
<script>
$(document).ready(function(){
    // A form elemre, egyedi id=sub01 azonosítója alpján hivatkozunk.
    $("#sub01").submit(function(){
      alert("A submit eseményt, egy külső elemre történő kattintással váltotta ki.\n Űrlap adatok továbbításra kerültek.");
    });
        $("#btnsub").click(function(){
           $("#sub01").submit();
        });  
});
</head>
<body>
        <form id="sub01" action="">
             Vezetékneve: <input type="text" name="Name" value="jQery"><br>
             Lakhely címe: <input type="text" name="Cime" value="JavaScript út 12">
        </form>
<button id="btnsub"> Trigger meghívja az előző eseményt, majd aktiválja a Summit eseményt. Kattints ide!</button>
</body>

Ez egy teszt ürlap. Adatok nem továbbítódnak!

Vezetékneve:
Lakhely címe:





Megakadályozzuk a submit gomb, alapértelmezett műveletét, az event.preventDefault () metódussal. 
<head>
<script>
$(document).ready(function(){
    // A form elemre, egyedi id=sub03 azonosítója alpján hivatkozunk.
    $("#sub03").submit(function(event){
        event.preventDefault();
        alert("Submit gombra kattintott.\n Űrlap hiányos kitöltése miatt,\n továbbítás megakadályozva.");
    });

});
</script>
</head>
<body>
<form id="sub03" action="">
  Vezetékneve: <input type="text" name="Name" value="jQery"><br>
  Lakhely címe: <input type="text" name="Cime" value=" "><br>
  <input type="submit" value="Submit. Kattints ide!">
</form>

</body>

Ez egy teszt ürlap. Adatok nem továbbítódnak!

Vezetékneve:
Lakhely címe:



Megjegyzés:
Elsőként el kell végezni, egy űrlap kitöltési ellenőrzést.
Ellenőrzésnél kapott eredmény alapján, if feltételben határozzuk meg, elküldést megakadályozzuk vagy nem.





A select()

Űrlapmezőkön aktiválódik, ha a szövegmező tartalmát vagy annak egy részét, kijelölték.
Alkalmazhatjuk szöveges űrlap elemeknél.

Következő példában üzenet figyelmeztet, ha az ott lévő szöveg, kijelölésre került.


Teszteljük nem űrlapmezőnél. 
<head>
<script>
$(document).ready(function(){
	$("#pelem").select(function(){
		alert(" Ön, ezen a területen, szöveget vagy szövegrészt, kijelölt!");
	});
});
</script>
</head>
<body>

<p id="pelem" > Jelöld ki ezt a szöveget, vagy csak egy részét. Nem történik semmi! Ez, nem űrlapmező!</p>




Teszteljük űrlapmezőnél. 
<head>
<script>
$(document).ready(function(){
	$("#inputelem").select(function(){
		alert(" Ön, ezen a területen, szöveget vagy szövegrészt, kijelölt!");
	});
});
</script>
</head>
<body>
<input type="text" id="inputelem" value="Jelöld ki ezt a szöveget, vagy csak egy részét." size="60">


Tetszőleges külső elemmel is kiválthatjuk, a szöveg kijelölését.
Példánkban: Egy button gombbal aktíváljuk.(Ez lesz a külső Trigger) 

<head>
<script>
$(document).ready(function(){
    $("#inp02").select(function(){
        $("#inp02").after("Szöveg kijelölve!");
    });
	
        $("#btntrigger").click(function(){
              $("#inp02").select();
        });
	
});
</script>
</head>
<body>
        <form>
              <input type="text" id="inp02" value="Ez egy input szövegmező."  size="30">
        </form>
	
<button id="btntrigger"> Trigger select esemény.  Ide kattintva is, kiválthatjuk a kijelölést.</button>
</body>