Как изменить строку в число из формы? (Продолжает превращать его в строку)

1

Я немного смущен тем, почему мой javascript не превращает мои строки в цифры.

            <div class="form-group">
                <h3>Question #1</h3>
                <label for="exampleSelect1">Question?</label>
                <select class="form-control" id="q1">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>

JavaScript:

$("#submitBtn").on("click", function(){
  event.preventDefault();
    var q1 = $("#q1").val().trim();
    var q2 = $("#q2").val().trim();
    var q3 = $("#q3").val().trim();
    var q4 = $("#q4").val().trim();
    var q5 = $("#q5").val().trim();
    var q6 = $("#q6").val().trim();
    var q7 = $("#q7").val().trim();
    var q8 = $("#q8").val().trim();
    var q9 = $("#q9").val().trim();
    var q10 = $("#q10").val().trim();

  var newFriend = {
    name: $("#inputName").val().trim(),
    photo: $("#inputPic").val().trim(),
    scores: [
    parseFloat(q1),
    parseFloat(q2),
    parseFloat(q3),
    parseFloat(q4),
    parseFloat(q5),
    parseFloat(q6),
    parseFloat(q7),
    parseFloat(q8),
    parseFloat(q9),
    parseFloat(q10),

    ]
  };

Когда я console.log(newFriend), он продолжает превращать оценки в строки. Я пробовал Number(), parseInt(), и он все еще не работает.

  • 0
    Это может быть просто способ, которым console.log выводит данные. При сохранении этих данных в вашей базе данных (я полагаю) это правильно?
  • 0
    Да, я получаю данные из моего API
Показать ещё 3 комментария
Теги:

2 ответа

0
Лучший ответ

Ваш код работает так, как должен.

Но, основываясь на некоторых комментариях, которые вы сделали, кажется, что этот код работает на сервере, а не на клиенте, и поэтому отправляется через HTTP, где все является строкой. Вы действительно должны отредактировать свой вопрос, чтобы полностью объяснить среду, в которой работает код.

Вы можете увидеть сокращенную версию вашего кода, работающую ниже, и вы увидите, что данные являются числовыми в массиве. Я только что изменил событие, которое запускает код в событие change select.

Наконец, нет необходимости вызывать .trim() в ваших значениях select потому что вы не включаете пробелы в элементах option для начала. trim() следует использовать всякий раз, когда есть ввод пользователя.

$("#q1").on("change", function(){
    var q1 = $("#q1").val().trim();


  var newFriend = {
    scores: [
      parseFloat(q1),

    ]
  };
  
  console.log(newFriend.scores[0], typeof newFriend.scores[0]);
   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <h3>Question #1</h3>
  <label for="exampleSelect1">Question?</label>
  <select class="form-control" id="q1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
 </select>
</div>
0

Вы можете использовать parseInt и передать также radix. Упрощенный унарный оператор также может использоваться для преобразования строки в число.

Обратите внимание, что в параметре атрибута значения не было.

$("#submitBtn").on("click", function() {
  event.preventDefault();
  var q1 = parseInt($("#q1").val().trim(), 10)
  console.log(typeof q1)

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <h3>Question #1</h3>
  <label for="exampleSelect1">Question?</label>
  <select class="form-control" id="q1">
                    <option value = "1" >1</option>
                    <option value = "2">2</option>
                    <option value = "3">3</option>
                    <option value = "4">4</option>
                    <option value = "4">5</option>
                </select>
</div>
<button type="submit" id="submitBtn">Submit</button>
  • 0
    Похоже, это будет работать, но мой сервер все еще отправляет обратно строку. Это потому, что я использую body-parser как req.body?
  • 0
    Когда атрибут 'value' не указан для 'option', текстовое содержимое элемента становится его значением. Атрибут нужен только тогда, когда вы хотите, чтобы значение было чем-то другим.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню