Как отменить отправку формы в событии onclick кнопки отправки?


99

Я работаю над веб-приложением ASP.net.

У меня есть форма с кнопкой отправки. Код для кнопки отправки выглядит так <input type='submit' value='submit request' onclick='btnClick();'>.

Я хочу написать примерно следующее:

function btnClick() {
    if (!validData())
        cancelFormSubmission();
}

Как мне это сделать?


ай, у меня голова болит. У меня есть несколько разных submitвходов. Думаю, я попробую использовать на этой странице элементы управления на стороне сервера.
Vivian River

Ответы:


184

Тебе лучше делать ...

<form onsubmit="return isValidForm()" />

Если isValidForm()возвращается false, значит, ваша форма не отправляется.

Вам также, вероятно, следует переместить обработчик событий из встроенного.

document.getElementById('my-form').onsubmit = function() {
    return isValidForm();
};

Приятно, но мне кажется, что я не могу приступить onsubmitк работе всякий раз, когда использую ASP.net, потому что asp.net обертывает ВСЕ в своей собственной форме ...
Вивиан Ривер,

6
Вы можете использовать его второе предложение. В любом случае встроенный javascript - это дьявол.
Стивен

3
Если вы используете веб-формы ASP.NET (подсказка: не используйте), не пытайтесь включать другие формы. Они просто несовместимы. Я слышал, что ASP.NET MVC позволяет создавать веб-приложения с использованием идиоматической разметки.
Квентин

@David, если использование других форм несовместимо с веб-формами ASP.net, следует ли мне использовать только элементы управления на стороне сервера?
Vivian River

2
Кто-то другой ответил ТОЧНО, как и вы stackoverflow.com/a/23604664/1639385 . Я думаю, это было слишком случайным совпадением.
Ulysses Alves

43

Измените свой ввод на это:

<input type='submit' value='submit request' onclick='return btnClick();'>

И верните false в своей функции

function btnClick() {
    if (!validData())
        return false;
}

13

Вам нужно изменить

onclick='btnClick();'

к

onclick='return btnClick();'

и

cancelFormSubmission();

к

return false;

Тем не менее, я бы попытался избежать внутренних атрибутов событий в пользу ненавязчивого JS с библиотекой (такой как YUI или jQuery), которая имеет хороший API обработки событий и привязана к событию, которое действительно имеет значение (т.е. события нажатия кнопки).


2
Использование onclick позволит пользователю нажать Enter и обойти проверку.
Cfreak

7

Иногда onsubmitне работал с asp.net.

Я решил это очень простым способом.

если у нас есть такая форма

<form method="post" name="setting-form" >
   <input type="text" id="UserName" name="UserName" value="" 
      placeholder="user name" >
   <input type="password" id="Password" name="password" value="" placeholder="password" >
   <div id="remember" class="checkbox">
    <label>remember me</label>
    <asp:CheckBox ID="RememberMe" runat="server" />
   </div>
   <input type="submit" value="login" id="login-btn"/>
</form>

Теперь вы можете поймать это событие перед обратной передачей формы и остановить его от обратной передачи и выполнить весь необходимый вам ajax с помощью этого jquery.

$(document).ready(function () {
            $("#login-btn").click(function (event) {
                event.preventDefault();
                alert("do what ever you want");
            });
 });

5

вы должны изменить тип с submitна button:

<input type='button' value='submit request'>

вместо того

<input type='submit' value='submit request'>

затем вы получаете имя своей кнопки в javascript и связываете с ней любое действие, которое хотите

var btn = document.forms["frm_name"].elements["btn_name"];
btn.onclick = function(){...};

работал у меня, надеюсь, это поможет.


4

Вам необходимо return false;:

<input type='submit' value='submit request' onclick='return btnClick();' />

function btnClick() {
    return validData();
}

1

Почему бы не изменить кнопку отправки на обычную кнопку, а в событии щелчка не отправить форму, если она прошла ваши проверки?

например

<input type='button' value='submit request' onclick='btnClick();'>

function btnClick() { 
    if (validData()) 
        document.myform.submit();
} 

1
Нажатие Enter обойдет проверку. Использовать onSubmit
Cfreak

Тогда это вообще не будет работать, если JavaScript недоступен. <a href=" icant.co.uk/articles/pragmatic-progressive-enhancement/… о вещах, которые работают</a>.
Квентин,

1

Вам нужно onSubmit. В onClickпротивном случае кто-то может просто нажать клавишу ввода, и это обойдет вашу проверку. Что касается отмены. вам нужно вернуть false. Вот код:

<form onSubmit="return btnClick()">
<input type='submit' value='submit request'>

function btnClick() {
    if (!validData()) return false;
}

Редактировать onSubmit принадлежит тегу формы.


это не сработает. если данные действительны, вы не вернете истину. поставить return true; в конце функции btnClick ()
NickSoft

1

Это просто, просто верните false;

Приведенный ниже код находится внутри onclick кнопки отправки с помощью jquery ..

if(conditionsNotmet)
{
return false;
}

0

использовать onclick='return btnClick();'

и

function btnClick() {
    return validData();
}

2
нажатие Enter обойдет проверку. Использовать onSubmit
Cfreak

0
function btnClick() {
    return validData();
}

1
Чтобы он заработал, необходимо сделать больше. Я пробовал сделать так, чтобы функция вернула true или false, и, похоже, это не имеет никакого значения.
Vivian River

1
Его ответ правильный. Проголосовали. Вы также должны вернуть его во входном теге
Cfreak

1
Кроме того, я бы предпочел использовать ev.preventDefault()или, ev.returnValue = falseчтобы отменить поведение по умолчанию, но не предотвращать всплытие событий, если другие элементы управления наблюдают то же событие в том же элементе. Используйте return falseтолько в том случае, если вы хотите остановить всплытие события и отменить действие по умолчанию. См. Эту статью .
Klemen Slavič

Необходимость возвращать его в самом обработчике событий - это самая важная часть информации, которая отсутствовала в ответе. Без этого ответ будет неполным и недостаточно поможет, чтобы за него проголосовали.
Квентин

0
<input type='button' onclick='buttonClick()' />

<script>
function buttonClick(){
    //Validate Here
    document.getElementsByTagName('form')[0].submit();
}
</script>

2
Чтобы получить полезный ответ, эту реакцию нужно расширить. Объясните, почему это ответ на вопрос.
Jeroen Heier

0

С JQuery еще проще: работает в Asp.Net MVC и Asp.Core

<script>
    $('#btnSubmit').on('click', function () {

        if (ValidData) {
            return true;   //submit the form
        }
        else {
            return false;  //cancel the submit
        }
    });
</script>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.