Disable submit button on first click with Jquery

问题

I currently have a lightbox popup attached to a submit button that shows only the first time the submit button is clicked. Basically before someone submits a form, we want them to see this popup when they hit the submit button. And that all works fine, but now I need to make it to where on that first click, the form doesn't submit/process. However, after that first click, the submit button would need to be enabled to where they can submit the form.

Any idea how to change the below code to where the submit button does not process the form only the first time the submit button is clicked?

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

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

    });
    </script>

回答1:

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
        });
    }
});

Sets a variable on first submit, then on second submit does something different because of that variable.

Edit: Consistent quotes and code cleanup.

回答2:

Change .on() from .one(). You can declare a variable to track whether button was clicked or not.

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

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

    }
});

回答3:

add the line

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

inside the if block.

回答4:

You can use the counter to determine clicked count:

 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});
 });

回答5:

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

In Script

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

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

回答6:

simply a return false should do. alternatively e.perventDefault() may help for event bubbling.

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

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

来源：https://stackoverflow.com/questions/24646891/disable-submit-button-on-first-click-with-jquery

标签

javascript

jquery

forms

submit-button