PROBLEMA HTML : Reset non voluto

Pubblicità
D

Dedalo92

Nuovo Utente
Messaggi
72
Reazioni
3
Punteggio
26
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?
 
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.
 
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>
?
 
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?
Clicca per espandere...

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;
}
 
Ultima modifica:
Pubblicità
Pubblicità
Indietro
Top