validazione form con div tipo alert

Discussione in 'jQuery' iniziata da gabjet, 17 Maggio 2016.

  1. gabjet

    gabjet Nuovo Utente

    Registrato:
    17 Maggio 2016
    Messaggi:
    2
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Ciao, sto costruendo un form
    che mi apra dei popup tipo alert (ma più carini)
    per chiedermi i dati dei campi non compilati.

    premetto che non vorrei utilizzare il plugin alert ui.

    questo codice funzione parzialmente:
    se lascio un solo campo vuoto me lo chiede
    e i dati passano correttamente;
    ma se lascio due campi vuoti la prima volta mi chiede il dato
    e lo inserisce correttamente, la seconda volta
    inserisce il secondo dato su entrambi i campi vuoti.

    di seguito allego il codice:

    HTML:
    <!DOCTYPE>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <title>test</title>
    <script type="text/javascript" src="script/jquery-2.2.3.min.js"></script>
    <link href="stili/alert.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <?php
    if ((isset($_POST['tavolo'])) && ($_POST['tavolo']<>'')){
    	$tavolo=$_POST['tavolo'];
    	$coperti=$_POST['coperti'];
    	echo 'tavolo: '.$tavolo.'<br>
    		  coperti: '.$coperti.'<br>';
    }
    ?>
    
    <form action="test_jquery.php" method="post" name="ordine" id="ordine">
    <input class="piatto1" type="text"><input class="aggiungi1" type="button" value="+"><input class="sottrai1" type="button" value="-"><br>
    <input class="piatto2" type="text"><input class="aggiungi2" type="button" value="+"><input class="sottrai2" type="button" value="-"><br>
    <input class="piatto3" type="text"><input class="aggiungi3" type="button" value="+"><input class="sottrai3" type="button" value="-"><br>
    <label>tavolo</label><input id="tavolo" class="piatto" name="tavolo" type="text" /><br>
    <label>coperti</label><input id="coperti" class="piatto"  name="coperti" type="text" /><br>
    <input class="conferma" type="submit" value="conferma">
    
    <div class="avvisoTavolo">
    <div class="testaAvviso"></div>
    <input id="numManca" class="numManca" type="text" />
    <input name="chiudi" class="chiudi" type="submit"/>
    </div>
    
    </form>
    
    <script>
    	$('#ordine').submit(function(){
    			if ($('#tavolo').val()==''){
    				$('.avvisoTavolo').css('display','block')
    				$('#numManca').before($('#tavolo').attr('id')+'<br>');			
    				numManca.focus(tavolo);
    				
    				$('.chiudi').click(function(campo){
    					var numTavolo = $(numManca).val();
    					var campo=$(this).attr('id');
    					$('#tavolo').val(numTavolo);
    					$('.avvisoTavolo').css('display','none');
    				});
    				
    				$("#ordine").keypress(function(e) {
      					if (e.which == 13) {
    					var numTavolo = $(numManca).val();
    					var campo=$(this).attr('id');
    					$('#tavolo').val(numTavolo);
    					$('.avvisoTavolo').css('display','none');
    				 	}
    				});
    				
    				return false;
    			}
    
    			if ($('#coperti').val()==''){
    				$('.avvisoTavolo').css('display','block')
    				$('#numManca').before($('#coperti').attr('id')+'<br>');
    				numManca.focus('coperti');
    				
    				$("#ordine").keypress(function(e) {
      					if (e.which == 13) {
    					var numTavolo = $(numManca).val();
    					var campo=$(this).attr('id');
    					$('#coperti').val(numTavolo);
    					$('.avvisoTavolo').css('display','none');
    				 	}
    				});
    					
    				$('.chiudi').click(function(campo){
    					var numTavolo = $(numManca).val();
    					var campo=$(this).attr('id');
    					$('#coperti').val(numTavolo);
    					$('.avvisoTavolo').css('display','none');
    				});
    				return false;
    			}
    		});
    </script>
    
    </body>
    </html>
    
    spero qualcuno possa aiutarmi

    grazie
    Gabjet
     
Sto caricando...

Condividi questa Pagina