Я хочу сделать кнопку вне элемента формы, которая будет проверять, были ли заполнены входы, если они есть, а затем отправить форму, если нет, сделать что-то еще (например, вызвать предупреждение или что-то еще).
Я сделал эту скрипку, и она не сработает:
HTML:
<form action="javascript:alert('submitted');" method="post">
<input type="text" id="inp_name">
<input type="text" id="inp_address">
<input type="text" id="inp_zipcode">
<input type="text" id="inp_city">
<input type="submit" value="Submit form">
</form>
<a href="#" id="to-top">CLICK ME TO SUBMIT FORM OUTSIDE FORM ELEMENT</a>
Javascript:
var bas_name = $("#inp_name").val();
var bas_address = $("#inp_address").val();
var bas_zipcode = $("#inp_zipcode").val();
var bas_city = $("#inp_city").val();
$("#to-top").click(function() {
if(bas_name == "" && bas_address == "" && bas_zipcode == "" && bas_city == "") {
alert("nonoonnono!");
} else {
$("form").submit();
}
});
Проблема здесь в области переменных. Вы можете сделать это:-
$("#to-top").click(function () {
var bas_name = $("#inp_name").val();
var bas_address = $("#inp_address").val();
var bas_zipcode = $("#inp_zipcode").val();
var bas_city = $("#inp_city").val();
if (bas_name == "" && bas_address == "" && bas_zipcode == "" && bas_city == "") {
alert("nonoonnono!");
} else {
$("form").submit();
}
});
Эта проблема возникла с тех пор, вы сохранили все переменные за пределами события click. Таким образом, он всегда будет хранить пустые значения при загрузке страницы, и, следовательно, ваш код не будет работать. Но при нажатии на тег привязки вам нужно получить текущие значения в текстовых окнах, а затем выполнить все проверки.
Надеюсь, ты понял!
Возможно, вы захотите изучить форму funcion onsubmit, где вы можете вызвать функцию js, что вы написали, и вернуть true или false. Вот простой пример: http://www.w3schools.com/js/js_form_validation.asp
После этого легко вызвать форму submit из любого места, где вы хотите, с помощью jQuery.
$("#myForm").submit();
или с javascript:
document.getElementById("myForm").submit();
Вы должны получить значение после клика
$("#to-top").click(function() {
var bas_name = $("#inp_name").val();
var bas_address = $("#inp_address").val();
var bas_zipcode = $("#inp_zipcode").val();
var bas_city = $("#inp_city").val();
if(bas_name == "" && bas_address == "" && bas_zipcode == "" && bas_city == "") {
alert("nonoonnono!");
} else {
$("form").submit();
}
});
Попробуй это
$(document).on("click", "#to-top", function() {
//Your code
});