javascript — форма отправки руля не работает
У меня есть форма, которая в руле положить отправить не работает, я должен сделать? Кто-нибудь может помочь?
<script id="chat-window-template" type="text/x-handlebars-template">
<a href="#" class="close"><i class="fa fa-times"></i></a>
<a href="#">
<span class="pull-left">
<img src="{{ user_image }}" width="40">
</span>
<span class="contact-name">{{user}}</span>
</a>
<div class="panel-body" id="chat-bill">
<form id="messageForm">
<input id="nameInput" type="hidden" class="input-medium" value="Macbook" />
<input id="messageInput" type="text" class="form-control" placeholder="Digite uma mensagem..." />
<input type="submit" value="Send" />
</form>
</div>
</script>Решение
Возможно, обработчик подключен до того, как Dom скомпилирован, попробуйте прослушать события тела и выполнить фильтрацию по селектору, следует также прослушивать добавленные в будущем узлы Dom …
$(document.body).on("submit", "#messageForm", function() {alert();});
Другие решения
Другая возможность для запуска JS во время отправки — вернуть false из атрибута onsubmit элемента формы:
template.hbs
<form id="myForm" onsubmit="myFunc(); return false;">
<input id="textInput" type="text"></input>
<input type="submit"></input>
</form>
...
<script src="js/handleForm.js" type="text/javascript"></script>
handleForm.js
function myFunc() {
console.log("yo");
}
Это войдет «йо» в консоли браузера. Это работает, потому что возвращение false в атрибуте onsubmit предотвращает действие браузера по умолчанию (которое является html-объектом, а не узлом или hbs-объектом). Таким образом, страница не будет перезагружена, и строка запроса не будет добавлена к гиперссылке, но myFunc () запустится.
Если вы хотите работать с данными формы, просто получите их из DOM, как вам нравится. Один из вариантов — поместить идентификатор в текстовый ввод (как я это сделал в template.hbs) и зацепить его с помощью jQuery следующим образом:
handleForm.js (исправлено)
function myFunc() {
var formText = $("#textInput").val();
// Do something with formText
}