Получение данных из HTML-форм в Javascript всегда создает строки?
Я использую Javascript для перехвата отправки HTML-формы:
var form_api = $("#apiForm");
$(form_api).submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* Get input values from form */
var formData = prepFormData("#apiForm");
}
Однако, когда я конвертирую данные в объект (я хочу использовать jQuery для передачи этого в конечную точку), все свойства объекта являются строками.
function prepFormData(formSelector){
var form_api = $(formSelector);
// Serialize the form data as a PlainObject.
var formData = $(form_api).serializeArray().reduce(function (obj, item) {
obj[item.name] = item.value;
return obj;
}, {});
}
Почему он всегда производит строки? Вместо этого я хотел бы следующее поведение:
<input type = "text">должен выдавать NULL, если ничего не было введено.<input type = "number">должен выдавать Int при вводе значения.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Это нормальное поведение JS. номер типа и текст предназначены для проверки внутри ввода для браузеров. Они не определяют тип данных значения внутри них. По умолчанию это строки. Вы можете выполнять преобразования для вашего использования. Текстовое поле возвращает пустую строку, потому что по умолчанию это пустая строка, а не нуль.
Вам нужно проанализировать ввод в соответствии с вашими потребностями. Каждое значение формы в HTML по своей сути является строкой.
Атрибут type сообщает браузеру, какое поле отображать, а не тип данных значения. Возьмем, к примеру:
<input type = "hidden" value = "1">
HTML и javascript не могут вывести информацию о типе данных с hidden, это может быть строка, это может быть целое число.
number не менее проблематичен, почему по умолчанию int, как насчет двойников и других типов чисел?
В моем примере выше обратите внимание, что значение заключено в кавычки, обозначающие строку. (Кавычки необязательны, но рекомендуются, но ничего не делают с типом данных.)
Чтобы на самом деле решить вашу проблему, я бы подумал о добавлении атрибут данных к вашим полям, скажем, data-type для хранения типа данных, к которому вы хотите привести свое значение.
Вот краткий пример:
var form_api = $("#apiForm");
$(form_api).submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* Get input values from form */
var formData = prepFormData("#apiForm");
console.info(formData);
});
function prepFormData(formSelector){
var form_api = $(formSelector);
// Serialize the form data as a PlainObject.
var formData = $(form_api).serializeArray().reduce(function (obj, item) {
var tempValue = null;
if (item.value !== "") {
//Get data type of current field
var dataType = $(form_api).find("[name = " + item.name + "]").data("type");
if (dataType === undefined) {
dataType = "text";
}
//Extend this based on the other data types you need
switch(dataType) {
case "text" :
tempValue = item.value;
break;
case "int" :
tempValue = parseInt(item.value, 10);
break;
case "float" :
tempValue = parseFloat(item.value);
break;
//Fall back for no data type defined, eg the select in this example
default :
tempValue = item.value;
break;
}
}
obj[item.name] = tempValue;
return obj;
}, {});
return formData;
}label {display:block; margin-bottom:5px;}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form id = "apiForm" method = "get" action = "">
<label>Name <input type = "text" data-type = "text" name = "Name"></label>
<label>Integer <input type = "number" data-type = "int" name = "Integer"></label>
<label>Float <input type = "number" step = "0.1" data-type = "float" name = "Float"></label>
<fieldset>
<legend>Age Range</legend>
<label><18 <input type = "radio" data-type = "text" name = "AgeRange" value = "<18"></label>
<label>>18 <input type = "radio" data-type = "text" name = "AgeRange" value = ">18"></label>
</fieldset>
<label>Country
<select name = "country">
<option value = "usa">USA</option>
<option value = "aus">Australia</option>
<option value = "other">Other</option>
</select>
</label>
<label>Product
<select name = "ProductId" data-type = "int">
<option value = "1">Apple</option>
<option value = "2">Orange</option>
<option value = "11">Pear</option>
<option value = "110">Pineapple</option>
</select>
</label>
<input type = "hidden" data-type = "text" name = "HiddenText" value = "">
<input type = "submit">
</form>Вы можете просто добавить в поле любой атрибут данных? Это было бы полезно. Как бы вы получили его при создании PlainObject?
Есть ли способ увидеть, какой тип поля ввода дает мне каждую пару ключ/значение, чтобы я мог выполнить соответствующие преобразования в
prepFormData?