JavaScript-HTMLフォームの値を取得する

112

JavaScriptに渡すHTMLフォームの値を取得するにはどうすればよいですか？

これは正しいです？私のスクリプトは、テキストボックスから1つとドロップダウンボックスから1つの2つの引数を取ります。

<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
ソース
2
「HTMLコードのフォームの値」とはどういう意味ですか？
— ペッカ
7
質問は非常に明確です
— laurentngu 2018
1
@laurentngu質問は、彼が「値どういう意味での、HTMLフォームを」うちの一つの値を意味する多くの値、または彼は「どういう意味値連載」一つの大きなの値の全てを意味し、全体のHTMLフォームのを」 "値
— bluejayke
問題は明確です...しかし、フォームの値を渡すことは明らかに意味がありません。
— マシュー

回答:

112

HTML：

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

JS：

var nameValue = document.getElementById("uniqueID").value;
— ユーザー406632
ソース
7
@ shorty876：自分でテストしましたか？o_0それは、あなたが正しく行ったかどうかを判断するためのかなり良い方法でしょう。
— ジェフルパート
1
ええ、でもそれは真/偽を返すだけで、関数が呼び出されたかどうかを判断する方法がわかりません。したがって、あなたは助けることができます。
— user377419 2010
私はこれを試しましたが、これnameValueはデフォルト値であり、ユーザーが入力したものではありません。
— James T.
なぜname = "name"で、IDがまったくない場合はどうなりますか？
— bluejayke
65

フォームの値（HTTP POSTを使用して送信されるものなど）を取得したい場合は、以下を使用できます。

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()
— ケビン・ファルギア
ソース
12
最初の例FormData自体は何もしません。フォームから値を取得する必要があります。
— putvande 2016
1
それは間違いだと思います。FormDataを初期化するときにフォーム要素を指定すると、値が正しく取得されます。 codepen.io/kevinfarrugia/pen/Wommgd
— Kevin Farrugia
2
ただし、FormDataオブジェクト自体は値ではありません。FormData.entries()値を取得するには、引き続き呼び出して繰り返し処理する必要があります。さらに、FormData.entries()はSafari、Explorer、またはEdgeでは使用できません。developer.mozilla.org/en-US/docs/Web/API/FormData
— dave
1
ブラウザの互換性に関しては正しいですが、ポリフィルがあります。の反復についてformData.entries()は、何を探しているかによって異なります。単一のフィールドの値を探している場合は、を使用できますformData.get(name)。リファレンス：get（）。
— Kevin Farrugia、2017年
ええFormData、Chromeでは何も出力できません。
— Atav32
33

以下は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);
}

デモはここにあります。

— トラングエンニャットトゥイ
ソース
12
単なる警告です。誰かがラジオボタンやチェックボックスなどの他のタイプの入力の選択された値を取得したい場合、これはあなたが望むことをしません。
— Sean、
に変更する必要がありvar obj = {};ましたvar obj = [];。
— Daniel Williams
@Seanなぜラジオボタンでは機能しないのですか？これらは、elementsプロパティの下にも表示されます
— bluejayke
@bluejaykeコードはすべてのラジオボタン入力を循環しobj、どのラジオボタンが選択されているかに関係なく、最後のラジオボタンの「値」を保存します。問題はここに示されています（「オプション1」を選択）w3schools.com/code/tryit.asp?filename=GEZXJXBBI7AW
— Sean
29

document.formsページ上のフォームの配列が含まれます。これらのフォームをループして、希望する特定のフォームを見つけることができます。

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

各フォームには、必要なデータを見つけるためにループできるelement配列があります。また、名前でそれらにアクセスできるはずです。

var wanted_value = form.someFieldName.value;
jsFunction(wanted_value);
— Codeacula
ソース
なぜ短い方法が最初に言及されなかったのですか？= -D
— Klesun
2
@ArturKlesun 10年前に答えを入力し始めた時点で、OPが更新されていなかったため、ほとんどの状況を処理するためにforループを記述したと思います。当時は、IE7とのブラウザー互換性も確保していたと思います。今日のような、これまでにないほど良い状況がなかったからです。
— Codeacula
5

ここで私の5セントは、反復だけでなくform.elements、それnameによって各フィールドをクエリできるようにします。

const form = document.querySelector('form[name="valform"]');
const ccValidation = form.elements['cctextbox'].value;
const ccType = form.elements['cardtype'].value;
— クレサン
ソース
2

Atrur Klesunの考えを拡張します... getElementByIdを使用してフォームにアクセスする場合は、名前でアクセスできます。1行で：

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

ラジオボタンにそのまま使用して、問題なく動作しました。ここも同じだと思います。

— Rusca8
ソース
2

これはhttps://stackoverflow.com/a/41262933/2464828の開発例です

検討する

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

nameの入力を取得したいとしますformula。これはevent、onsubmitフィールドにを渡すことで実行できます。次に、を使用FormDataして、SubmitEventオブジェクトを参照することにより、この正確なフォームの値を取得できます。

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

上記のJavaScriptコードは、入力の値をコンソールに出力します。

値を反復する場合、つまりすべての値を取得する場合は、https：//developer.mozilla.org/en-US/docs/Web/API/FormData#Methodsを参照してください。

— ハービスト
ソース
すごい！。これはまさに私が必要とするものです。ありがとうございました。
— Dang Cong Duong
1

以下のようにコードを変更してみてください：

<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>
— МаксимЩирый
ソース
ありがとう、あなたの完璧なコードと私のために働く！
— LI HO TAN
0

ライブラリなしでフォームをシリアル化するためのクイックソリューション

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>
スニペットを展開

— Bluejayke
ソース
-1 
<input type="text" id="note_text" />

let value = document.getElementById("note_text").value;
— ランダワ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.