JavaScript: recupero dei valori del modulo HTML

112

Come posso ottenere il valore di un modulo HTML da passare a JavaScript?

È corretto? Il mio script prende due argomenti uno dalla casella di testo, uno dalla casella a discesa.

<body>
<form name="valform" action="" method="POST">

Credit Card Validation: <input type="text" id="cctextboxid" name="cctextbox"><br/>
Card Type: <select name="cardtype" id="cardtypeid">
  <option value="visa">Visa</option>
  <option value="mastercard">MasterCard</option>
  <option value="discover">Discover</option>
  <option value="amex">Amex</option>
  <option value="diners">Diners Club</option>
</select><br/>
<input type="button" name="submit" value="Verify Credit Card" onclick="isValidCreditCard(document.getElementById('cctextboxid').value,document.getElementById('cardtypeid').value)" />
</body>

javascript html

— user377419
fonte

2

Cosa intendi esattamente per "valore di un modulo in codice HTML"?

— Pekka

7

la domanda è abbastanza chiara

— laurentngu

1

@laurentngu la domanda è: significa "un valore di un modulo HTML", ovvero un valore tra i molti valori, o intende il " valore dell'intero modulo HTML", ovvero tutti i valori in un unico grande "serializzato "value

— bluejayke

La domanda è chiara ... ma chiaramente non ha molto senso trasmettere il valore di una forma.

— Matteo

112

HTML:

<input type="text" name="name" id="uniqueID" value="value" />

JS:

var nameValue = document.getElementById("uniqueID").value;

— user406632
fonte

7

@ shorty876: l'hai testato tu stesso? o_0 Sarebbe un modo abbastanza buono per determinare se l'hai fatto o meno.

— Jeff Rupert

1

Sì, ma restituisce solo vero / falso e non sono sicuro di come determinare se la funzione è stata chiamata. Così puoi aiutare.

— user377419

L'ho provato, ma nameValueè il valore predefinito e non quello inserito dall'utente.

— James T.

perché nome = "nome" e cosa succede se non ha affatto un ID?

— bluejayke

65

Se vuoi recuperare i valori del modulo (come quelli che verrebbero inviati utilizzando un HTTP POST) puoi usare:

JavaScript

const formData = new FormData(document.querySelector('form'))
for (var pair of formData.entries()) {
  // console.log(pair[0] + ': ' + pair[1]);
}

