Как получить данные из текстового поля с помощью JavaScript?

Question

Очень новичок в JavaScript/HTML, помогите!

У меня есть 2 текстовых поля и кнопка отправки. Я пытаюсь получить данные от каждого из них с помощью JavaScript и пока что просто поставлю их в поле предупреждения.

Однако при нажатии кнопки предупреждение просто читается «undefined», помогите!

Вот фрагмент кода:

function submitApp() { 
 
    var authValue = document.getElementsByName("appAuthor").value; 
 
    var titleValue = document.getElementsByName("appTitle").value; 
 

 
    alert(authValue); 
 
}

<input type="text" name="appAuthor" size="" maxlength="30" /> 
 
<input type="text" name="appTitle" maxlength="30" /> 
 

 
<input type="button" value="Submit my Application!" onclick="submitApp()" />

Answer 1

getElementsByName() возвращает список. Таким образом, вы можете получить первый элемент в списке:

document.getElementsByName("appAuthor")[0].value 

Answer 2

При использовании getElementsByName или getElementsByClassName, он возвращает массив элементов, так что вы должны поставить индекс для доступа к каждому элементу.

authValue = document.getElementsByName("appAuthor")[0].value; 

Answer 3

.getElementsByName() метод возвращает массив типа узла список, поэтому вам необходимо указать индекс для того, чтобы восстановить значение определенного входное (в потому, что value свойство применяется только к элементам DOM, а не целому список).

function submitApp() { 
    var authValue = document.getElementsByName("appAuthor")[0].value; 
    var titleValue = document.getElementsByName("appTitle")[0].value; 
    alert(authValue); 
} 

Answer 4

Просто добавьте этот Jquery к document.ready секции, как это:

$(document).ready(function() { 
    $('#submit').on('submit', function(e) { 
     e.preventDefault(); 
     submitApp(); 
    }); 

    function submitApp() { 
     var authValue = document.getElementsByName("appAuthor")[0].value; 
     var titleValue = document.getElementsByName("appTitle")[0].value; 

     alert(authValue); 
    } 
}); 

<input type="submit" id="submit" value="Submit my Application!"> 

Если вы хотите отправить форму удалить e.preventDefault() ;, но если вы просто хотите, значение обновите его, чтобы предотвратить отправку формы.

Answer 5

Вы могли бы потенциально изменить тип кнопки в Submit-типа и делать что-то вроде этого:

$('body').find('form').on('submit', function(e){ 
    e.preventDefault(); 
    var authValue = $('input[name="appAuthor"]').val(); 
    var titleValue = $('input[name="appTitle"]').val(); 
    //...here do whatever you like with that information 
    //Below empty the input 
    $('input').val(''); 
}) 

Или просто интерпретировать форму в виде массива, чтобы сделать вашу жизнь проще и очистить код вверх.