Nwlapcug.com


Come aggiornare un modulo d'ordine senza ricaricare la pagina

Come aggiornare un modulo d'ordine senza ricaricare la pagina


JavaScript è un linguaggio di scripting che può essere inserito nelle pagine web e viene eseguito in un browser web. Poiché il codice JavaScript viene eseguito dopo che il browser carica la pagina web, può essere utilizzato per gestire le interazioni dell'utente senza aggiornare il sito.

Istruzioni

1

Aprire un editor di testo e creare un nuovo file contenente il contenuto della pagina scritto in HTML. La pagina include un form con due caselle di controllo che un utente consente di ordinare gli elementi, ad esempio scarpe e un campo totale visualizzazione prezzo dell'ordine. Denominare il file "order_total.html."

< html >

< head >

< / head >

< corpo >

< forma >

< / form >

< / body >

< / html >

2

Aggiungere due caselle di controllo al form in order_total.html. Nome della prima casella di controllo "item1" e dargli un valore di "15.00." Denominare la seconda casella di controllo "item2" e dargli un valore di "20.00." Aggiungere un campo di input denominato "totale" sotto le caselle di controllo. Gli utenti sceglieranno di ordinare item1 e/o item2, e il prezzo totale per gli articoli verrà inserito nel campo totale.

< html >

< head >

< / head >

< corpo >

< forma >

< input type = "checkbox" name = "item1" value = "15.00" >

< input type = "checkbox" name = "item2" value = "20.00" >

< input type = testo nome = "totale" >

< / form >

< / body >

< / html >

3

Modificare order_total.html e aggiungere testo dopo le caselle di controllo che descrivono i prodotti. Nome item1 "Blue Shoes" e nome item2 "Scarpe rosse".

< html >

< head >

< / head >

< corpo >

< forma >

< input type = "checkbox" name = "item1" valore = "15.00" > scarpe blu

< input type = "checkbox" name = "item2" valore = "20.00" > Red Shoes

< input type = testo nome = "totale" >

< / form >

< / body >

< / html >

4

Aggiungere una funzione JavaScript denominata "calculateTotal()" alla sezione < head > di order_total.html. Inserire la funzione tra JavaScript < script > e < / script > Tag. Questa funzione riceve gli elementi l'utente ordini, aggiunge o sottrae prezzi e mette il prezzo dell'ordine nel campo totale.

< html >

< head >

< script language = "javascript" type = "text/javascript" >

Function calculateTotal(myForm) () {

}

< / script >

< / head >

< corpo >

< forma >

< input type = "checkbox" name = "item1" valore = "15.00" > scarpe blu

< input type = "checkbox" name = "item2" valore = "20.00" > Red Shoes

< input type = testo nome = "totale" >

< / form >

< / body >

< / html >

5

Modificare la funzione di calculateTotal() e dichiarare due variabili. Assegnare le variabili i valori delle proprietà item1 e item2. Aggiungere un order_total variabile per contenere il totale.

< html >

< head >

< script type = "text/javascript" >

Function calculateTotal(myForm) () {

item1 var = Number(myForm.item1.value);

item2 var = Number(myForm.item2.value);

var order_total;

}

< / script >

< / head >

< corpo >

< forma >

< input type = "checkbox" name = "item1" valore = "15.00" > scarpe blu

< input type = "checkbox" name = "item2" valore = "20.00" > Red Shoes

< input type = testo nome = "totale" >

< / form >

< / body >

< / html >

6

Modificare nuovamente la funzione di calculateTotal(). Se l'utente seleziona entrambe le caselle di controllo, aggiungere item1 e item2. Se l'utente seleziona solo la casella di controllo, aggiungere solo item1. Se l'utente seleziona solo la casella di controllo, aggiungere solo item2. Assumere un valore pari a 0 se nessuna casella di controllo è selezionata. Aggiornare il campo totale con il valore memorizzato in order_total.

< html >

< head >

< script type = "text/javascript" >

Function calculateTotal(myForm) () {

item1 var = Number(myForm.item1.value);

item2 var = Number(myForm.item2.value);

var order_total;

Se (myForm.item1.checked==true & & myForm.item2.checked==true) {order_total = item1 + item2;

} ElseIf (myForm.item1.checked==true & & myForm.item2.checked==false) {order_total = item1;

} ElseIf (myForm.item1.checked==false & & myForm.item2.checked==true) {order_total = item2;

} ElseIf (myForm.item1.checked==false & & myForm.item2.checked==false) {order_total = 0,00;

}

myForm.total.value = order_total.toFixed(2);}

< / script >

< / head >

< corpo >

< forma >

< input type = "checkbox" name = "item1" valore = "15.00" > scarpe blu

< input type = "checkbox" name = "item2" valore = "20.00" > Red Shoes

< input type = testo nome = "totale" >

< / form >

< / body >

< / html >

7

Modificare le due caselle di controllo aggiungendo la funzione di calculateTotal(this.form) per i tag HTML. La funzione viene chiamata basata sull'evento OnClick (). Aggiungere il valore "0.00" nel campo totale.

< html >

< head >

< script type = "text/javascript" >

Function calculateTotal(myForm) () {

item1 var = Number(myForm.item1.value);

item2 var = Number(myForm.item2.value);

var order_total;

Se (myForm.item1.checked==true & & myForm.item2.checked==true) {order_total = item1 + item2;

} ElseIf (myForm.item1.checked==true & & myForm.item2.checked==false) {order_total = item1;

} ElseIf (myForm.item1.checked==false & & myForm.item2.checked==true) {order_total = item2;

} ElseIf (myForm.item1.checked==false & & myForm.item2.checked==false) {order_total = 0,00;

}

myForm.total.value = order_total.toFixed(2);}

< / script >

< / head >

< corpo >

< forma >

< input type = "checkbox" name = "item1" valore = "15.00" onclick="calculateTotal(this.form)" > scarpe blu

< input type = "checkbox" name = valore "item2" = "20.00" onclick="calculateTotal(this.form)" > Red Shoes

< tipo input = testo nome = valore "totale" = "0.00" >

< / form >

< / body >

< / html >

8

Salvare order_total.html e aprirlo in un browser. Eseguire tre prove: in primo luogo, selezionare ciascuna casella di controllo in modo indipendente. In secondo luogo, selezionare entrambe le caselle di controllo. In terzo luogo, deselezionare entrambe le caselle di controllo. Il totale dell'ordine appropriato verrà visualizzato nel campo totale senza aggiornare la pagina.

Consigli & Avvertenze

  • Aggiungere un disco rigido (ritorno) dopo item2 per separare le caselle di controllo nel campo totale.
  • Aggiungere testo prima del campo totale di etichettarlo nell'interfaccia utente.
  • Utilizzare HTML per progettare completamente l'interfaccia di utente del modulo di ordine. Ad esempio, includere i pulsanti di opzione.
  • Utilizzare la funzione Number () per evitare la concatenazione dei valori quando l'utente seleziona le caselle di controllo. Ad esempio, aggiungendo item1 (15) e item2 (20) dovrebbe portare a 35, non 1520.
  • Utilizzare il metodo toFixed() quando si assegna un valore al campo totale per garantire gli zeri finali sono inclusi.