Как прочитать значение поля по названию класса через jquery?

Question

[Карен Бичахчян]

На странице

<form action="#" method="post" id="mfbf" class="mform__box app">
<input type="text" name="name" placeholder="Ваше имя:" class="name" id="name">
<input type="text" name="phone" placeholder="Телефон:" class="phone" id="phone">
<button type="submit" class="btn" id="btn">Заказать обратный звонок</button></div>
</form>

JS:

$(document).ready( function() { 
    $('#mfbf').on('submit', function() {
    let name;
    let phone;
    name = $('.name');
    phone = $('.phone');
    console.log(phone).val();
    console.log(name).val();
});

При считывании по id все работает отлично, когда пытаюсь записать значения полей по .class, значения не доходят. Без .val() элементы показывает.
В чем моя ошибка ?

Answer 1

[FeST1VaL]

как минимум тут ошибка и не закрыли }):

console.log(phone).val();
console.log(name).val();

console.log(phone.val());
console.log(name.val());

Comments

[Карен Бичахчян]

как минимум тут ошибка и не закрыли }):

В низу еще код есть, не скопировал, все закрыто.

console.log(phone.val());

Такой тоже не помог.

[Froggyweb]

Карен Бичахчян, возможно на странице есть еще одна форма :)

[Карен Бичахчян]

Froggyweb, Да верно на странице есть еще формы.
Если у input полей в формах одинаковые названия классов, как же нам тогда корректно обрабатывать формы )?
Я просто думал, что строка $('#mfbf').on('submit', function() , как раз таки нам помогает обработать конкретно ту форму в которой произошла отправка. У форм разные id.

Но видимо все работает как - то иначе, если просветите чайника буду крайне благодарен)

[Froggyweb]

Карен Бичахчян,
вот например без jquery

document.addEventListener('submit', function(e) {
  e.preventDefault();
  form = e.target;
  formData = new FormData(form);
  console.log(formData.get('name'));
})

https://learn.javascript.ru/formdata

[FeST1VaL]

Карен Бичахчян, Ну я не играл в угадайку. А взял тупо ваш пример.
https://codepen.io/fest1val/pen/YzOOMwG?editors=1111

$(document).ready( function() {  
    $("#mfbf").on('submit', function() {
        const name = $(this).find('.name');
        const phone = $(this).find('.phone');
        
        console.log(phone.val());
        console.log(name.val());
    });
});