display button only when page loads completely

Question

I have a button like this:

<input type="submit" id="product_197_submit_button" class="wpsc_buy_button" name="Buy" value="Add To Cart">

Now the thing is that if user clicks button before all scripts are loaded -> I get error in shopping cart. Is there a way to disable clicking on the button (or hide it from display) UNTIL complete page is loaded into users browser ?

Thanks, Peter

Answer 1

Hide it through css and then show it when page loads.

Css

.wpsc_buy_button{
   display:none;
}

JS

$(document).ready(function(){
    $("#product_197_submit_button").show();
});

Alernatively you can disable the button by default and then enable in on page load. Try this.

Markup change

  <input type="submit" disabled="disabled" id="product_197_submit_button" 
class="wpsc_buy_button" name="Buy" value="Add To Cart">

JS

$(document).ready(function(){
    $("#product_197_submit_button").prop("disabled", false);
});