JavaScript - HTML form değerlerini alma

112

JavaScript'e geçmek için bir HTML formunun değerini nasıl elde edebilirim?

Bu doğru mu? Komut dosyam, biri metin kutusundan, biri açılır kutudan iki bağımsız değişken alıyor.

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

2

"HTML kodundaki bir formun değeri" ile tam olarak neyi kastediyorsunuz?

— Pekka

7

soru oldukça açık

— laurentngu

1

@laurentngu soru o "bir değer demek olduğunu bir birinin değerini, yani bir HTML formu" hakkındaki birçok değerleri, ya da o "demek değerini "büyük bir tüm değerleri, yani seri hale getirilmiş tüm HTML formun" "value

— bluejayke

Soru açık ... ama açıkça bir formun değerini geçmek pek mantıklı değil.

— Matthew

113

HTML:

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

JS:

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

— user406632
kaynak

7

@ shorty876: Kendiniz test ettiniz mi? o_0 Bu, doğru yapıp yapmadığınızı belirlemenin oldukça iyi bir yolu olurdu.

— Jeff Rupert

1

Evet, ancak yalnızca doğru / yanlış döndürüyor ve işlevin çağrılıp çağrılmadığını nasıl belirleyeceğimi bilmiyorum. Böylece yardımcı olabilirsiniz.

— user377419

Bunu denedim, ancak nameValuevarsayılan değer ve kullanıcının girdiği şey değil.

— James T.

neden name = "name", ve ya hiç kimliği yoksa?

— bluejayke

65

Form değerlerini (HTTP POST kullanılarak gönderilecek olanlar gibi) almak istiyorsanız, şunları kullanabilirsiniz:

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
kaynak

12

İlk örneğinizin FormDatakendisi hiçbir şey yapmıyor .. hala formdaki değerleri almanız gerekiyor.

— putvande

1

Bunun yanlış olduğuna inanıyorum. FormData'yı başlatırken bir form öğesi belirtirseniz, o zaman değerleri doğru bir şekilde alır. codepen.io/kevinfarrugia/pen/Wommgd

— Kevin Farrugia

2

FormData nesnesinin kendisi de değerler değildir. FormData.entries()Değerleri almak için hala aramanız ve tekrarlamanız gerekir . Ayrıca, FormData.entries()Safari, Explorer veya Edge'de mevcut değildir. developer.mozilla.org/en-US/docs/Web/API/FormData

— dave

1

Tarayıcı uyumluluğu açısından doğru, ancak çoklu dolgular var . Yinelemeyle ilgili olarak formData.entries(), ne aradığınıza bağlıdır. Tek bir alanın değerini arıyorsanız, kullanabilirsiniz formData.get(name). Referans: get () .

— Kevin Farrugia

Evet FormData, Chrome'da herhangi bir çıktı veremiyorum .

— Atav32

33

İşte W3Schools'tan bir örnek:

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 burada bulunabilir .

— Tran Nguyen Nhat Thuy
kaynak

12

Sadece bir uyarı, eğer birisi radyo düğmeleri veya onay kutuları gibi diğer giriş türlerinin seçilen değerlerini almak isterse, bu istediğinizi yapmayacaktır.

— Sean

Ben değiştirmek zorunda var obj = {};için var obj = [];.

— Daniel Williams

@Sean neden radyo düğmeleri için çalışmıyor?

— Elements

@bluejayke Kod, tüm radyo düğmesi girişleri arasında geçiş yapacak ve SON radyo düğmesinin 'değerini' objhangisinin seçildiğine bakılmaksızın kaydedecektir . Sorun burada gösterilmiştir ('Seçenek 1'i seçin) w3schools.com/code/tryit.asp?filename=GEZXJXBBI7AW

— Sean

29

document.formssayfanızda bir dizi form içerecektir. Arzu ettiğiniz belirli formu bulmak için bu formlar arasında dolaşabilirsiniz.

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

Her form, daha sonra istediğiniz verileri bulmak için döngü yapabileceğiniz bir öğe dizisine sahiptir. Bunlara adıyla da erişebilmelisiniz

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

— Codeacula
kaynak

Neden ilk önce daha kısa yöntemden bahsedilmedi? = -D

— Klesun

2

@ArturKlesun Sanırım on yıl önce cevabı yazmaya başladım, OP güncellenmedi, bu yüzden çoğu durumu ele almak için for döngüsünü yazdım. Sanırım o zamanlar IE7 ile tarayıcı uyumluluğunu da sağlıyordum çünkü bugün sahip olduğumuz çok daha iyi manzaraya sahip değildik.

— Codeacula

5

Buradaki 5 sentim , sadece yinelemeyle değil, form.elementsher alanı kendinename göre sorgulamanıza izin veren kullanımı :

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

— Klesun
kaynak

2

Atrur Klesun'un fikrini genişleterek ... forma ulaşmak için getElementById kullanırsanız, ona sadece ismiyle erişebilirsiniz. Tek satırda:

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

Bunu radyo düğmeleri için kullandım ve iyi çalıştı. Sanırım burada da aynı.

— Rusca8
kaynak

2

Bu, https://stackoverflow.com/a/41262933/2464828 için geliştirilmiş bir örnektir.

Düşünmek

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

İsmin girişini geri almak istediğimizi varsayalım formula. Bu event, onsubmitsahadan geçerek yapılabilir . Daha sonra nesneyi FormDatareferans alarak bu tam formun değerlerini almak için kullanabiliriz SubmitEvent.

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

Yukarıdaki JavaScript kodu daha sonra girişin değerini konsola yazdıracaktır.

Değerleri yinelemek, yani tüm değerleri almak istiyorsanız, bkz. Https://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods

— jhaavist
kaynak

Harika!. Bu tam olarak ihtiyacım olan şey. Teşekkür ederim.

— Dang Cong Duong

1

İyi belgelere sahip, kullanımı kolay birkaç form serileştiricisi.

Github yıldızlarına göre,

— Atav32
kaynak

Bunun için gerçekten bütün bir diziye ihtiyacın var mı?

— bluejayke

1

Lütfen kodu aşağıdaki gibi değiştirmeyi deneyin:

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

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

Teşekkürler, mükemmel kodunuz ve benim için çalışıyor!

— LI HO TAN

0

Herhangi bir kitaplık olmadan bir formu serileştirmek için hızlı çözüm

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>

Snippet'i genişlet

— Bluejayke
kaynak

-1

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

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

— Randhawa
kaynak