[Javascript] Verifica calcolo prima di fare insert

Max61

Utente Attivo
2 Mar 2014
677
3
18
Salve, sto cercando di visualizzare su un alert il risultato della differenza tra l'ora di ingresso e l'ora di uscita prima che il dato venga inserito nel DB, infatti i dati dovrebbero essere presi direttamente dai campi di input del form, ma al solito non mi riesce.
I campi sono: oraout_feriale - orain_feriale - oraout_festive - orain_festive
ho trovato questo esempio in rete, penso possa fare al caso mio ma non riesco a passargli i valori dei campi del form, qualcuno sa darmi una mano?
PHP:
function conferma(){
var time = new Date("2017-02-19 07:44:00Z");
    console.log(time);
    console.log(time.getTime());
    var time2 = new Date("2017-03-31 04:23:00Z");
    console.log(time2);
    console.log(time2.getTime());
 
    var diffMs = (time2 - time); // milliseconds between
    var diffDays = Math.floor(diffMs / 86400000); // days
    var diffHrs = Math.floor((diffMs % 86400000) / 3600000); // hours
    var diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000); // minutes
   alert(" Hai fatto: " + diffHrs + " ore, " + diffMins + " minuti");
     }
praticamente dovrei sostituire questo
PHP:
var time = new Date("2017-02-19 07:44:00Z");
con il mio campo
PHP:
$ora_in
e questo
PHP:
var time2 = new Date("2017-03-31 04:23:00Z");
con
PHP:
$ora_out
I campi dove inserisco l'orario '$ora_in e $ora_out' sono campi 'time' con il formato 00:00:00.
Ho fatto varie prove ma non ci riesco
Grazie
Max61
 

marino51

Utente Attivo
28 Feb 2013
2.904
160
63
Lombardia
penso ti sia facile aggiustare il mio esempio,
prova entrambi i casi conferma e annulla
HTML:
<form class="form-contact" action="" method="post" enctype="multipart/form-data" onsubmit="return checkTheForm(this)">
    <p><span class="star">*</span> <span style="font-size:0.8em">Campi obbligatori</span></p>

    <p><span class="star">*</span>
       <label>dataIN : </label>
       <input type="text" class="field" id="dataIN" name="dataIN" value="2017-02-19 07:44:0Z" required />
    </p>

    <p><span class="star">*</span>
       <label>dataOUT : </label>
       <input type="text" class="field" id="dataOUT" name="dataOUT" value="2017-02-28 04:23:02" required />
    </p>  

    <div class="button-container">
        <input class="button" type="reset"  value="Reset">
        <input class="button" type="submit" value="Send">
    </div>
</form>

<script>
function checkTheForm(theForm)
{
    dataIN  = theForm.dataIN.value;
    dataOUT = theForm.dataOUT.value;
    var res = conferma(dataIN, dataOUT);
    if (res)
        {
            return true;
        }
        else
        {
            alert("Per favore reinserisci i valori");
            return false;
        }
}

function conferma(In, Out)
{
    var time1 = new Date(In);
    console.log(time1);
    console.log(time1.getTime());

    var time2 = new Date(Out);
    console.log(time2);
    console.log(time2.getTime());
 
    var diffMs   = (time2 - time1);                                     // milliseconds between
    var diffDays = Math.floor(diffMs / 86400000);                       // days
    var diffHrs  = Math.floor((diffMs % 86400000) / 3600000);           // hours
    var diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000); // minutes

    var result = confirm(" Hai fatto : " + diffDays + " giorni, " + diffHrs + " ore, " + diffMins + " minuti");
    return result;
}
</script>
 

Max61

Utente Attivo
2 Mar 2014
677
3
18
Ciao Marino51, grazie per l'aiuto, ma non mi calcola nulla NaN giorni, NaN ore ecc., inoltre se clicco su annulla mi fa l'insert.
I campi di input sono nella pagina di Insert, che tramite il pulsante 'Salva' richiama il File di script JScript, è li che ho messo il codice, va bene?
Allego con modifiche
PHP:
function checkTheForm(theForm)
{
    orain_feriale  = theForm.orain_feriale.value;
    oraout_feriale = theForm.oraout_feriale.value;
    var res = conferma(orain_feriale, oraout_feriale);
    if (res)
        {
            return true;
        }
        else
        {
            alert("Per favore reinserisci i valori");
            return false;
        }
}

