JavaScript / jQuery Отключить кнопку Отправить на клик, предотвратить двойную отправку

StackOverflow https://stackoverflow.com//questions/11705337

Вопрос

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

<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, и я не знаю, как делать вещи. Спасибо.

Это было полезно?

Решение

Попробуйте это поскользнуться: 

$('#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 () , чтобы отправить форму.

Удачи.

EDIT 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>
.

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

Другие советы

Добавьте следующее на генеракодицетагкод: 

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

Это сказано, вам придется справиться с этим двойным представлением предотвращения на стороне сервера.

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

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

.prop("disabled", true);
.

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

.prop("disabled", false);
.

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

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top