отключение кнопки отправки, отключает отправку формы [дубликат]

Только для нормального массива значений элементов:

function sortArrayOfElements(arrayToSort) {
    function compareElements(a, b) {
        if (a < b)
            return -1;
        if (a > b)
            return 1;
        return 0;
    }

    return arrayToSort.sort(compareElements);
}

e.g. 1:
var array1 = [1,2,545,676,64,2,24]
output : [1, 2, 2, 24, 64, 545, 676]

var array2 = ["v","a",545,676,64,2,"24"]
output: ["a", "v", 2, "24", 64, 545, 676]

Для массива объектов:

function sortArrayOfObjects(arrayToSort, key) {
    function compareObjects(a, b) {
        if (a[key] < b[key])
            return -1;
        if (a[key] > b[key])
            return 1;
        return 0;
    }

    return arrayToSort.sort(compareObjects);
}

e.g. 1: var array1= [{"name": "User4", "value": 4},{"name": "User3", "value": 3},{"name": "User2", "value": 2}]

output : [{"name": "User2", "value": 2},{"name": "User3", "value": 3},{"name": "User4", "value": 4}]
65
задан markzzz 17 April 2011 в 13:30
поделиться

11 ответов

Сделайте это onSubmit():

$('form#id').submit(function(){
    $(this).find(':input[type=submit]').prop('disabled', true);
});

Что происходит, вы вообще отключите кнопку, прежде чем она инициирует событие отправки.

Вероятно, вам также следует подумать об именах ваших элементов с идентификаторами или CLASS, поэтому вы не выбираете все входы типа отправки на странице.

Демонстрация: http://jsfiddle.net/userdude/2hgnZ/

(Обратите внимание: я использую preventDefault() и return false, поэтому форма не является фактической отправкой в ​​примере, оставьте это в своем использовании.)

131
ответ дан Jess 21 August 2018 в 16:30
поделиться
  • 1
    Да, на самом деле я действительно хочу привязать ВСЕ к отправке на странице. Поэтому я не возражаю против ID или CLASS таким образом :) Попытался с $('input[type=submit]').submit(function(): форма отправлена, но кнопка больше не отключается ... – markzzz 17 April 2011 в 03:36
  • 2
    Вам нужно поместить submit() в форму, а не на вход. См. Демонстрацию. – Jared Farrish 17 April 2011 в 03:37
  • 3
    Но не то, что я прошу :) Я хочу связать кнопку отправки, а не форму ... – markzzz 17 April 2011 в 12:14
  • 4
    Да, это работает! Единственная проблема в том, что у меня есть функция onSubmit в форме, так что это привязка jquery shadow it! Мне нужно реализовать это по моей первоначальной функции или изменить весь звонок! благодаря – markzzz 18 April 2011 в 00:23
  • 5
    В моем случае мне нужно было обернуть это в $ (document) .ready, чтобы заставить его работать. Наверное, очевидно. То, что не было очевидным, и немного потрудилось выяснить, что если программа, получающая POST (или GET), ищет значение кнопки отправки, если она отключена, то она не будет включена в POST. По крайней мере, это то, что показало мое тестирование. – Craig Jacobs 13 January 2014 в 06:17

Как отключить кнопку отправки

, просто вызовите функцию в событии onclick и ... возвращайте true для отправки и false, чтобы отключить отправку. ИЛИ вызывать функцию на window.onload как:

window.onload = init();

и в init () сделать что-то вроде этого:

var theForm = document.getElementById(‘theForm’);
theForm.onsubmit =  // what ever you want to do 
0
ответ дан Ankit Tyagi 21 August 2018 в 16:30
поделиться

В частности, если кто-то сталкивается с проблемой в Chrome

Что вам нужно сделать, чтобы исправить это, это использовать тег onSubmit в элементе, чтобы отключить кнопку отправки. Это позволит Chrome отключить кнопку сразу после ее нажатия, и представление формы все равно будет продолжаться ....

, например.

<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;"> 
     <input type="submit" name="submit" value="Submit" id="submit"> 
</form>
15
ответ дан Baig 21 August 2018 в 16:30
поделиться
  • 1
    Это не то, чего хочет большая часть разработчиков. Материал Javascript не должен быть встроенным в код HTML. Вероятно, использование .on('submit', function() {..}) (или .submit(function() {..})) было бы лучше. Даже если в этом случае у вас могут возникнуть проблемы с перезагрузкой .submit() в форме изнутри обратного вызова, попадая в бесконечный цикл (по крайней мере, в последней версии Opera, которую я использую, это должно использовать тот же движок, что и Chrome). – Kamafeather 23 January 2015 в 11:16
  • 2
    Это именно то, что я искал. Простая встроенная строка, которая не требует внешних библиотек и не запускается, даже если JavaScript отключен. – Seppo Erviälä 15 October 2015 в 10:15

Как уже говорилось, если вы добавите отключенный атрибут на кнопку отправки, данные не будут отправлены.