function conferma(orain_feriale, oraout_feriale)
{
    var time1 = new Date(orain_feriale);
    console.log(time1);
    console.log(time1.getTime());

    var time2 = new Date(oraout_feriale);
    console.log(time2);
    console.log(time2.getTime());
 
    var diffMs   = (time2 - time1);                                     // milliseconds between
    var diffDays = Math.floor(diffMs / 86400000);                       // days
    var diffHrs  = Math.floor((diffMs % 86400000) / 3600000);           // hours
    var diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000); // minutes

    var result = confirm(" Hai fatto : " + diffDays + " giorni, " + diffHrs + " ore, " + diffMins + " minuti");
    return result;
}
Sicuramente sbaglio qualcosa...
 

marino51

Utente Attivo
28 Feb 2013
2.904
160
63
Lombardia
mi sembra di capire che lavori con delle ore non con data e ora,
le ore in formato "hh:mm:ss"
ho riadattato lo script ed inserito dei controlli,

il massimo numero di ore lavorate ammesse é 11 ma può essere modificato in questa riga
HTML:
var MAXtime = Math.floor(11 * 3600000);  // max working hours
se viene inserita un'ora di uscita inferiore all'ora d' entrata si considera il turno di notte
HTML:
if (dataIN > dataOUT)
{
    dataOUT = "2000-01-02 "+OUT;         // night shift
}
ti posto l'intero script, puoi eseguirlo senza modifiche,
provare orari differenti
e valutare possibili modifiche
solo dopo aver "fissato" lo script inseriscilo nel tuo ambiente di lavoro
in questo modo sappiamo se sbaglia, dove e perchè

HTML:
<form class="form-contact" action="" method="post" enctype="multipart/form-data" onsubmit="return checkTheForm(this)">
    <p><span class="star">*</span> <span style="font-size:0.8em">Campi obbligatori</span></p>

    <p><span class="star">*</span>
       <label>ora ingresso feriale : </label>
       <input type="text" class="field" id="orain_feriale" name="orain_feriale" value="07:44:0Z" required />
    </p>

    <p><span class="star">*</span>
       <label>ora uscita feriale : </label>
       <input type="text" class="field" id="oraout_feriale" name="oraout_feriale" value="04:23:02" required />
    </p>   

    <div class="button-container">
        <input class="button" type="reset"  value="Reset">
        <input class="button" type="submit" value="Send">
    </div>
</form>

<script>
function checkTheForm(theForm)
{
    var oraIN  = theForm.orain_feriale.value;
    var oraOUT = theForm.oraout_feriale.value;

    var res = conferma(oraIN, oraOUT);
    if (res)
        {
            return true;
        }
        else
        {
            alert("Per favore reinserisci le ore feriali");
            return false;
        }
}

function conferma(IN, OUT)
{
    var MAXtime = Math.floor(11 * 3600000);  // max working hours

    var dataIN  = "2000-01-01 "+IN;
    var dataOUT = "2000-01-01 "+OUT;

    if (dataIN > dataOUT)
    {
        dataOUT = "2000-01-02 "+OUT;         // night shift
    }

    var time1 = new Date(dataIN);
    console.log(time1);
    console.log(time1.getTime());

    var time2 = new Date(dataOUT);
    console.log(time2);
    console.log(time2.getTime());
 
    var diffMs   = (time2 - time1);          // milliseconds between

    if (diffMs > MAXtime)
    {
        return false;
    }

    var diffDays = Math.floor(diffMs / 86400000);                       // days
    var diffHrs  = Math.floor((diffMs % 86400000) / 3600000);           // hours
    var diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000); // minutes

    var result = confirm(" Hai fatto : " + diffDays + " giorni, " + diffHrs + " ore, " + diffMins + " minuti");
    return result;
}
</script>
 

Max61

