Получение данных из HTML-форм в Javascript всегда производит строки?

Question

Я использую 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, когда введено значение.

Answer 1

Вам необходимо проанализировать входные данные для соответствия вашим потребностямКаждое значение формы в HTML по своей сути является строкой.

Атрибут type позволяет браузеру знать, какой вид отображаемого поля, а не тип данных значения.Возьмем, к примеру:

<input type="hidden" value="1">

HTML и javascript не могут вывести никакой информации о типе данных из hidden, это может быть строка, которая может быть int.

number в равной степени проблематично, почему по умолчанию используется значение int, как насчет чисел типа double и других типов чисел?

В моем примере выше обратите внимание, что значение заключено в кавычки, обозначающие строку.(Кавычки необязательны, но рекомендуются, но ничего не делают с типом данных.)

Чтобы действительно решить вашу проблему, я бы рассмотрел добавление атрибута данных к вашим полям, скажем 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.log(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>&lt;18 <input type="radio" data-type="text" name="AgeRange" value="<18"></label>
    <label>&gt;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>

Answer 2

Это в обычном поведении JS.номер типа и текст для проверки внутри ввода для браузеров.Они не определяют тип данных значения внутри них.По умолчанию они являются строками.Вы можете выполнять преобразования для вашего использования.Текстовое поле возвращает пустую строку, потому что по умолчанию это пустая строка, а не ноль.