提交表单时如何使用JavaScript禁用页面内容

Question

In my application when i click form submit, service call happens. When the service call happens I need to I need to disable the page conetent til the next page loads.

As i have given cursor:wait the mouse pointer changes to loading symbol and does not allow to click on the page. But still i could use tab and enter or change the values in the page.

Can anyone tell the code to disable page content using transparent image?

Answer 1

You could do that easier than with a transparent image :

$('body.waiting > *').on('click', function(e) {
    e.preventDefault();
});

I think that you should only disable the submit input for example :

$('input').attr('disabled', 'disabled');

With a "overlay", add an absolute div at the top of your page :

<div id="overlay" style="position:absolute;background:url('trans.png');left:0;top:0;width:100%;height:100%;display:none;"></div>

And than simply show it when your form is submitted :

$('#overlay').show();