Utente Attivo
2 Mar 2014
677
3
18
Ciao Marino51 e grazie, adesso inserisce direttamente nel db gli orari, ma non mostra nessun avviso prima dell'insert
 

marino51

Utente Attivo
28 Feb 2013
2.904
160
63
Lombardia
hai fatto qualche errore nell'inserirlo nel tuo codice,

ma hai provato lo script che ti ho postato senza modifiche, funziona tutto come vorresti in termini di controlli ?
 

Max61

Utente Attivo
2 Mar 2014
677
3
18
Si sembra vada tutto bene, l'unica modifica da fare se è possibile è aggiungere altri due campi se non è troppo complicato: $orain_festivo e $oraout_festivo
L'unica modifica che ho fatto è stata di portare fuori la parte di codice relativa ai campi, altrimenti la pagina non me li vede...può essere questo il problema per cui non parte il messaggio?
PHP:
<p><span class="star">*</span>
       <label>ora ingresso feriale : </label>
       <input type="text" class="field" id="orain_feriale" name="orain_feriale" value="08:00:00" required />
    </p>

    <p><span class="star">*</span>
       <label>ora uscita feriale : </label>
       <input type="text" class="field" id="oraout_feriale" name="oraout_feriale" value="10:00:00" required />
    </p>  

    <div class="button-container">
        <input class="button" type="reset"  value="Reset">
        <input class="button" type="submit" value="Send">
    </div>
</form>

<script>
<form class="form-contact" action="" method="post" enctype="multipart/form-data" onsubmit="return checkTheForm(this)">
    <p><span class="star">*</span> <span style="font-size:0.8em">Campi obbligatori</span></p>

<script>
function checkTheForm(theForm)
{
    var oraIN  = theForm.orain_feriale.value;
    var oraOUT = theForm.oraout_feriale.value;

    var res = conferma(oraIN, oraOUT);
    if (res)
        {
            return true;
        }
        else
        {
            alert("Per favore reinserisci le ore feriali");
            return false;
        }
}

function conferma(IN, OUT)
{
    var MAXtime = Math.floor(11 * 3600000);  // max working hours

    var dataIN  = "2000-01-01 "+IN;
    var dataOUT = "2000-01-01 "+OUT;

    if (dataIN > dataOUT)
    {
        dataOUT = "2000-01-02 "+OUT;         // night shift
    }

    var time1 = new Date(dataIN);
    console.log(time1);
    console.log(time1.getTime());

    var time2 = new Date(dataOUT);
    console.log(time2);
    console.log(time2.getTime());
 
    var diffMs   = (time2 - time1);          // milliseconds between

    if (diffMs > MAXtime)
    {
        return false;
    }

    var diffDays = Math.floor(diffMs / 86400000);                       // days
    var diffHrs  = Math.floor((diffMs % 86400000) / 3600000);           // hours
    var diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000); // minutes

    var result = confirm(" Hai fatto : " + diffDays + " giorni, " + diffHrs + " ore, " + diffMins + " minuti");
    return result;
}
</script>
 

marino51

Utente Attivo
28 Feb 2013
2.904
160
63
Lombardia
</form>

<
script>
<
form class="form-contact" action="" method="post" enctype="multipart/form-data" onsubmit="return checkTheForm(this)">
<
p><span class="star">*</span> <span style="font-size:0.8em">Campi obbligatori</span></p>

<
script>
forse hai ribaltato qualche riga, rispetto alla posizione naturale

in ogni caso ti posto lo script con ore feriali e festive
per favore fai copia e incolla senza sbagliare,
provalo, vedi come funziona
attento se le ore vanno bene viene richiamato lo script per scrivere nel db, dovrai mettere il nome giusto
quando lo vedi funzionare realmente e ti sembra una soluzione positiva,
inserisci lo script nel tuo ambiente
HTML:
<form action="ScriviNelDB.php" method="post" onsubmit="return checkTheForm(this)">

    <p>
       <label>ora ingresso feriale : </label>
       <input type="text" class="field" id="orain_feriale" name="orain_feriale" value="04:44:0Z" required />
    </p>

    <p>
       <label>ora uscita feriale : </label>
       <input type="text" class="field" id="oraout_feriale" name="oraout_feriale" value="11:23:02" required />
    </p>

    <p>
       <label>ora ingresso festivo : </label>
       <input type="text" class="field" id="orain_festivo" name="orain_festivo" value="04:44:0Z" required />
    </p>

    <p>
       <label>ora uscita festivo : </label>
       <input type="text" class="field" id="oraout_festivo" name="oraout_festivo" value="11:23:02" required />
    </p>

    <div class="button-container">
        <input class="button" type="reset"  value="Reset">
        <input class="button" type="submit" value="Send">
    </div>
