JavaScript - Mendapatkan nilai bentuk HTML

112

Bagaimana saya bisa mendapatkan nilai formulir HTML untuk diteruskan ke JavaScript?

Apakah ini benar? Skrip saya mengambil dua argumen satu dari kotak teks, satu dari kotak tarik-turun.

<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 pengguna377419
sumber

2

Apa yang Anda maksud dengan "nilai formulir dalam kode HTML"?

Pekka

7

Pertanyaan cukup jelas

laurentngu

1

@laurentngu pertanyaannya adalah apakah ia berarti "nilai dari bentuk HTML", yang berarti satu nilai keluar dari banyak nilai-nilai, atau apakah ia berarti " nilai dari seluruh bentuk HTML", yang berarti semua nilai dalam satu besar "serial "nilai

bluejayke

Pertanyaannya jelas ... tetapi jelas tidak masuk akal untuk menyampaikan nilai formulir.

Matius

112

HTML:

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

JS:

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

pengguna406632
sumber

7

@ shorty876: Apakah Anda mengujinya sendiri? o_0 Itu akan menjadi cara yang bagus untuk menentukan apakah Anda melakukannya dengan benar atau tidak.

Jeff Rupert

1

Ya, tetapi itu hanya mengembalikan benar / salah dan saya tidak yakin bagaimana menentukan apakah fungsi itu bahkan dipanggil. Dengan demikian Anda dapat membantu.

user377419

Saya mencoba ini, tetapi nameValueini adalah nilai default dan bukan yang dimasukkan pengguna.

James T.

mengapa name = "name", dan bagaimana jika tidak memiliki ID sama sekali?

bluejayke

65

Jika Anda ingin mengambil nilai formulir (seperti yang akan dikirim menggunakan HTTP POST), Anda dapat menggunakan:

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
sumber

12

Contoh pertama Anda FormDatasendiri tidak melakukan apa-apa .. Anda masih perlu mendapatkan nilai dari formulir.

putvande

1

Saya yakin itu tidak benar. Jika saat menginisialisasi FormData Anda menentukan elemen formulir maka itu akan mengambil nilai dengan benar. codepen.io/kevinfarrugia/pen/Wommgd

Kevin Farrugia

2

Objek FormData itu sendiri bukan nilainya. Anda masih perlu memanggil dan mengulang FormData.entries()untuk mengambil nilainya. Selain itu, FormData.entries()tidak tersedia di Safari, Explorer, atau Edge. developer.mozilla.org/en-US/docs/Web/API/FormData

dave

1

Benar dalam hal kompatibilitas browser, namun ada polyfill . Mengenai iterasi melalui formData.entries(), itu tergantung apa yang Anda cari. Jika Anda mencari nilai dari satu bidang, Anda dapat menggunakan formData.get(name). Referensi: get () .

Kevin Farrugia

Ya, saya tidak bisa FormDatamenampilkan apa pun di Chrome.

Atav32

33

Berikut adalah contoh dari 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);
}

Demo dapat ditemukan di sini .

Tran Nguyen Nhat Thuy
sumber

12

Sekadar peringatan, jika ada yang ingin mendapatkan nilai yang dipilih dari jenis input lain seperti tombol radio atau kotak centang, ini tidak akan melakukan apa yang Anda inginkan.

Sean

Saya harus pindah var obj = {};ke var obj = [];.

Daniel Williams

@ Sean mengapa itu tidak bekerja untuk tombol radio? Mereka muncul di bawah properti elemen juga

bluejayke

@bluejayke Kode akan menggilir semua masukan tombol radio, dan akan menyimpan 'nilai' tombol radio TERAKHIR obj, terlepas dari mana yang dipilih. Masalahnya ditunjukkan di sini (pilih 'Opsi 1') w3schools.com/code/tryit.asp?filename=GEZXJXBBI7AW

Sean

29

document.formsakan berisi berbagai formulir di halaman Anda. Anda dapat mengulang formulir ini untuk menemukan formulir spesifik yang Anda inginkan.

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

Setiap formulir memiliki larik elemen yang kemudian dapat Anda putar untuk menemukan data yang Anda inginkan. Anda juga harus dapat mengaksesnya dengan nama

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

Codeacula
sumber

Mengapa metode yang lebih pendek tidak disebutkan lebih dulu? = -D

Klesun

2

@ArturKlesun Saya rasa itu karena pada satu dekade yang lalu saya mulai mengetik jawabannya, OP belum diperbarui, jadi saya menulis loop for untuk menangani sebagian besar situasi. Saya pikir saat itu saya juga memastikan kompatibilitas browser dengan IE7 karena kami tidak memiliki lanskap yang jauh lebih baik yang kami miliki saat ini.

Codeacula

5

5 sen saya di sini, form.elementsyang memungkinkan Anda untuk menanyakan setiap bidang berdasarkan ituname , tidak hanya dengan iterasi:

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

Klesun
sumber

2

Memperluas ide Atrur Klesun ... Anda bisa mengaksesnya dengan namanya jika Anda menggunakan getElementById untuk mencapai formulir. Dalam satu baris:

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

Saya menggunakannya seperti itu untuk tombol radio dan bekerja dengan baik. Saya kira itu sama di sini.

Rusca8
sumber

2

Ini adalah contoh yang dikembangkan dari https://stackoverflow.com/a/41262933/2464828

Mempertimbangkan

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

Mari kita asumsikan kita ingin mengambil input nama formula. Ini bisa dilakukan dengan mengoper eventdi onsubmitlapangan. Kita kemudian dapat menggunakan FormDatauntuk mengambil nilai dari bentuk yang tepat ini dengan mereferensikan SubmitEventobjeknya.

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

Kode JavaScript di atas kemudian akan mencetak nilai input ke konsol.

Jika Anda ingin mengulang nilainya, misalnya, dapatkan semua nilainya, lalu lihat https://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods

jhaavist
sumber

Bagus!. Inilah yang saya butuhkan. Terima kasih.

Dang Cong Duong

1

Beberapa serializers formulir yang mudah digunakan dengan dokumentasi yang baik.

Dalam urutan bintang Github,

Atav32
sumber

apakah Anda benar-benar membutuhkan seluruh larik hanya untuk itu?

bluejayke

1

Silakan coba ubah kode seperti di bawah ini:

<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>

Максим Щирый
sumber

Terima kasih, kode Anda yang sempurna dan berfungsi untuk saya!

LI HO TAN

0

Solusi cepat untuk membuat serial formulir tanpa perpustakaan apa pun

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>

Luaskan cuplikan

bluejayke
sumber

-1

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

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

Randhawa
sumber

JavaScript - Mendapatkan nilai bentuk HTML

Jawaban: