Nwlapcug.com


Come modificare il valore di campo di Form con JavaScript



JavaScript è un linguaggio di scripting lato client che fornisce una varietà di funzioni che consentono ai programmatori di modificare dinamicamente quasi ogni aspetto dell'interfaccia utente di una pagina web. Molte pagine web richiedono che i visitatori completano i moduli web, in genere allo scopo di recuperare e memorizzare informazioni. JavaScript è spesso usato per aiutare gli utenti a completare moduli utente popolando pre-valori comuni di forma, convalidando i dati del modulo per garantire la corretta formattazione e valori e di nascondere e mostrare contenuti e campi modulo.

Istruzioni

1

Aprire un editor di testo e creare un nuovo file denominato fillForm.html. Aggiungere alcuni tag HTML al file che includono un tag aperto "< html >", un tag di apertura "< head >", un tag di chiusura "< / head >", un tag di apertura "< body >", una chiusura "< / body >" tag e un tag di chiusura "< / html >" tag. Insieme, questi tag implementano una pagina HTML di base.

< html >

< testa >< / testa >

< corpo >< / corpo >

< / html >

2

Aggiungere un tag "< script >" tra il tag "< / head >" e il "< head >" e impostare il tipo di script per "text/javascript".

< html >

< head >

< script type = "text/javascript" >

< / script >

< / head >

< corpo >< / corpo >

< / html >

3

Aggiungere una funzione JavaScript tra il "< script >" e "< / script >" tag. Denominare il fillForm() di funzione e includono una parentesi graffa aperta "{" e una parentesi graffa di chiusura "}" per indicare dove posizionare il codice della funzione.

< html >

< head >

< script type = "text/javascript" >

funzione fillForm()

{

}

< / script >

< / head >

< corpo >< / corpo >

< / html >

4

Modificare la funzione di fillForm() e utilizzare un getElementById funzione JavaScript per impostare il valore del campo input con il valore di id "formToFill" al testo "Valore modificato".

< html >

< head >

< script type = "text/javascript" >

funzione fillForm()

{

document.getElementById("formToFill").value = "Valore modificato";

}

< / script >

< / head >

< corpo >< / corpo >

< / html >

5

Digitare un tag aperto "< forma >" tra il "< body >" e "< / body >" tag HTML. Aggiungere un tag HTML "< input >" al form e assegnarle un id "formToFill" e un valore "Valore originale". Chiudere il tag "< / form >" e salvare fillForm.html.

< html >

< head >

< script type = "text/javascript" >

funzione fillForm()

{

document.getElementById("formToFill").value = "Valore modificato";

}

< / script >

< / head >

< corpo >

< forma >

< input id = "formToFill" value = "Valore originale" >

< / form >

< / body >

< / html >

6

Aggiungere un "< button >" tag HTML al file e aggiungere un evento OnClick per il pulsante che chiama la funzione fillForm(). Impostare il testo del pulsante "Clicca per modificare il valore nel campo di input di formToFill". Chiudere il tag "< / button >" e salvare e chiudere fillForm.html.

< html >

< head >

< script type = "text/javascript" >

funzione fillForm()

{

document.getElementById("formToFill").value = "Valore modificato";

}

< / script >

< / head >

< corpo >

< forma >

< input id = "formToFill" value = "Valore originale" >

< pulsante di tipo = "button" onClick="fillForm()" > Clicca per modificare il valore nel campo di input formToFill. < / button >

< / form >

< / body >

< / html >

7

Aprire il file in un browser web e fare clic sul pulsante per modificare il testo nel campo del modulo dal testo "Valore originale" a "Valore modificato".

Consigli & Avvertenze

  • Utilizzare i tag < label > nel web form per garantire campi chiaramente identificabili.
  • Aggiunta di testo ai campi è un modo utile per aiutare gli utenti a compilare campi modulo. L'evento onFocus () può essere utilizzato per cancellare il testo una volta che l'utente inizia a digitare le informazioni effettive nel campo.
  • Maggior parte dei web form vengono utilizzati per raccogliere dati dell'utente e memorizzare i dati per qualche scopo futuro. Ci sono molte opzioni di database disponibili che possono lavorare con script sul lato server, ad esempio, MySQL, Oracle e SQL Server.
  • Valori in forme che cambiano dinamicamente può sorprendere gli utenti. Essere sicuri di messaggio l'utente in modo appropriato per evitare confusione e frustrazione.