Jquery alert pomoc ili predlog

Jquery alert pomoc ili predlog 17.09.2013. u 01:24 · pre 159 meseci #1

Za upozorenje npr. da mi neko polje u formi mora biti popunjeno koristio sam

Code (php):

if(empty($ime)){

          $error = 'Polje ime mora biti popunjeno!';

          }

i to mi se ispisuje kad mi polje Ime ostane prazno a ja kliknem Submit preko koda

Code:

<?php echo $error; ?>

Sad sam hteo da umesto toga stavim neki Jquery plugin. Pokusao sam sa Zebra Dialog-om al nisam uspeo. Alert Zebra Dialog-a mogu da pozovem na click pomocu

Code:

<a href="javascript:void(0)" id="example1">click</a>

al ne znam kako da mi se alert pojavi npr. kad mi je prazno polje Ime.
Znam da mogu pozvati alert sa

Code (php):

if(empty($ime)){

            echo ("<script>window.alert('". $poruka ."')</script>");

       }

al mi se ne svidja izgled. Da li neko zna kako da postavim Zebra Dialog ili neki koji slicno izgleda

Re: Jquery alert pomoc ili predlog 17.09.2013. u 08:14 · pre 159 meseci #2

Ukoliko koristiš jQuery, možeš koristiti $('input.obavezno').blur koji se poziva svaki put kad se napusti polje za unos teksta. Tada se proverava da li je to polje prazno. Ako jeste, prikazuje se podrazumevani alert za javascript. Kao što možeš videti stavio sam da se to odrađuje samo za input polja koja imaju klasu obavezno, kako ti se alert ne bi pojavljivao za inpute koji mogu ostati prazni. Ako ne želiš nijedan input da bude prazan, onda možeš obrisati klasu.

Code (html):

<input type="text" class="obavezno" />

 

Code (javascript):

$('input.obavezno').blur(function(){

    if($(this).val() == ''){

        $.Zebra_Dialog('Ovo polje mora biti popunjeno!');

    }

});

Takođe možeš na primer obojiti border inputa kada se prikaže alert. Dodaj samo klasu ovako:

Code (javascript):

$('input.obavezno').blur(function(){

    if($(this).val() == ''){

        $(this).addClass('greska-praznopolje');

        $.Zebra_Dialog('Ovo polje mora biti popunjeno!');

    }

});

Code:

.greska-praznopolje{
border: 1px solid red;
}

Možeš istu proveru odraditi i kad se pokuša submit forme:

Code (javascript):

$('form').submit(function(e){

    e.preventDefault();

    $(this).find('input.obavezno').each( function(){

        if($(this).val() == ''){

            $(this).addClass('greska-praznopolje');

            $.Zebra_Dialog('Ovo polje mora biti popunjeno!');

            return false;

        }

    });

});

Re: Jquery alert pomoc ili predlog 17.09.2013. u 09:29 · pre 159 meseci #3

Dejane, hvala na detaljnom objašnjenju, al meni kao početniku ni sa ovim nije uspelo da odradim ovo. Evo koda moje stranice u kojoj sam pokušao da mi input ne može ostati prazan

Code (html):

<html>

    <head>

        <link rel="stylesheet" href="reset.css" type="text/css">

        <link rel="stylesheet" href="zebra_dialog.css" type="text/css">

        <link rel="stylesheet" href="style.css" type="text/css">

          <script type="text/javascript" src="jquery-1.9.1.js"></script>

          <script type="text/javascript" src="zebra_dialog.js"></script>

          <script type="text/javascript" src="core.js"></script>

<script>

          $('input.obavezno').blur(function(){

          if($(this).val() == ''){

        $.Zebra_Dialog('Ovo polje mora biti popunjeno!');

    }

});

</script>

 </head>

<body>

<form>

<input type="text" class="obavezno">

</form> 

    </body>

</html>

A ovo je kod gdje sam pokušao da mi se greška ispiše posle submita

Code (html):

<html>

    <head>

        <link rel="stylesheet" href="reset.css" type="text/css">

        <link rel="stylesheet" href="zebra_dialog.css" type="text/css">

        <link rel="stylesheet" href="style.css" type="text/css">

          <script type="text/javascript" src="jquery-1.9.1.js"></script>

          <script type="text/javascript" src="zebra_dialog.js"></script>

          <script type="text/javascript" src="core.js"></script>

<script>

          $('form').submit(function(e){

    e.preventDefault();

    $(this).find('input.obavezno').each( function(){

        if($(this).val() == ''){

            $.Zebra_Dialog('Ovo polje mora biti popunjeno!');

            return false;

        }

    });

});

</script>

 </head>

<body>

<form>

<input type="text" class="obavezno">

<input type="submit">

</form> 

    </body>

</html>

Gde grešim?

Re: Jquery alert pomoc ili predlog 17.09.2013. u 10:07 · pre 159 meseci #4

Prebaci <script>...</script> ispred </body> zato što ti javascript kod mora biti posle kreiranja html inputa. Kada je pre inputa on se izvršava ali ne vidi input pa se ništa ne dešava jer se input tek posle kreira.

Ili možeš promeniti javascript da izgleda ovako:

Code (javascript):

$( document ).ready(function() {

     $('input.obavezno').blur(function(){

          if($(this).val() == ''){

               $.Zebra_Dialog('Ovo polje mora biti popunjeno!');

          }

     });

});

Kada je kod unutar $( document ).ready(function() {}, on se izvršava tek kada se sav HTML učita, u ovom našem slučaju HTML input.

Re: Jquery alert pomoc ili predlog 17.09.2013. u 11:05 · pre 159 meseci #5

Hvala Dejane, verovatno sam dosadan kao početnik al imam još dva pitanja... Naime, želeo bih da mi npr. u dva polja pišu različite poruke

Code (html):

<html>

    <head>

        <link rel="stylesheet" href="reset.css" type="text/css">

        <link rel="stylesheet" href="zebra_dialog.css" type="text/css">

        <link rel="stylesheet" href="style.css" type="text/css">

          <script type="text/javascript" src="jquery-1.9.1.js"></script>

          <script type="text/javascript" src="zebra_dialog.js"></script>

          <script type="text/javascript" src="core.js"></script>

 </head>

<body>

<form>

<input type="text" class="obavezno">

<input type="text" class="obavezno1">

<input type="submit">

</form> 

</div>

    </body>

     <script type="text/javascript">

  $('form').submit(function(e){

    e.preventDefault();

    $(this).find('input.obavezno').each( function(){

        if($(this).val() == ''){

            $.Zebra_Dialog('Prvo polje mora biti popunjeno!');

            return false;

        }

    });

});

</script>

<script type="text/javascript">

  $('form').submit(function(e){

    e.preventDefault();

    $(this).find('input.obavezno1').each( function(){

        if($(this).val() == ''){

            $.Zebra_Dialog('Drugo polje mora biti popunjeno!');

            return false;

        }

    });

});

</html>

i sad ako oba polja nisu popunjena i kliknem se submit, pojave se dva upozorenja, jedno preko drugog i blokiraju stranicu. Da li je moguće da se pojavi samo jedno upozorenje npr za prvo polje koje nije popunjeno iako i drugo nije popunjeno i ono sadrži različitu poruku.
I drugo pitanje, pre nego postavim Zebra dialog i kliknem Submit podaci koji su mi unešeni u polja preoslede se, kad stavim dialog posle klika na submit podaci se ne prosleđuju, samo proverava da li su sva polja popunjena...

Re: Jquery alert pomoc ili predlog 17.09.2013. u 11:57 · pre 159 meseci #6

Nemoj da ponavljaš isti javascript kod dva ili više puta. Uvek gledaj da postojeći kod prilagodiš svojoj želji.

Dodavaj script tag pre </body> a ne posle.

1. To što misliš možeš odraditi na primer tako što ćeš inputu dodati atribut title i onda preuzimati tu vrednost preko javascripta.
2. Falilo je u kodu submit forme ukoliko nijedno polje nije prazno. Dodao sam. Pogledaj sad:

Code (html):

<html>

    <head>

        <link rel="stylesheet" href="reset.css" type="text/css">

        <link rel="stylesheet" href="zebra_dialog.css" type="text/css">

        <link rel="stylesheet" href="style.css" type="text/css">

          <script type="text/javascript" src="jquery-1.9.1.js"></script>

          <script type="text/javascript" src="zebra_dialog.js"></script>

          <script type="text/javascript" src="core.js"></script>

 </head>

<body>

<form>

Ime: <input type="text" class="obavezno" title="ime"><br/>

Prezime: <input type="text" class="obavezno" title="prezime"><br/>

<input type="submit">

</form> 

</div>

     <script type="text/javascript">

  $('form').submit(function(e){

    /* SPREČI SUBMIT FORME DOK NE ODRADIMO PROVERU */

    e.preventDefault();

    /* PROVERI DA LI POSTOJI NEKI PRAZAN INPUT KOJI JE PREKO KLASE .obavezno OZNAČEN KAO OBAVEZAN. AKO POSTOJI, PRIKAŽI ALERT I PREKINI DALJE IZVRŠAVANJE. */

    $(this).find('input.obavezno').each( function(){

        if($(this).val() == ''){

            $.Zebra_Dialog('Polje' + $(this).attr('title') + ' mora biti popunjeno!');

            return false;

        }

    });

    /* AKO NE POSTOJI NIJEDAN INPUT KOJI JE PRAZAN, ODRADI SUBMIT FORME */

    $(this).submit();

});

</script>

</body>

</html>

Re: Jquery alert pomoc ili predlog 17.09.2013. u 12:17 · pre 159 meseci #7

Potpuno sam razumeo tvoje sugestije i tvoj kod, al kad tvoj kod iskopiram i isprobam nesto se čudno desava. Ako neko polje ostane nepopunjeno i kliknem submit, pojavi se poruka sa zakašnjenjem, koja se ne miče kad se klikne na Ok. Isto tako ako su oba polja popunjena kada se klikne na submit ništa se ne dešava, ne prosleđuju se podaci...

Re: Jquery alert pomoc ili predlog 17.09.2013. u 13:51 · pre 159 meseci #8

Napravio sam grešku u JS kodu. Probaj ovako:

Code (javascript):

$('form').submit(function(e){

    $(this).find('input.obavezno').each( function(){

        if($(this).val() == ''){

            e.preventDefault();

            $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti popunjeno!');

            return false;

        }

    });

});

Prethodni kod je pozivanjem $(this).submit(); pravio beskonačnu petlju. Tako da se sada e.preventDefault(); i return false; pozivaju samo ako se pronađe prazno polje i nema beskonačne petlje.

Naravno podrazumeva se da za input polja moraš dodati name atribut kako bi se vrednosti prosledile. Takođe za form tag moraš dodati action i method.

Re: Jquery alert pomoc ili predlog 17.09.2013. u 14:41 · pre 159 meseci #9

Hvala, na svemu to je to. Da li je moguće ovako kombinovati input sa select-om. Npr. da imam dva input polja i dva select polja, i da mi javlja da i select mora biti odabrano. U redu je kad nisu izabrana oba select-a a jesu oba input-a, al kad nije izabrano jedno input polje i jedna select javljaju se dve poruke jedna preko druge i blokiraju stranu. Sam to ne umem rešiti...

Code (html):

<html>

    <head>

        <link rel="stylesheet" href="reset.css" type="text/css">

        <link rel="stylesheet" href="zebra_dialog.css" type="text/css">

          <script type="text/javascript" src="jquery-1.9.1.js"></script>

          <script type="text/javascript" src="zebra_dialog.js"></script>

 </head>

<body>

<form>

Ime: <input type="text" class="obavezno" title="ime"><br/>

Prezime: <input type="text" class="obavezno" title="prezime"><br/>

<select class="obavezno1" title="Slovo">

          <option value=""></option>

          <option value="a">A</option>

          <option value="b">B</option>

       </select> <br/>

        <select class="obavezno1" title="broj">

          <option value=""></option>

          <option value="jedan">Jedan</option>

          <option value="dva">Dva</option>

       </select> <br/>

<input type="submit">

</form>

</div>

     <script type="text/javascript">

  $('form').submit(function(e){

    $(this).find('input.obavezno').each( function(){

        if($(this).val() == ''){

            e.preventDefault();

            $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti popunjeno!');

            return false;

        }

    });

});

  $('form').submit(function(e){

    $(this).find('select.obavezno1').each( function(){

        if($(this).val() == ''){

            e.preventDefault();

            $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti popunjeno!');

            return false;

        }

    });

});

</script>

</body>

</html>

Re: Jquery alert pomoc ili predlog 17.09.2013. u 15:20 · pre 159 meseci #10

Zato što dupliraš isti JS kod, zato ti se dupliraju i poruke. Stavi i select i input zajedno u jedan kod i nemoj koristiti različite klase. Dakle ovako:

Code (javascript):

$('form').submit(function(e){

    $(this).find('input.obavezno, select.obavezno').each( function(){

        if($(this).val() == ''){

            e.preventDefault();

            $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti popunjeno!');

            return false;

        }

    });

});

Ili još jednostavnije ti je da samo filtriraš polja preko klase, ovako:

Code (javascript):

$('form').submit(function(e){

    $(this).find('.obavezno').each( function(){

        if($(this).val() == ''){

            e.preventDefault();

            $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti popunjeno!');

            return false;

        }

    });

});

Re: Jquery alert pomoc ili predlog 17.09.2013. u 20:51 · pre 159 meseci #11

Hvala, ne znam šta drugo da kažem. Sad sam neke stvari mogu da menjam. Interesuje me da li idem u pravom smeru i da li je to moguće...
Naime ako hoću da se u svakom iskačućem prozoru ispiše druga poruka mogu da tu celu poruku stavim u title a da mi onda red u JS koji ispisuje poruku izgleda

Code (javascript):

$.Zebra_Dialog($(this).attr('title'));

To radi, al me interesuje da li može, probao sam al nisam uspeo da to rešim pomoću funkcije if, da title ostane kao do sada a da u JS uradim nešto tipa

Code (javascript):

$('form').submit(function(e){

    $(this).find('.obavezno').each( function(){

        if($(this).val() == ''){

            e.preventDefault();

               if($(this).attr('title') == 'ime'){

               $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti popunjeno!');

               }

               else{

               $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti izabrano!');

               }

            return false;

        }

    });

});

i pokušao sam da ovu reč koju vučem iz title napišem npr. kao bold al nisam uspeo

prvo sam mislio da title-u kao dodam klasu

Code (javascript):

$(this).attr('title').addClass('ureditititle');

i onda to srediti preko css, al nisam uspeo i drugi, takođe neuspešan pokušaj je bio

Code (javascript):

$(this).attr('title').css("font-weight", "bold")

ili

Code (javascript):

$(this).attr('title').style("font-weight", "bold")

Interesuje me šta je od ovoga moguće i gde grešim...

Re: Jquery alert pomoc ili predlog 19.09.2013. u 11:34 · pre 159 meseci #12

Naravno da možeš dodavati if na takav način. $(this).attr('title') će ti uvek vraćati tekst koji je u title atributu tako da ga slobodno možeš proveravati da li je jednak nekoj vrednosti.

Atribute ne možeš stilizovati nikako. $(this).attr('title') vraća običan tekst koji ne možeš stilizovati.
Stilizovati možeš samo tagove, nikako njihove atribute. Dakle ovo je ispravno: $(this).css("font-weight", "bold") a ovo nije: $(this).attr('title').css("font-weight", "bold") jer se nijedan atribut taga ne može stilizovati.

Jedino rešenje je da html ubaciš u sam sadržaj zebra dialoga a da title ostane suvi tekst. Na primer ovako:

Code (javascript):

$.Zebra_Dialog('Polje <strong>' + $(this).attr('title') + '</strong> mora biti popunjeno!');

Re: Jquery alert pomoc ili predlog 19.09.2013. u 12:45 · pre 159 meseci #13

Ovo oko stilizovanja sam video. Pretpostavio sam da mogu preko if da napravim različite poruke al ne znam gde grešim u kodu. Hteo sam npr. da kad se ne izabere Ime da se pojavi jedna poruka a kad se nešto drugo izabere da se pojavi neka druga poruka. Nisam otkrio gde grešim...

Code (javascript):

$('form').submit(function(e){

    $(this).find('.obavezno').each( function(){

        if($(this).val() == ''){

            e.preventDefault();

               if($(this).attr('title') == 'ime'){

               $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti popunjeno!');

               }

               else{

               $.Zebra_Dialog('Polje ' + $(this).attr('title') + ' mora biti izabrano!');

               }

            return false;

        }

    });

});

Re: Jquery alert pomoc ili predlog 19.09.2013. u 12:56 · pre 159 meseci #14

Mora da radi. Moraš paziti na velika i mala slova. Ime nije jednako sa ime. Pozovi običan alert nek ti ispiše vrednost i na taj način testiraj..

Takođe predlažem ti da svakom polju dodeliš atribut id i da vršiš proveru preko id a ne title. Dakle ovako: if($(this).attr('id') == 'jedinsveni-id-polja'){...}

Forum kao aplikacija na telefonu

Srodne teme