Трюк от @Valamas работает, но я нашел решение, которое очень легко реализовать :

$('#yourform').submit(function(){
    $('#mySubmitButton').addClass('disabled');
});

И вы определяете отключенный класс в CSS следующим образом:

.disabled{
    cursor:not-allowed;
}

Это будет делать то же самое, что и disabled = "disabled", но без последствий на отправленные данные.

0
ответ дан Emmanuel O 21 August 2018 в 16:30
поделиться
  • 1
    Это неверно, так как кнопка по-прежнему доступна для кликов и позволяет выполнять несколько кликов для отправки. – Skuld 17 March 2016 в 12:35
  • 2
    его просто стиль. кнопка по-прежнему доступна для кликов – Reza 24 March 2017 в 06:56

Для меня работало следующее:

var form_enabled = true;
$().ready(function(){
       // allow the user to submit the form only once each time the page loads
       $('#form_id').on('submit', function(){
               if (form_enabled) {
                       form_enabled = false;
                       return true;
               }

               return false;
        });
});

Это отменяет событие отправки, если пользователь пытается отправить форму несколько раз (нажав кнопку отправки, нажав Enter и т. д.).

0
ответ дан John Langford 21 August 2018 в 16:30
поделиться

Я использовал blockUI, чтобы избежать несовместимости с браузером на отключенных или скрытых кнопках.

http://malsup.com/jquery/block/#element

Затем мои кнопки имеют автообъект класса:

  $(".autobutton").click(
     function(event) {
        var nv = $(this).html();
        var nv2 = '<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> ' + nv;
        $(this).html(nv2);
        var form = $(this).parents('form:first');

        $(this).block({ message: null });
        form.submit();                
        });   

Затем форма выглядит так:

<form>
....
<button class="autobutton">Submit</button>   
</form>
0
ответ дан Michael 21 August 2018 в 16:30
поделиться

Ваш код действительно работает на FF, он не работает в Chrome.

Это работает на FF и Chrome.

$(document).ready(function() {
        // Solution for disabling the submit temporarily for all the submit buttons.
        // Avoids double form submit.
        // Doing it directly on the submit click made the form not to submit in Chrome.
        // This works in FF and Chrome.
        $('form').on('submit', function(e){
          //console.log('submit2', e, $(this).find('[clicked=true]'));
          var submit = $(this).find('[clicked=true]')[0];
          if (!submit.hasAttribute('disabled'))
          {
            submit.setAttribute('disabled', true);
            setTimeout(function(){
              submit.removeAttribute('disabled');
            }, 1000);
          }
          submit.removeAttribute('clicked');
          e.preventDefault();
        });
        $('[type=submit]').on('click touchstart', function(){
          this.setAttribute('clicked', true);
        });
      });
    </script>
1
ответ дан Pablo Pazos 21 August 2018 в 16:30
поделиться

Это должно позаботиться об этом в вашем приложении.

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});
4
ответ дан Shreekar Patel 21 August 2018 в 16:30
поделиться
  • 1
    Вместо этого следует использовать .prop("disabled", true). – Patrik Affentranger 12 September 2016 в 04:19

Более простой способ. Я пробовал это, и он отлично работал для меня:

$(':input[type=submit]').prop('disabled', true);
0
ответ дан Steven 21 August 2018 в 16:30
поделиться

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

Таким образом, я сохраняю значение кнопки в скрытом, которое отправляется. Имя скрытого файла совпадает с именем кнопки. Я вызываю все мои кнопки по имени button.

Например. <button type="submit" name="button" value="save">Save</button>

Исходя из этого, я нашел здесь . Просто сохраните нажатую кнопку в переменной.

$(document).ready(function(){
    var submitButton$;

    $(document).on('click', ":submit", function (e)
    {
        // you may choose to remove disabled from all buttons first here.
        submitButton$ = $(this);
    });

    $(document).on('submit', "form", function(e)
    {
        var form$ = $(this);
        var hiddenButton$ = $('#button', form$);
        if (IsNull(hiddenButton$))
        {
            // add the hidden to the form as needed
            hiddenButton$ = $('<input>')
                .attr({ type: 'hidden', id: 'button', name: 'button' })
                .appendTo(form$);
        }
        hiddenButton$.attr('value', submitButton$.attr('value'));
        submitButton$.attr("disabled", "disabled");
    }
});

Вот моя функция IsNull. Используйте или замените свою собственную версию для IsNull или undefined и т. Д.

function IsNull(obj)
{
    var is;
    if (obj instanceof jQuery)
        is = obj.length <= 0;
    else
        is = obj === null || typeof obj === 'undefined' || obj == "";

    return is;
}
11
ответ дан Valamas 21 August 2018 в 16:30
поделиться

Простым и эффективным решением является

<form ... onsubmit="myButton.disabled = true; return true;">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

Источник: здесь

2
ответ дан Zia 21 August 2018 в 16:30
поделиться
Другие вопросы по тегам:

Похожие вопросы: