javascript/jquery отключить кнопку отправки при нажатии, предотвратить двойную отправку

Итак, у меня есть кнопка отправки, которая выглядит так:

<a href="#" id="submitbutton" 
onClick="document.getElementById('UploaderSWF').submit();">
<img src="../images/user/create-product.png" border="0" /></a>

Когда я дважды щелкаю по нему, очевидно, выполняется двойная отправка, и проблема в том, что я сохраняю информацию в базе данных, поэтому у меня будет дублирующаяся информация, а я этого не хочу. Этот загрузчик использует flash и javscript, и вот небольшой фрагмент кода, относящийся к отправке (если это поможет)

$.fn.agileUploaderSubmit = function() {
    if($.browser.msie && $.browser.version == '6.0') {
        window.document.agileUploaderSWF.submit();
    } else {
        document.getElementById('agileUploaderSWF').submit();
        return false;
    }
}

Спасибо вам, ребята. Я ценю вашу помощь. Это действительно то, что я не смог сделать сам, потому что у меня очень мало опыта работы с js, и я действительно не знаю, как что-то делать. БЛАГОДАРЯ.


javascript jquery double-submit-prevention
person inrob    schedule 28.07.2012    source источник

Ответы (5)


arrow_upward
12
arrow_downward

Попробуйте это вырезано:

$('#your_submit_id').click(function(){
    $(this).attr('disabled');
});

изменить 1

О, в вашем случае это ссылка, а не кнопка отправки...

var submitted = false;

$.fn.agileUploaderSubmit = function() {
    if ( false == submitted )
    {
        submitted = true;

        if($.browser.msie && $.browser.version == '6.0') {
            window.document.agileUploaderSWF.submit();
        } else {
            document.getElementById('agileUploaderSWF').submit();
        }
    }

    return false;
}

изменить 2

Чтобы упростить это, попробуйте следующее:

<!doctype html>

<html dir="ltr" lang="en">

<head>

<meta charset="utf-8" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
<!--//--><![CDATA[//><!--
    $(document).ready(function()
    {
        $('#yourSubmitId').click(function()
        {
            $(this).attr('disabled',true);

            /* your submit stuff here */

            return false;
        });
    });
//--><!]]>
</script>

</head>
<body>

<form id="yourFormId" name="yourFormId" method="post" action="#">
    <input type="image" id="yourSubmitId" name="yourSubmitId" src="yourImage.png" alt="Submit" />
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

</body>
</html>

Используйте элементы формы, такие как <input type="image" />, чтобы отправить форму, а не обычную ссылку.

Это отлично работает!

Взгляните на jQuery.post(), чтобы отправить форму.

Удачи.

изменить 3

Это хорошо работает и для меня:

<!doctype html>

<html dir="ltr" lang="en">

<head>

<meta charset="utf-8" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
<!--//--><![CDATA[//><!--
    $(document).ready(function()
    {
        var agileUploaderSWFsubmitted = false;

        $('#submitbutton').click(function()
        {
            if ( false == agileUploaderSWFsubmitted )
            {
                agileUploaderSWFsubmitted = true;

                //console.log( 'click event triggered' );

                if ( $.browser.msie && $.browser.version == '6.0' )
                {
                    window.document.agileUploaderSWF.submit();
                }
                else
                {
                    document.getElementById( 'agileUploaderSWF' ).submit();
                }
            }

            return false;
        });
    });
//--><!]]>
</script>

</head>
<body>

<form id="agileUploaderSWF" name="agileUploaderSWF" method="post" action="http://your.action/script.php">
    <input type="text" id="agileUploaderSWF_text" name="agileUploaderSWF_text" />
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

<a href="#" id="submitbutton"><img src="../images/user/create-product.png" border="0" /></a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

</body>
</html>

Надеюсь, это поможет.

