Отключить кнопку отправки при первом нажатии с помощью Jquery

В настоящее время у меня есть всплывающее окно лайтбокса, прикрепленное к кнопке отправки, которое отображается только при первом нажатии кнопки отправки. По сути, прежде чем кто-то отправит форму, мы хотим, чтобы они увидели это всплывающее окно, когда нажмут кнопку отправки. И все это прекрасно работает, но теперь мне нужно сделать так, чтобы при первом щелчке форма не отправлялась/не обрабатывалась. Однако после этого первого щелчка кнопка отправки должна быть включена, чтобы они могли отправить форму.

Любая идея, как изменить приведенный ниже код, чтобы кнопка отправки не обрабатывала форму только при первом нажатии кнопки отправки?

   <script type="text/javascript">
    $('#Submitbutton').one("click",function(e) {

    $('#lp').lightbox_me({
    centered: true,
    overlayCSS:{background: '#481d33', opacity: .45},
    overlaySpeed:0,
    lightboxSpeed:0
    });

    });
    </script>

javascript forms jquery submit-button
person user1610904    schedule 09.07.2014    source источник
comment
Вы можете показать больше примера кода? или Экспресс подробности.   -  person cyberoot    schedule 09.07.2014

Ответы (6)


arrow_upward
5
arrow_downward 

var hasClicked = false;
$('#Submitbutton').on('click',function(e) {
    if (hasClicked === true) {
        //submit form here
    } else {
        e.preventDefault();
        hasClicked = true;
        $('#lp').lightbox_me({
            centered: true,
            overlayCSS:{background: '#481d33', opacity: .45},
            overlaySpeed:0,
            lightboxSpeed:0
        });
    }
});

Устанавливает переменную при первой отправке, затем при второй отправке делает что-то другое из-за этой переменной.

Изменить. Согласованные кавычки и очистка кода.

person MarshallOfSound    schedule 09.07.2014
comment
Ваш код не будет работать, так как вы прослушиваете щелчок только один раз. - person jshthornton; 09.07.2014
comment
Спасибо, я забыл об этом, просто изменил его на on :D - person MarshallOfSound; 09.07.2014
comment
Это лучший ответ. Он использует логическое значение (небольшой объем памяти), он покрывает код вашего лайтбокса и работает быстро. Единственное, что я бы сделал, чтобы улучшить его, это если вы используете привязку элемента формы для отправки формы вместо нажатия кнопки отправки. - person jshthornton; 09.07.2014

arrow_upward
1
arrow_downward

Изменить .on() с .one(). Вы можете объявить переменную для отслеживания того, была ли нажата кнопка или нет.

var isAlreadytClicked = false;
$('#Submitbutton').on("click", function (e) {
    if (isAlreadytClicked == false) {
        isAlreadytClicked = true;
        return;
    }

    if (isAlreadytClicked) {
        //Do whatever you want on subsequent click

    }
});
person Satpal    schedule 09.07.2014

arrow_upward
1
arrow_downward

добавить строку

$('#SubmitBtn').attr('disabled',false);

внутри блока if.

person vaibhavaj2    schedule 09.07.2014

arrow_upward
0
arrow_downward

Вы можете использовать счетчик для определения количества кликов:

 var count = 0;
 $('#Submitbutton').click(function(e) {
 count++;
 if(count==1)
 return;//return if clicked first time
 $('#lp').lightbox_me({centered: true,overlayCSS:{background: '#481d33', opacity: .45},overlaySpeed:0,lightboxSpeed:0});
 });
person Milind Anantwar    schedule 09.07.2014

arrow_upward
0
arrow_downward 

<input type="button"  id="SubmitBtn" value="Submit" onclick="return submitData();" disabled="disabled" >

В сценарии

//create a global variable for clicked or not
var submitBtnClicked = false;

function submitData()
{
 if(submitBtnClicked )
 {
   $('#SubmitBtn').attr('disabled',false);
   submitBtnClicked =true;
 }    
}
person Marvil Joy    schedule 09.07.2014

arrow_upward
-1
arrow_downward

просто нужно вернуть false. в качестве альтернативы e.perventDefault() может помочь при всплытии событий.

  $('#Submitbutton').one("click",function(e) {

     $('#lp').lightbox_me({
     centered: true,
     overlayCSS:{background: '#481d33', opacity: .45},
     overlaySpeed:0,
     lightboxSpeed:0
     });
    e.perventDefault();
     return false;
  });
person Aliendroid    schedule 09.07.2014
comment
.one() должен запускать функцию один раз - person Aliendroid; 09.07.2014