Сделать кнопку отправки вне элемента формы - не работает

0

Я хочу сделать кнопку вне элемента формы, которая будет проверять, были ли заполнены входы, если они есть, а затем отправить форму, если нет, сделать что-то еще (например, вызвать предупреждение или что-то еще).

Я сделал эту скрипку, и она не сработает:

http://jsfiddle.net/fe9Nk/

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();
    }
});
Теги:
forms

4 ответа

1
Лучший ответ

Проблема здесь в области переменных. Вы можете сделать это:-

$("#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();
    }
});

FIDDLE DEMO

Эта проблема возникла с тех пор, вы сохранили все переменные за пределами события click. Таким образом, он всегда будет хранить пустые значения при загрузке страницы, и, следовательно, ваш код не будет работать. Но при нажатии на тег привязки вам нужно получить текущие значения в текстовых окнах, а затем выполнить все проверки.

Надеюсь, ты понял!

  • 1
    Да, это должно решить это ... технически это не объем, а время. Эти переменные доступны для обработчика событий, но они устанавливаются слишком рано.
  • 0
    @MattBrowne: Да, верно. Вы получили основную концепцию в принципе!
Показать ещё 3 комментария
0

Возможно, вы захотите изучить форму funcion onsubmit, где вы можете вызвать функцию js, что вы написали, и вернуть true или false. Вот простой пример: http://www.w3schools.com/js/js_form_validation.asp

После этого легко вызвать форму submit из любого места, где вы хотите, с помощью jQuery.

$("#myForm").submit();

или с javascript:

document.getElementById("myForm").submit();
0

Вы должны получить значение после клика

$("#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();
}
});
  • 0
    Прекрасно работает, единственная проблема в том, что я могу отправить форму, заполнив только 1 введенный текст, и я подумал, что попросил заполнить все входные данные?
  • 0
    в операторе if вы должны использовать OR вместо AND
Показать ещё 3 комментария
0

Попробуй это

$(document).on("click", "#to-top", function() {
    //Your code
});
  • 0
    Нет необходимости использовать делегирование событий здесь ...
  • 0
    Большая защита, точка взята

Ещё вопросы

Сообщество Overcoder
Наверх
Меню