String-Wert gefunden, aber eine ganze Zahl ist

Question

Für eine lange Zeit erforderlich Ich habe ein Vanille Stück Javascript verwenden wie:

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

das Formular serialise und über XMLHttpRequest Post. Allerdings habe ich bemerkt, dass dieser Code type=number nicht korrekt behandelt. Gibt es ein besseres minimales Muster?

Answer 1

Wie Rayon Dabre gezeigt hat, ist der type=number Eingang sti lle eine Schnur. Sie können die Daten aus dem Formular auf intelligentere Weise sammeln. Zum Beispiel:

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

Auf diese Weise wird das zurückgegebene Objekt den Typ haben, den Sie im HTML definiert haben. Es muss jedoch auf dem Server validiert werden.

Answer 2

Versuchen Sie, den Aufruf umzulagern, um den Wert in parseInt() abzurufen - z.

parseInt(input.value); 

Dadurch wird eine Ganzzahldarstellung des Werts im Formular abgerufen. Sie würden wahrscheinlich wollen, dass eine Überprüfung der Sicherheit es aber, um sicherzustellen, dass es ein Int ist und obwohl nicht brechen.

Answer 3

type=number stellt Das Eingangselement, eine Steuerung zum Einstellen des Werts des Elements an eine Zeichenfolge eine Zahl, die

So wird der Wert der type="Number" wird eine Zeichenfolge sein, die gültig ist Fließkommazahl wenn konvertiert (Number(YOUR_VALUE))