文字列値が見つかりましたが、整数は私のようなJavaScriptを<em>バニラ</em>片を用いてきた長い間

Question

が必要とされています

<form onsubmit="return jsonpost(this);" method=POST action=/validate/> 
    <label>Firstname: <input required name=firstName></label> 
    <label>Lastname: <input required name=lastName></label> 
    <label>Age: <input name=age type=number></label> 
    <input type=submit> 
<form> 

<script> 
function jsonpost(jsonpostform) { 

    // collect the jsonpostform data while iterating over the inputs 
    var data = {}; 
    for (var i = 0; i < jsonpostform.length; i++) { 
     var input = jsonpostform[i]; 
     if (input.name && input.value) { 
      data[input.name] = input.value; 
     } 
    } 

    // construct an HTTP request 
    var xhr = new XMLHttpRequest(); 
    xhr.open(jsonpostform.method, jsonpostform.action); 
    xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); 
    // send the collected data as JSON 
    xhr.send(JSON.stringify(data)); 

    return false; 
} 
</script> 

フォームを連載し、XMLHttpRequestの上でそれを投稿します。しかし、私はこのコードがtype=numberを正しく処理しないことに気付きました。より良い最小パターンはありますか？

Answer 1

Rayon Dabreが指摘したように、type=number入力がstiストリング。よりスマートな方法でフォームからデータを収集することができます。たとえば、

// Map of type -> function that converts the value 
// Add more converters if you need'em 
var type2converter = {number: Number} 

// Converter that does not do anything for fallback 
var id = function (x) { return x } 

function getFormData(form) { 

    var data = {} 
    var converter 
    var input 

    for (var i = 0; i < form.length; i++) { 
     input = form[i] 

     if (input.name && input.value) { 
      // Get the function that converts the data, or fallback to "dummy-converter" 
      converter = converters[input.type] || id 
      data[input.name] = converter(input.value) 
     } 
    } 

    return data 
} 

このようにして、返されたオブジェクトは、HTMLで定義したタイプになります。しかし、それはサーバ上で検証されなければならない。

Answer 2

parseInt（）の値を取得するために呼び出しをラップすることをお試しください。

parseInt(input.value); 

これは、フォームの値の整数表現を取得します。おそらくそれがintであることを確認するためにいくつかの正当性チェックをしたいと思うでしょう。

Answer 3

type=number、入力要素は番号を

を表す文字列に要素の値を設定するための制御を表すそうtype="Number"の値は、有効となる文字列になります浮動小数点数変換された場合（Number(YOUR_VALUE)）