Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it L'avatar di abellos
    Registrato dal
    Feb 2002
    Messaggi
    431

    Jquery problema set focus e submit su campi form

    Ciao a tutti, questa e' la mia pagina
    codice:
    <html>
    <head>	
    	<link rel="stylesheet" href="../style.css">
    	<meta http-equiv="Cache-Control" content="no-cache">
    	<meta http-equiv="Pragma" content="no-cache">
    	<script type="text/javascript" language="javascript" src="../inc/jquery.js"></script>
    	<script language="javascript" type="text/javascript">
    	/*
    	 else if (tipoBustaValidi.indexOf($("#codBusta").val())==-1){
    		alert("Inserire un tipo busta valido");
    		$("#codBusta").focus();
    		event.preventDefault(); */
    						
    	$(document).ready(function() 
    		{ 	
    			$("#dataDocumento").focus();
    			
    			$("#codSede").val("4");
    			
    			/*
    			$("#dataDocumento").keypress(function (e) {
    				if (e.keyCode == 13) {
    					$("#ndg").focus();					
    				}
    			});
    			*/
    			
    			$('#dataDocumento').keydown(function(evento){
    				
    				var kc = (evento.keyCode ? evento.keyCode : evento.which);
    				if(kc == '13'){
    					
    					$("#ndg").focus();					
    				}
    			});
    
    			
    			$("#ndg").keydown(function (ev) {
    				if (ev.keyCode == '13') {
    					$("#ragSociale").focus();
    				}
    			});
    			
    			$("#ragSociale").keydown(function (eve) {
    				if (eve.keyCode == '13') {
    					
    					$("#frm").submit();
    				}
    			});
    			
    			var tipoBustaValidi = "101|401|501|151|801|901"
    			$("#frm").submit(function(event){				
    				event.preventDefault();
    				if ($("#codSede").val()==0){
    					alert("Attenzione selezionare una filiale");
    					$("#codSede").focus();
    					
    				} else if ($("#dataDocumento").val() == ""){
    					alert("Inserire una data");
    					$("#dataDocumento").focus();
    					
    				} else if ($("#dataDocumento").val().length > 0){
    					if (isValidDate($("#dataDocumento").val(),"dd/mm/yyyy")==false) {
    						alert("Data documento non valida");
    						$("#dataDocumento").focus();
    						
    					} else if ($("#tipoDocumento").val().length < 3){
    						alert("Inserire un tipo busta di 3 caratteri");
    						$("#tipoDocumento").focus();
    						
    					
    					}
    				} 
    
    			});
    			
    			$("#tabellaBuste input[name='spunta']").click(function(event){				
    				$(window.location).attr('href', 'db.asp?tipo=spuntaBusta&idBusta='+ $(this).attr("value"));
    			});
    			
    			$(".evidenzia").mouseover(function(){
    				var old_col = $(this).css("backgroundColor");
    				
    				if (old_col != "#bfe31a"){
    					$(this).css("backgroundColor","#ffdead");
    				}				
    			});
    			
    			$(".evidenzia").mouseout(function(){
    				var old_col = $(this).css("backgroundColor");
    				
    				if (old_col != "#bfe31a"){
    					$(this).css("backgroundColor","#FFFFFF");
    				}				
    			});
    		}
    	); 
    
    	var isValidDate = function (value, userFormat) {
    		var
    		userFormat = userFormat || 'mm/dd/yyyy', // default format
    
    		delimiter = /[^mdy]/.exec(userFormat)[0],
    		theFormat = userFormat.split(delimiter),
    		theDate = value.split(delimiter),
    
    		isDate = function (date, format) {
    			var m, d, y
    			for (var i = 0, len = format.length; i < len; i++) {
    				if (/m/.test(format[i])) m = date[i]
    				if (/d/.test(format[i])) d = date[i]
    				if (/y/.test(format[i])) y = date[i]
    			}
    			return (
    				m > 0 && m < 13 &&
    				y && y.length === 4 &&
    				d > 0 && d <= (new Date(y, m, 0)).getDate()
    			)
    		}
    
    		return isDate(theDate, theFormat)
    
    	}
    	
    	
    	</script>
    </head>
    <body>
    <br>
    
    <form action="db.asp" id="frm" method="post">
    <input type="hidden" value="inserisciBusta" name="tipo">
    <table border="0" align="center" cellpadding=2 cellspacing=0 class=tabellaBordi>
    <tr>
    <td align="center" colspan="2" class="intestazioneTab">INSERISCI UN NUOVO DOCUMENTO</td>
    </tr>
    <tr>
    <tr>
    
    <td align="right">Banca:</td>
    <td><input type="text" value="043" readOnly name="codBanca" id="codBanca" class='InputText6'></td>
    </tr>
    
    <tr>
    <td align="right">Filiale:</td>
    <td>
    <select name='codSede' id='codSede' class='SELECT6'><option value='0'>Seleziona una filiale</option><option  value='4'>Banca CRS</option></select>
    </td>
    </tr>
    
    <tr>
    <td align="right">Tipo documento:</td>
    <td><input type="text" name="tipoDocumento" id="tipoDocumento" readOnly value="DCER1" maxlength="10" class='InputText6'></td>
    </tr>
    <tr>
    <td align="right">Data firma (GG/MM/AAAA):</td>
    
    <td><input type="text" name="dataDocumento" id="dataDocumento" value="" maxlength="10" class='InputText6'></td>
    </tr>
    <tr>
    <td align="right">NDG:</td>
    
    <td><input type="text" name="ndg" id="ndg" maxlength="9" class='InputText6' value=""></td>
    </tr>
    <tr>
    <td align="right">Ragione Sociale:</td>
    
    <td><input type="text" name="ragSociale" id="ragSociale" maxlength="100" class='InputText6' value=""></td>
    </tr>
    <tr>
    <td>
    
    <input type="checkbox" value=1  name="mantieniValori">Mantieni valori 
    
    </td>
    <td align="right"><input type="submit" value="Inserisci" class="bottonePiccolo"></td>
    </tr>
    </table>
    </form>
    
    <table border="0" align="center" cellpadding="2" cellspacing="0" class="tabellaBordi" id="tabellaBuste">
    <tr>
    <td align="center" colspan="7" class="intestazioneTab">BUSTE INVIATE A SIA</td>
    </tr>
    
    
    	<tr>
    	<td align="center" colspan="7" class="fondoTab">Nessuna busta presente</td>
    	</tr>
    	
    </table>
    
    </body> </html>
    In pratica e' una maschera per inserire dei dati, quando premo invio sulle textbox vorrei che passi alla successiva e quando mi trovo sul campo ragSociale mi dovrebbe inviare i dati inseriti.

    Il passaggio da un campo al seguente funziona solamente su firefox e chrome, su IE invece nulla, ma se metto un alert all'interno di una delle funzioni keydown lo visualizza.

    Il secondo problema e' che non mi invia i dati del form, immagino sia per colpa dell'istruzione event.preventDefault(); che pero' mi serve per evitare l'invio del form alla pressione del tasto invio. Ho anche provato ad usare stopPropagation() e non mettere preventDefault() ma non funziona.
    Come risolvo la cosa?
    grazie in anticipo dell'aiuto
    Da un grande potere derivano grandi responsabilità

  2. #2
    Ciao,
    e probabile che la versione di jQuery che stai usando non supporta IE visto che comunque e un browser che non è piu supportato da nessuno, per di piu solo il 5% degli utenti nel mondo usa ancora IE, quindi penso che puoi evitare di perderci il tempo per renderlo compatibile. Ti ho incollato la versione funzionante di sotto.

    codice HTML:
    <html>
    <head> 
    <link rel="stylesheet" href="../style.css">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
    <script language="javascript" type="text/javascript">
    /*
    else if (tipoBustaValidi.indexOf($("#codBusta").val())==-1){
    alert("Inserire un tipo busta valido");
    $("#codBusta").focus();
    event.preventDefault(); */
    
    $(document).ready(function() 
    { 
    $("#dataDocumento").focus();
    
    $("#codSede").val("4");
    
    /*
    $("#dataDocumento").keypress(function (e) {
    if (e.keyCode == 13) {
    $("#ndg").focus(); 
    }
    });
    */
    
    $('#dataDocumento').keydown(function(evento){
    
    var kc = (evento.keyCode ? evento.keyCode : evento.which);
    if(kc == '13'){
    
    $("#ndg").focus(); 
    }
    });
    
    
    
    $("#ndg").keydown(function (ev) {
    if (ev.keyCode == '13') {
    $("#ragSociale").focus();
    }
    });
    
    var tipoBustaValidi = "101|401|501|151|801|901"
    
    var submit = function(){
    console.log('in') 
    if ($("#codSede").val()==0){
    alert("Attenzione selezionare una filiale");
    $("#codSede").focus();
    
    } else if ($("#dataDocumento").val() == ""){
    alert("Inserire una data");
    $("#dataDocumento").focus();
    
    } else if ($("#dataDocumento").val().length > 0){
    if (isValidDate($("#dataDocumento").val(),"dd/mm/yyyy")==false) {
    alert("Data documento non valida");
    $("#dataDocumento").focus();
    
    } else if ($("#tipoDocumento").val().length < 3){
    alert("Inserire un tipo busta di 3 caratteri");
    $("#tipoDocumento").focus();
    }
    } 
    
    
    console.log($("#codSede").val(), $("#dataDocumento").val());
    //submitExec
    };
    
    
    $("#ragSociale").keydown(function (eve) {
    if (eve.keyCode == '13') {
    submit();
    }
    });
    
    
    //$("#frm").submit(function(event){ 
    // event.preventDefault();
    // return
    //});
    
    $("#tabellaBuste input[name='spunta']").click(function(event){ 
    $(window.location).attr('href', 'db.asp?tipo=spuntaBusta&idBusta='+ $(this).attr("value"));
    });
    
    $(".evidenzia").mouseover(function(){
    var old_col = $(this).css("backgroundColor");
    
    if (old_col != "#bfe31a"){
    $(this).css("backgroundColor","#ffdead");
    } 
    });
    
    $(".evidenzia").mouseout(function(){
    var old_col = $(this).css("backgroundColor");
    
    if (old_col != "#bfe31a"){
    $(this).css("backgroundColor","#FFFFFF");
    } 
    });
    }
    ); 
    
    
    var isValidDate = function (value, userFormat) {
    var
    userFormat = userFormat || 'mm/dd/yyyy', // default format
    
    
    delimiter = /[^mdy]/.exec(userFormat)[0],
    theFormat = userFormat.split(delimiter),
    theDate = value.split(delimiter),
    
    
    isDate = function (date, format) {
    var m, d, y
    for (var i = 0, len = format.length; i < len; i++) {
    if (/m/.test(format[i])) m = date[i]
    if (/d/.test(format[i])) d = date[i]
    if (/y/.test(format[i])) y = date[i]
    }
    return (
    m > 0 && m < 13 &&
    y && y.length === 4 &&
    d > 0 && d <= (new Date(y, m, 0)).getDate()
    )
    }
    
    
    return isDate(theDate, theFormat)
    
    
    }
    
    
    </script>
    </head>
    <body>
    <br>
    
    
    <form action="db.asp" id="frm" method="post">
    <input type="hidden" value="inserisciBusta" name="tipo">
    <table border="0" align="center" cellpadding=2 cellspacing=0 class=tabellaBordi>
    <tr>
    <td align="center" colspan="2" class="intestazioneTab">INSERISCI UN NUOVO DOCUMENTO</td>
    </tr>
    <tr>
    <tr>
    
    
    <td align="right">Banca:</td>
    <td><input type="text" value="043" readOnly name="codBanca" id="codBanca" class='InputText6'></td>
    </tr>
    
    
    <tr>
    <td align="right">Filiale:</td>
    <td>
    <select name='codSede' id='codSede' class='SELECT6'><option value='0'>Seleziona una filiale</option><option value='4'>Banca CRS</option></select>
    </td>
    </tr>
    
    
    <tr>
    <td align="right">Tipo documento:</td>
    <td><input type="text" name="tipoDocumento" id="tipoDocumento" readOnly value="DCER1" maxlength="10" class='InputText6'></td>
    </tr>
    <tr>
    <td align="right">Data firma (GG/MM/AAAA):</td>
    
    
    <td><input type="text" name="dataDocumento" id="dataDocumento" value="" maxlength="10" class='InputText6'></td>
    </tr>
    <tr>
    <td align="right">NDG:</td>
    
    
    <td><input type="text" name="ndg" id="ndg" maxlength="9" class='InputText6' value=""></td>
    </tr>
    <tr>
    <td align="right">Ragione Sociale:</td>
    
    
    <td><input type="text" name="ragSociale" id="ragSociale" maxlength="100" class='InputText6' value=""></td>
    </tr>
    <tr>
    <td>
    
    
    <input type="checkbox" value=1 name="mantieniValori">Mantieni valori 
    
    
    </td>
    <td align="right"><input type="button" value="Inserisci" class="bottonePiccolo" onclick="submit()"></td>
    </tr>
    </table>
    </form>
    
    
    <table border="0" align="center" cellpadding="2" cellspacing="0" class="tabellaBordi" id="tabellaBuste">
    <tr>
    <td align="center" colspan="7" class="intestazioneTab">BUSTE INVIATE A SIA</td>
    </tr>
    
    
    
    
    <tr>
    <td align="center" colspan="7" class="fondoTab">Nessuna busta presente</td>
    </tr>
    
    </table>
    
    
    </body> </html>

  3. #3
    Utente di HTML.it L'avatar di abellos
    Registrato dal
    Feb 2002
    Messaggi
    431
    Ciao grazie, mi sei stato di aiuto!!!!
    Inoltre ho scoperto anche che per dare il focus e andare al campo successivo devo scrivere
    codice:
    $('#dataDocumento').keydown(function(evento){       
        if (evento.keyCode == '13') {     
         $("#ndg").focus();
         evento.preventDefault();
        }    
       });
    il preventDefault devo metterlo alla fine dello script altrimenti blocca tutto.
    Da un grande potere derivano grandi responsabilità

  4. #4
    Ciao,
    preventDefault(); serve per fermare l'azione che avviene di default in questo caso vabene ma lo devi mettere cosi:

    codice HTML:
    $('#dataDocumento').keydown(function(evento){ 
            evento.preventDefault();
          if(evento.keyCode =='13'){     
        $("#ndg").focus();
          }    
       });
    mentre stopPropagation(); server per fermare eventuali eventi parent,
    per esempio se hai una situazione cosi:

    <div onclick="doSomething()"><div onclick="test()"></div></div>

    codice HTML:
    var doSomething = function(){ alert('text') };
    var test = function(event){ event.stopPropagation(); //your code here }
    in questo caso la funzione doSomething non viene eseguita. Ti consiglio di scrivere javascript puro invece di usare jQuery.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.