PROBLEMA HTML : Reset non voluto

Dedalo92 · 20 Ottobre 2017

Salve,
questo è il codice html:

Codice:

<head>
    <SCRIPT SRC="Script Java.js"></SCRIPT>
</head>

<body>
    <form method="get" onsubmit="return prova();">
        <input type="field" id="inserimento" size="10">
        <button type="submit">Invia</button>
    </form>
</body>

Questo è invece il codice JavaScript:

Codice:

function prova(){
    var ins=document.getElementById("inserimento");
    console.log(ins.value);
    alert("hai inserito: "+ins.value);
    inserimento.value="Hai scritto: "+ins.value;
}

Dopo l'esecuzione dello script, la pagina viene aggiornata e tutti i campi digitati dall'utente spariscono.
Lo script avrebbe il compito di far apparire nel field la stringa "hai inserito: 'parola inserita' " dopo la pressione del tasto invia!
Di fatto lo script esegue le istruzioni correttamente, ma dopo qualche frazione di secondo si aggiorna e i campi vengono resettati.

In che modo posso modificare il documento senza effettuare il refresh ed evitare la perdita delle modifiche eseguite dallo script?

faudiio · 20 Ottobre 2017

ciao, quello che stai cercando di effettuare è una particolare funzionalità di angularjs e angular(ben diverso da angularjs) che permette l'associazione di un valore ad uno scope. Lo scope è un semplice oggetto che porta con sé dei dati e permette di popolare la pagina con tali dati passati dal javascript. Al click del pulsante tu effettui una submit, quindi i dati vengono inviati al server, difatti non potrai mai vederli dopo la submit. per poter aggiornare il valore di un campo senza effettuare una submit devi utilizzare la più semplice funzionalità di angular: vedi i concetti di scope e interpolazione. Sono davvero poche righe di codice ma se te le passassi non studieresti angular e faresti un mero copia-incolla. Dai un occhiata ad un tutorial, è davvero roba di 4 righe.

Mursey · 20 Ottobre 2017

Intendevi:

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script>
       function prova(){
           var ins = document.getElementById("inserimento");
           console.log(ins.value);
           alert("hai inserito: "+ins.value);
           document.getElementById("inserimento").value="Hai scritto: "+ins.value;
       }  
    </script>
</head>
<body>
    <input type="field" id="inserimento" size="10">
    <button onclick="prova()">Invia</button>
</body>
</html>

?

cdtux · 20 Ottobre 2017

Dedalo92 ha detto:
Salve,
questo è il codice html:

Codice:

<head> <SCRIPT SRC="Script Java.js"></SCRIPT> </head> <body> <form method="get" onsubmit="return prova();"> <input type="field" id="inserimento" size="10"> <button type="submit">Invia</button> </form> </body>

Questo è invece il codice JavaScript:

Codice:

function prova(){ var ins=document.getElementById("inserimento"); console.log(ins.value); alert("hai inserito: "+ins.value); inserimento.value="Hai scritto: "+ins.value; }

Dopo l'esecuzione dello script, la pagina viene aggiornata e tutti i campi digitati dall'utente spariscono.
Lo script avrebbe il compito di far apparire nel field la stringa "hai inserito: 'parola inserita' " dopo la pressione del tasto invia!
Di fatto lo script esegue le istruzioni correttamente, ma dopo qualche frazione di secondo si aggiorna e i campi vengono resettati.

In che modo posso modificare il documento senza effettuare il refresh ed evitare la perdita delle modifiche eseguite dallo script?

Puoi risolvere o come scritto da @Mursey oppure con: https://www.w3schools.com/jsref/event_preventdefault.asp

EDIT:
ti scrivo il codice per chiarezza:

HTML:

<form method="get" id="myform">
   <input type="field" id="inserimento" size="10">
   <button type="submit">Invia</button>
</form>

JavaScript:

document.getElementById('myform').addEventListener('submit', prova);

function prova(e){
 e.preventDefault();
 var ins = document.getElementById("inserimento");
 console.log(ins.value);
 alert("hai inserito: "+ins.value);
 inserimento.value="Hai scritto: "+ins.value;
}

Dedalo92 · 21 Ottobre 2017

grazie mille per le risposte ragazzi, studierò sia Angular, sia l'event listener!

Mursey · 21 Ottobre 2017

Dedalo92 ha detto:
grazie mille per le risposte ragazzi, studierò sia Angular, sia l'event listener!

Dipende comunque da quello che vuoi fare, la mia versione è molto semplice ed è tutta lato client.

Cerca

PROBLEMA HTML : Reset non voluto

Dedalo92

Nuovo Utente

faudiio

Nuovo Utente

Mursey

Ospite

cdtux

Dedalo92

Nuovo Utente

Mursey

Ospite

Ci sono discussioni simili a riguardo, dai un'occhiata!

Entra

Discussioni Simili