</form>

<script>
function checkTheForm(theForm)
{
    var oraIN, oraOUT, res;

    oraIN  = theForm.orain_feriale.value;
    oraOUT = theForm.oraout_feriale.value;
    res    = conferma(oraIN, oraOUT, "feriali");
    if (!res) { return false; }

    oraIN  = theForm.orain_festivo.value;
    oraOUT = theForm.oraout_festivo.value;
    res    = conferma(oraIN, oraOUT, "festive");
    if (!res) { return false; }

    return true;
}

function conferma(IN, OUT, myTYPE)
{
    var MAXtime = Math.floor(11 * 3600000);  // max working hours

    var dataIN  = "2000-01-01 "+IN;
    var dataOUT = "2000-01-01 "+OUT;

    if (dataIN > dataOUT)
    {
        dataOUT = "2000-01-02 "+OUT;         // night shift
    }

    var time1 = new Date(dataIN);
    // console.log(time1);
    // console.log(time1.getTime());

    var time2 = new Date(dataOUT);
    // console.log(time2);
    // console.log(time2.getTime());
 
    var diffMs   = (time2 - time1);          // milliseconds between

    if (diffMs > MAXtime)
    {
        alert("Hai superato le ore lavorabili "+myTYPE);
        return false;
    }

    var diffDays = Math.floor(diffMs / 86400000);                       // days
    var diffHrs  = Math.floor((diffMs % 86400000) / 3600000);           // hours
    var diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000); // minutes

    var result = confirm(myTYPE+" : " + diffDays + " giorni, " + diffHrs + " ore, " + diffMins + " minuti");
    if (!result)
    {
        alert("Per favore reinserisci le ore "+myTYPE);
        return false;
    }
    return true;
}
</script>
 

Max61

Utente Attivo
2 Mar 2014
677
3
18
Ciao Marino51, il script è PERFETTO, soltanto non riesco ad armonizzarlo con il resto della pagina php, infatti quando vado a fare l'inserimento nel DB mi elenca tutti i campi che non trova nella pagina di inserimento dati e invece glieli passo tutti perchè senza questo script funziona perfettamente.
Allego errore e pagina php
Notice: Undefined index: mese in C:\xampp\htdocs\GestioneOrario\views\InserisciOrario.php on line 56
Notice
: Undefined index: anno in C:\xampp\htdocs\GestioneOrario\views\InserisciOrario.php on line 57
Notice
: Undefined index: nominativo in C:\xampp\htdocs\GestioneOrario\views\InserisciOrario.php on line 60
Notice
: Undefined index: nominativo in C:\xampp\htdocs\GestioneOrario\views\InserisciOrario.php on line 66
Notice
: Undefined index: nominativo in C:\xampp\htdocs\GestioneOrario\views\InserisciOrario.php on line 67
Notice
: Undefined index: nominativo in C:\xampp\htdocs\GestioneOrario\views\InserisciOrario.php on line 68
Notice
: Undefined index: orain_festive in C:\xampp\htdocs\GestioneOrario\views\InserisciOrario.php on line 74
Notice
: Undefined index: oraout_festive in C:\xampp\htdocs\GestioneOrario\views\InserisciOrario.php on line 75
Notice
: Undefined index: matricola in C:\xampp\htdocs\GestioneOrario\views\InserisciOrario.php on line 76
Notice
: Undefined index: livello in C:\xampp\htdocs\GestioneOrario\views\InserisciOrario.php on line 77
Notice
: Undefined index: turno in C:\xampp\htdocs\GestioneOrario\views\InserisciOrario.php on line 78
Notice
: Undefined index: data in C:\xampp\htdocs\GestioneOrario\views\InserisciOrario.php on line 79
Questa è la pagina completa, sicuramente va rivisto qualcosa affinchè funzioni...
Grazie
Max61
 