person Raisch    schedule 28.07.2012
comment
Привет Райш. Спасибо за ваше решение. Я применил ваш второй код, и он действительно не работал. Все равно сдает не один раз. Должен ли я применить первый блок кода тоже? - person inrob; 29.07.2012
comment
Я думаю, вы меня неправильно поняли. Я говорю, что он по-прежнему отправляется дважды, если дважды щелкнуть. Это не работает. Есть ли в вашем уме какое-то другое решение? Спасибо. - person inrob; 29.07.2012
comment
@bornie - Прости, я почти сплю. Попробуйте мое второе редактирование, это работает для меня. - person Raisch; 29.07.2012
comment
Вы все еще можете использовать первое редактирование. Измените if ( false == submitted ) на if ( !submitted ). Я думаю, что это будет работать лучше. - person Shawn31313; 29.07.2012
comment
Я думаю, что ваше решение - правильный подход к этому. Хотя я думаю, что атрибут disabled должен иметь место после window.document.agileUploaderSWF.submit(); и/или document.getElementById('agileUploaderSWF').submit(); поэтому после отправки отключите его для отправки дважды. У вас есть идеи, как это сделать так, чтобы это действительно работало. Может быть, мы могли бы сделать что-то вроде скрытия кнопки отправки после отправки или что-то подобное... что вы думаете? Спасибо за ваши усилия до сих пор. - person inrob; 29.07.2012
comment
Спасибо за старания. Я очень ценю ваше время. Еще раз спасибо. - person inrob; 29.07.2012
comment
@bornie - Нет проблем. :-) - person Raisch; 29.07.2012
comment
Иногда это не так просто. Нам нужно убедиться, что все поля действительны, прежде чем фактически отключить кнопку. В противном случае вы можете получить недействительную форму и отключенную кнопку. - person Andrei Bazanov; 05.07.2016
comment
Спасибо, это было так полезно! - person Tiago Rangel de Sousa; 04.03.2021

arrow_upward
5
arrow_downward

Добавьте следующее в onclick:

onclick="document.getElementById('submitbutton').disabled = true;document.getElementById('UploaderSWF').submit();"

Тем не менее, вам также придется обрабатывать это предотвращение двойной отправки на стороне сервера.

person Nivas    schedule 28.07.2012
comment
Спасибо попробую. Нет проблем с серверной частью. Я могу это сделать, я знаю, что не могу полагаться только на js, потому что иногда пользователи отключают поддержку javascript в своих браузерах. - person inrob; 29.07.2012
comment
Этот пользователь использует jquery. Я не вижу необходимости в атрибуте onClick или document.getElementById. - person Daedalus; 29.07.2012
comment
@bornie, я внес правку. Это должно было быть document.getElementById(' submitbutton ').disabled - person Nivas; 29.07.2012
comment
@Daedalus Я не уверен, что он использует jquery для отправки. Его код для отправки формы — onClick="document.getElementById('UploaderSWF').submit();. Другой фрагмент, я не уверен, имеет отношение к ситуации. - person Nivas; 29.07.2012
comment
@Nivas: Нет необходимости проверять двойную отправку на сервере - если пользователь отключит JS, форма не отправит точку! Если есть альтернатива отключению JS, я согласен, потребуется проверка на стороне сервера. Но с учетом этого кода он не понадобится. - person ClarkeyBoy; 29.07.2012
comment
Разве это не должно использовать события DOM2? - person Bailey Parker; 29.07.2012
comment
Привет. Ваше решение работает частично. Когда я нажимаю «Отправить» во второй раз, он пытается подключиться к обработчику формы, но не удается. Это не очень полезно, потому что я хочу отключить кнопку (чтобы ее нельзя было нажать) и разрешить отправку формы. Я хочу полностью игнорировать другие клики. В нынешнем виде форма просто зависает и не переходит на другую страницу, что важно, потому что именно так пользователь узнает, что форма была отправлена. Можете ли вы исправить что-то об этом? Спасибо - person inrob; 29.07.2012

arrow_upward
0
arrow_downward

Это отключит все кнопки отправки и ссылки с отправкой класса или отправкой данных атрибута в форме, если щелкнуть одну из них:

$(document).ready(function() {
    $('form').submit(function() {
        $(this).find('input[type="submit"]').attr('disabled', true);
        $(this).find('a[data-submit], a.submit').click(function() {
            return false;
        });
    }
});

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

person Community    schedule 29.07.2012
comment
Ну, проблема в том, что, если вы посмотрите повнимательнее, кнопка отправки не находится внутри ‹form›‹/form›. Он отделен. Вы думаете, что ваш код все еще действителен? - person inrob; 29.07.2012

arrow_upward
0
arrow_downward

В соответствии с http://api.jquery.com/prop/ вы можете добавлять и удалять disabled с помощью функции .prop(), а не функций .attr() и .removeAttr().

Чтобы добавить свойство:

.prop("disabled", true);

Чтобы удалить свойство:

.prop("disabled", false);

Надеюсь, что это поможет вам.

person Akanksha Kushwaha    schedule 27.03.2019

arrow_upward
0
arrow_downward

как предложено здесь ( с примерами):

если вы хотите убедиться, что зарегистрированное событие запускается только один раз, вы должны использовать jQuery [one][1] :

.one(события [, данные], обработчик) Возвращает: jQuery

Описание: Прикрепите обработчик к событию для элементов. Обработчик выполняется не более одного раза для каждого элемента каждого типа события.

person loic.jaouen    schedule 14.11.2019