2010-08-23 31 views
39

HTML formuna geçmek için JavaScript'e nasıl geçebilirim?JavaScript - HTML form değerlerini alma

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

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

tam olarak "HTML kodunda bir formun değeri" ile ne demek istiyorsunuz? –

cevap

54

HTML:

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

JS:

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

@ shorty876: Kendin test ettin mi? o_0 Doğru yapıp yapmadığınızı belirlemenin güzel bir yolu olurdu. –

+0

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

+0

Bunu denedim, ancak 'nameValue', kullanıcının girdiği değil varsayılan değerdir. –

-3

javascript argüman javascript işlevi argümanı anlamına gelir? Eğer Evet ise:

Bazı fonksiyonlar yazabilirsiniz. Formunuzu {"name":"value"} gibi nesnelere serileştiren ve daha sonra bu nesneyi işlevde geçirebilirsiniz.

20

document.forms sayfanızdaki formların bir dizi içerecektir. İstediğiniz özel formu bulmak için bu formları doldurabilirsiniz.

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 formda, istediğiniz verileri bulmak için döngü yapabileceğiniz bir öğe dizisi vardır. demo here bulunabilir

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); 
} 

: Ayrıca adı İşte

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

tarafından bunlara erişmek mümkün olmalıdır W3Schools'da gelen bir örnektir. (örneğin bir HTTP POST kullanarak gönderileceğini söyledi olanlar gibi) formu değerleri almak istiyorsanız

+3

Sadece radyo uyarısı veya onay kutuları gibi diğer giriş türlerinin seçilmiş değerlerini almak isteyen bir kişi, bu sizin istediğinizi yapmayacaktır. – Sean

8

kullanabileceğiniz

JavaScript

new FormData(document.querySelector('form')) 

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

serialize(document.forms[0]); 

jQuery

$("form").serializeArray() 
+5

İlk örneğiniz 'FormData''nın kendisi bir şey yapmaz .. hala formdan değerleri almanız gerekir. – putvande

+1

Yanlış olduğuna inanıyorum. FormData başlatılırken bir form öğesi belirtirseniz, değerleri doğru olarak alır. http://codepen.io/kevinfarrugia/pen/Wommgd –

+1

FormData nesnesi, değerlerin kendisi değil. FormData ile arama ve yineleme yapmanız gerekiyor.Değerleri almak için girdiler() 'tir. Ayrıca, 'FormData.entries()' Safari, Explorer veya Edge'de kullanılamaz. https://developer.mozilla.org/en-US/docs/Web/API/FormData – dave

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

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