form-serialize ( https://code.google.com/archive/p/form-serialize/ )

serialize(document.forms[0]);

jQuery

$("form").serializeArray()

— Kevin Farrugia
fonte

12

Il tuo primo esempio in FormDatasé non fa nulla .. devi comunque ottenere i valori dal modulo.

— putvande

1

Credo che non sia corretto. Se quando si inizializza il FormData si specifica un elemento del modulo, esso recupererà correttamente i valori. codepen.io/kevinfarrugia/pen/Wommgd

— Kevin Farrugia

2

Tuttavia, l'oggetto FormData non è di per sé i valori. È ancora necessario chiamare e iterare FormData.entries()per recuperare i valori. Inoltre, FormData.entries()non è disponibile in Safari, Explorer o Edge. developer.mozilla.org/en-US/docs/Web/API/FormData

— dave

1

Corretto per quanto riguarda la compatibilità del browser, tuttavia ci sono polyfill . Per quanto riguarda l'iterazione formData.entries(), dipende da cosa stai cercando. Se stai cercando il valore di un singolo campo potresti usare formData.get(name). Riferimento: get () .

— Kevin Farrugia

Sì, non riesco FormDataa produrre nulla su Chrome.

— Atav32

33

Ecco un esempio da W3Schools:

function myFunction() {
    var elements = document.getElementById("myForm").elements;
    var obj ={};
    for(var i = 0 ; i < elements.length ; i++){
        var item = elements.item(i);
        obj[item.name] = item.value;
    }

    document.getElementById("demo").innerHTML = JSON.stringify(obj);
}

La demo può essere trovata qui .

— Tran Nguyen Nhat Thuy
fonte

12

Solo un avvertimento, se qualcuno vuole ottenere i valori selezionati di altri tipi di input come pulsanti di opzione o caselle di controllo, questo non farà quello che vuoi.

— Sean

Ho dovuto cambiare var obj = {};in var obj = [];.

— Daniel Williams

@Sean, perché non dovrebbe funzionare per i pulsanti di opzione? Appaiono anche sotto la proprietà degli elementi

— bluejayke

@bluejayke Il codice scorrerà attraverso tutti gli ingressi del pulsante di opzione e salverà il "valore" del pulsante objdi opzione ULTIMO , indipendentemente da quale sia selezionato. Il problema è dimostrato qui (scegli "Opzione 1") w3schools.com/code/tryit.asp?filename=GEZXJXBBI7AW

— Sean

29

document.formsconterrà una serie di moduli sulla tua pagina. Puoi scorrere questi moduli per trovare il modulo specifico che desideri.

var form = false;
var length = document.forms.length;
for(var i = 0; i < length; i++) {
    if(form.id == "wanted_id") {
        form = document.forms[i];
    }
}

Ogni modulo ha un array di elementi che puoi quindi scorrere per trovare i dati che desideri. Dovresti anche essere in grado di accedervi per nome

var wanted_value = form.someFieldName.value;
jsFunction(wanted_value);

— Codeacula
fonte

Perché il metodo più breve non è stato menzionato per primo? = -D

— Klesun

2

@ArturKlesun Immagino sia perché all'epoca, dieci anni fa, ho iniziato a digitare la risposta, l'OP non si era aggiornato, quindi ho scritto il ciclo for per gestire la maggior parte delle situazioni. Penso che allora stavo anche assicurando la compatibilità del browser con IE7 perché non avevamo il panorama molto migliore che abbiamo oggi.

— Codeacula

5

I miei 5 centesimi qui, usando form.elementsche ti permette di interrogare ogni campo per essoname , non solo per iterazione:

const form = document.querySelector('form[name="valform"]');
const ccValidation = form.elements['cctextbox'].value;
const ccType = form.elements['cardtype'].value;

— Klesun
fonte

2

Espandendo l'idea di Atrur Klesun ... puoi accedervi semplicemente dal suo nome se usi getElementById per raggiungere il modulo. In una riga:

document.getElementById('form_id').elements['select_name'].value;

L'ho usato così per i pulsanti di opzione e ha funzionato bene. Immagino sia lo stesso qui.

— Rusca8
fonte

2

Questo è un esempio sviluppato di https://stackoverflow.com/a/41262933/2464828

Tener conto di

<form method="POST" enctype="multipart/form-data" onsubmit="return check(event)">
    <input name="formula">
</form>

Supponiamo di voler recuperare l'input di nome formula. Questo può essere fatto passando il eventnel onsubmitcampo. Possiamo quindi utilizzare FormDataper recuperare i valori di questa forma esatta facendo riferimento SubmitEventall'oggetto.

const check = (e) => {
    const form = new FormData(e.target);
    const formula = form.get("formula");
    console.log(formula);
    return false
};

Il codice JavaScript precedente stamperà quindi il valore dell'input nella console.

Se vuoi iterare i valori, cioè ottenere tutti i valori, quindi vedi https://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods

— jhaavist
fonte

Grande!. Questo è esattamente ciò di cui ho bisogno. Grazie.

— Dang Cong Duong

1

Diversi serializzatori di moduli facili da usare con una buona documentazione.

In ordine di stelle di Github,

— Atav32
fonte

hai davvero bisogno di un intero array solo per questo?

— bluejayke

1

Prova a cambiare il codice come di seguito:

<form
   onSubmit={e => {
     e.preventDefault();
     e.stopPropagation();

     const elements = Array.from(e.currentTarget) as HTMLInputElement[];

     const state = elements.reduce((acc, el) => {
       if (el.name) {
         acc[el.name] = el.value;
       }

       return acc;
     }, {});

     console.log(state); // {test: '123'}
   }}
>
   <input name='test' value='123' />
</form>

— Максим Щирый
fonte

Grazie, il tuo codice perfetto e funziona per me!

— LI HO TAN

0

Soluzione rapida per serializzare un modulo senza alcuna libreria

function serializeIt(form) {
  return (
    Array.apply(0, form.elements).map(x => 
      (
        (obj => 
          (
            x.type == "radio" ||
            x.type == "checkbox"
          ) ?
            x.checked ? 
              obj
            : 
              null
          :
            obj
        )(
          {
            [x.name]:x.value
          }
        )
      )
    ).filter(x => x)
  );
}

function whenSubmitted(e) {
  e.preventDefault()
  console.log(
    JSON.stringify(
      serializeIt(document.forms[0]),
      4, 4, 4
    )
  )
}

<form onsubmit="whenSubmitted(event)">
<input type=text name=hiThere value=nothing>
<input type=radio name=okRadioHere value=nothin>
<input type=radio name=okRadioHere1 value=nothinElse>
<input type=radio name=okRadioHere2 value=nothinStill>

<input type=checkbox name=justAcheckBox value=checkin>
<input type=checkbox name=justAcheckBox1 value=checkin1>
<input type=checkbox name=justAcheckBox2 value=checkin2>

<select name=selectingSomething>
<option value="hiThere">Hi</option>
<option value="hiThere1">Hi1</option>
<option value="hiThere2">Hi2</option>
<option value="hiThere3">Hi3</option>
</select>
<input type=submit value="click me!" name=subd>
</form>

Espandi lo snippet

— bluejayke
fonte

-1

<input type="text" id="note_text" />

let value = document.getElementById("note_text").value;

— Randhawa
fonte