Hvordan få informasjon ut av et skjema med jQuery
Skjemaer drevet av en jQuery script bruke "serializeArray ()" funksjonen for å finne hvert skjemafelt og lagre informasjonen til en matrise. En matrise er som en variabel, men den har flere verdier i stedet for bare én. Siden den inneholder flere verdier, må du gjøre ekstra arbeid for å få disse verdiene og utgang dem tilbake til brukeren. Den "hver ()" -funksjonen i jQuery håndterer det meste av det arbeidet, looping gjennom hver verdi og gjennomføring av koden som du plasserer inne i funksjon.
Bruksanvisning
1 Åpne websiden som inneholder skjemaet i Notepad eller en kode editor og legge til jQuery biblioteket filen hvis den ikke allerede er der:
<Script tagger i HTML-koden.
2 Legg et par nye "<script>" tager nedenfor jQuery fil referanser og skrive "dokument klar" -funksjonen for å tvinge skriptet til å vente til siden er ferdig lasting før den utfører:
<Script type = "text / css">
$ (Funksjon () {
});
</ Script>
3 Velg form og opprette en ny funksjon utløst av "send" hendelse:
<Script type = "text / css">
$ (Funksjon () {
$ ( "Form"). Sende (function () {
});
});
</ Script>
4 Bruk "serializeArray ()" for å få input fra skjemaet og slå den inn i en matrise variabel som lagrer all data:
<Script type = "text / css">
$ (Funksjon () {
$ ( "Form"). Sende (function () {
formInput = $(this).serializeArray();
});
});
</ Script>
Den "$ (this)" velgeren velger HTML-elementet fra den overordnede funksjon i manuset, i dette tilfellet webskjema. Sett den lik en variabel slik at du kan manipulere dataene senere.
5 Legg til "return false" til skriptet, inne på "send ()" -funksjonen, for å hindre at Send-knappen fra å sende brukeren til en ny side.
<Script type = "text / css">
$ (Funksjon () {
$ ( "Form"). Sende (function () {
formInput = $(this).serializeArray();
return false;
});
});
</ Script>
6 Legg denne koden til "send ()" -funksjonen for å sende ut resultatene av skjemaet til en blank sett "<div>" tagger med en ID navnet "resultater":
$ .Hver (FormInput, funksjon (i, felt) {
. $ ( '# Resultater ") føye (field.name +": "+ field.value +" ");
});
Den "hver ()" -funksjonen i jQuery looper gjennom hver verdi i matrisen skapt av "serializeArray ()" og legger både navnet og verdien av hvert felt. Verdien av et felt er input fra brukeren.