Allegati

marino51

Utente Attivo
28 Feb 2013
2.904
160
63
Lombardia
ho rinominato lo script con estensione del file ".php" e l'ho richiamato da IE11,
ho dovuto cambiare il separatore delle date da "-" a "/"
HTML:
    var dataIN  = "2000/01/01 "+IN;
    var dataOUT = "2000/01/01 "+OUT;

    if (dataIN > dataOUT)
    {
        dataOUT = "2000/01/02 "+OUT;         // night shift
    }
ho quindi ottenuto
upload_2019-2-22_21-36-55.png

upload_2019-2-22_21-37-47.png


viene passato il risultato allo script che dovrebbe aggiornare il db
upload_2019-2-22_21-39-7.png


ora dici che messo nel tuo script di 443 ( quattrocento quaranta tre ) righe, hai problemi
all'interno si leggono anche queste righe
Codice:
</form><form>
</form></td></tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<tr><td></td><td><input type=submit value="      Salva!      ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type=reset value="   Annulla   ">
<form>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="submit" value="    Home    " onclick="this.form.action='MenuPrincipale.php?var=value'"/></form></td></tr>
conta quanti form hai dichiarato e come li hai dichiarati

io non riesco ad aiutarti, se qualche altro lo vuole fare, cedo ….
 
Ultima modifica:

Max61

Utente Attivo
2 Mar 2014
677
3
18
Ok. Grazie infinite Marino51, hai fatto anche troppo, hai ragione probabilmente è un fatto di apertura e chiusura form, perché il tuo codice da solo è perfetto e lo è anche il mio senza l'aggiunta del tuo.
Grazie mille
Max61
 

Max61

Utente Attivo
2 Mar 2014
677
3
18
Ciao Marino51, ho messo tutto il mio codice dopo il form
'<form action="ScriviNelDB.php" method="post" onsubmit="return checkTheForm(this)">'
così funziona, soltanto che mi inserisce nel DB soltanto le ore feriali e mai le ore festive nonostante le calcoli correttamente nell'alert.
Nelle tue prove le inserisce? O sbaglio qualcosa io?
Grazie
Max61
 

macus_adi

Utente Attivo
5 Dic 2017
1.265
82
48
IT/SW
Prova utilizzando moment...
Derivare qualcosa di veramente proficuo da questo snippet credo sia abbastanza tranquillo, quindi buon lavoro!
Codice:
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/it.js"></script>
</head>
<body>
<form id="test_send">
   <p>
      <span class="star">*</span>
      <label>ora ingresso : </label>
      <input type="datetime-local" class="field" id="ingresso" name="data_in" value="" required />
   </p>
   <p>
      <span class="star">*</span>
      <label>ora uscita : </label>
      <input type="datetime-local" class="field" id="uscita" name="data_out" value="" required />
   </p>
   <div class="button-container">
      <input class="button" type="reset"  value="Reset">
      <input class="button" id="submit" type="button" value="Send">
   </div>
</form>
<script>
   $(document).ready(function(){
       $('#submit').on('click',function(){
          submitForm();
       });
       function submitForm(){
            var diff_date_time = moment(moment($('#uscita').val()).format('DD-MM-YYYY HH:mm'),"DD/MM/YYYY HH:mm:ss").diff(moment(moment($('#ingresso').val()).format('DD-MM-YYYY HH:mm'),"DD/MM/YYYY HH:mm:ss"));
            var durata = moment.duration(diff_date_time);
            var durata_oraria = Math.floor(durata.asHours()) + moment.utc(diff_date_time).format(":mm:ss");
           alert('Totale differenza: '+durata_oraria);
         console.log($('#test_send').serialize());
       }
   });
 
</script>
</body>
</html>
Documentazione qui: https://momentjs.com/docs/#/parsing/special-formats/