Отправить данные формы в Javascript при отправке

Question

Хорошо, я чувствую, что это должно быть очень просто; так что либо я полностью пропустил вопрос о вопросах здесь и других веб-сайтах, которые я прочитал, либо не был задан в том же контексте ....

У меня есть элемент ДЕЙСТВИТЕЛЬНО простой формы (см. ниже)

<form> 
    <input type="text" id="searchTerm" /> 
    <input type="submit" value="Submit" id="submitButton" /> 
</form> 

и в основном все, что я хочу сделать, когда кнопка нажата Submit, это имеет значение, введенное в поле text передается в JavaScript Function и консоли вошедшего (на данный момент).

Похоже, его попросили миллион раз, но вопросы, которые я прочитал, не отвечают на мой вопрос (я не думаю).

Редактировать Спасибо за все ответы; самая большая проблема заключается в том, что я пытался ссылаться на функцию во внешнем файле Javascript, который вызывался после элемента формы.

Answer 1

Что-то вроде этого?

document.getElementById('theform').onsubmit = function() { 
    console.log(document.getElementById('searchTerm').value); 
    return false; 
}; 

JSFiddle здесь: https://jsfiddle.net/km7rt62v/

Это важно return false; предотвратить поведение по умолчанию в конце вашего обработчика представить, так как в противном случае форма будет размещать и перезагрузите страницу.

Как показали другие, также возможно использовать атрибут html onsubmit элемента формы, это личное предпочтение, но я предпочитаю более чистое разделение между JS и HTML.

Edit: Так как я поступил ответ и вопрос с тегами JQuery, вот JQuery эквивалент:

$('#theform').submit(function() { 
    console.log($('#searchTerm').val()); 
    return false; 
}); 

Answer 2

Это простой JavaScript. Вы также можете использовать jQuery.

function checkForm(){ 
 
    console.log(document.getElementById('searchTerm').value); 
 
    return false; 
 
}

<form onsubmit='return checkForm();'> 
 
    <input type="text" id="searchTerm" /> 
 
    <input type="submit" value="Submit" id="submitButton" /> 
 
</form>

Answer 3

есть атрибут, который можно использовать под названием onsubmit, когда вы включаете вход с типом представить в вашей форме. Вот некоторая документация http://www.w3schools.com/tags/ev_onsubmit.asp.

Код будет выглядеть примерно так

<form onsubmit="submitForm()"> 
    <input type="text" id="searchTerm"/> 
    <input type="submit" value="Submit" id="submitButton" /> 
</form> 

<script> 
    function submitForm() { 
    let input = document.querySelector('#searchTerm'); 
    console.log(input.value); 
    return false; 
    } 
</script> 

Answer 4

Отправить форму:

JS:

var searchForm= document.getElementById('searchForm'); 
var submitButton = document.getElementById('submitButton'); 

searchForm.onsubmit= function() { 
    console.log(searchTerm.value); 
}; 

HTML:

<form id="searchForm"> 
    <input type="text" id="searchTerm" /> 
    <input type="submit" value="Submit" id="submitButton" /> 
</form> 

По щелчку на кнопке:

JS:

var searchTerm = document.getElementById('searchTerm'); 
var submitButton = document.getElementById('submitButton'); 

submitButton.onclick = function() { 
    console.log(searchTerm.value); 
}; 

HTML:

<form> 
    <input type="text" id="searchTerm" /> 
    <input type="button" value="Submit" id="submitButton" /> 
</form> 

См демо Here

Answer 5

Чтобы иметь такую ​​функцию во внешнем файле, лучше всего, чтобы проводьте событие отправки в событие onload:

window.onload=function() { 
 
    document.getElementById("form1").onsubmit=function(e) { 
 
    e=e?e:event; 
 
    e.preventDefault(); // cancel the submit 
 
    var val = document.getElementById("searchTerm").value; 
 
    console.log(val); 
 
    } 
 
}

<form id="form1"> 
 
    <input type="text" id="searchTerm" /> 
 
    <input type="submit" value="Submit" id="submitButton" /> 
 
</form>

JQuery версия:

$(function() { 
 
    $("#form1").on("submit",function(e) { 
 
    e.preventDefault(); // cancel the submit 
 
    var val = $("#searchTerm").val(); 
 
    console.log(val); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form id="form1"> 
 
    <input type="text" id="searchTerm" /> 
 
    <input type="submit" value="Submit" id="submitButton" /> 
 
</form>

Answer 6

Вы помечено это с JQuery, так вот ответ JQuery. Вам нужно использовать обработчик событий .submit().

$("form").submit(function(e) { 
 
    console.log("form data: %o", $(this).find("#searchTerm").val()); 
 
    e.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" id="searchTerm" /> 
 
    <input type="submit" value="Submit" id="submitButton" /> 
 
</form>

Этот код будет присоединить обработчик к <form>onsubmit событие:

Answer 7

Так что главный вопрос я включил <script> элемент, ссылки на мой внешний JavaScript файл, на дно моего элемента <body>; что во время создания формы он не знал, о какой функции Javascript я говорил.

Благодаря всем тем, что помогли, и это было решение ....

HTML

<head> 
    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <!-- Custom JavaScript --> 
    <script src="js/wiki.js"></script> 
</head> 
<body> 
    <form id="theform" onsubmit="test(this.searchTerm.value)"> 
    <input type="text" id="searchTerm" /> 
    <input type="submit" value="Submit" id="submitButton" /> 
    </form> 
</body> 
</html> 

JavaScript

$(document).ready(function() { 

    test = function(value) { 
     console.log(value); 
    return false; 
    }; 

});