简体   繁体   中英

Ask if user is sure, then disable button and submit form

I ask the user "Are you sure?" when clicking on a form submit button:

{{ Form::open(array('url' => 'myhome/pic-remove', 'onsubmit' => 'return confirm(\'Are you sure?\');')) }}

And I deactivate the submit button on click:

$('#submitbutton').click(function() {
    $('#submitbutton').hide();
    $('#isloading').show();  
});

The Problem is, the submit button is also deactivated, if the user 'is not sure' and clicks 'cancel'.

How can I deactivate the submit button only if user 'is sure' on the first question and clicks 'ok' ?

edit:

ok i have it like this now, seems to work

$('#submitbuttonconfirm').click(function() {
    var r = confirm('Are you sure?');
    if (r == true)
    {
        $('#submitbuttonconfirm').hide();
        $('#isloading').show();
        return true;
    }
    else
    {
        return false;
    }      
});

I think the problem is, that the click event is fired before the submit event, so you hide the submit button before you even ask the user.

You can use jQuery to handle submit event instead of of using click and disable the button there:

{{ Form::open(array('url' => 'myhome/pic-remove')) }}
$('form').submit(function(e) { // Use the id of the form here, if you have more than one
    if(confirm('Are you sure?')) {
        $('#submitbutton').hide();
        $('#isloading').show();
    } else {
        return false;
    }
});

I assume the top section is you sending the JavaScript to be executed from the server to the client. I'm not sure why you're doing that instead of writing it as JavaScript directly but I suppose it doesn't matter. As Givi said, get the response from the confirm dialog and then use it as a decision point. Since I'm not sure what this is, I'm only guessing as to this code but it should give you an idea.

{
    { Form::open(
        array(
            'url' => 'myhome/pic-remove',
            'onsubmit' => 'if(confirm(\'Are you sure?\')){ $(\'#submitbutton\').hide(); $(\'#isloading\').show(); return true; } return false; '
        )
    ) }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM