We Keep Coding

How to disable submit button of form on page loads?

I want to disable submit button when page loads and after finishing the loading of page it becomes active can anyone help me how to do that
<form>
Firstname:
<input type="text">
<button type="submit" class="btn btn-primary">Submit</button>
</form>

Disable the button in HTML and give it an ID - this is assuming you do not need to support browsers with JavaScript disabled.
<form>
Firstname:
<input type="text">
<button id="subbut" type="submit" class="btn btn-primary" disabled>Submit</button>
</form>
Then you can do
jQuery:
$(function() {
$("#subbut").attr("disabled",false); // or removeAttr("disabled")
});
Plain JS
window.addEventListener("load", function() {
document.getElementById("subbut").disabled=false; // or removeAttribute("disabled")
})

Try this once
<form>
Firstname:
<input type="text">
<button type="submit" class="btn btn-primary" disabled>Submit</button>
</form>
<script>
$(document).ready(function(){
$('button').attr('disabled',false);
});
</script>

<form>
Firstname:
<input type="text">
<button type="submit" class="btn btn-primary" disabled="disabled">Submit</button>
</form>
and then in jQuery
<script type="text/javascript">
$(function() {
$('button').attr('disabled',false);
});
</script>

Add disabled="disabled" attribute to your button and this script:
<button type="submit" class="btn btn-primary" disabled="disabled">Submit</button>
<script type="text/javascript">
$(document).ready(function() {
$('button').removeAttr('disabled');
});
</script>
After the page is loaded the ready event will be fired and the disabled button becomes available.

Set your button as disabled
<button id="myButton" type="button" disabled>Click Me!</button>
and on document ready, enable it using below code:
$( document ).ready(function() {
$('#myButton').prop('disabled', false);
});

Step 1:
Inside init method in c#, you can disable the button by applying css dynamically.
controlname.attributes.add("disabled","disable");
Step 2:
Inside pageload, at the end of method, you can enable the button again by applying css dynamically.
controlname.attributes.add("disabled","enable");

Unable to disable a button if button has class attribute

I have four buttons and three of them have a class called "multiple". the reason for this is they would be worked on by a jquery function.
<input type="submit" id="add" value="Add" <?php set_button_status(1,'is_add') ?>><br/>
<input type="submit" class="multiple" id="publish" name="publish" value="publish"><br/>
<input type="submit" class="multiple" id="unpublish" name="unpublish" value="unpublish"><br/>
<input type="submit" id="trash" class="multiple" name="trash" value="trash" <?php set_button_status(1,'is_delete') ?>><br/>
The set_button_status(1,'is_add') and set_button_status(1,'is_delete') function will return the string "disabled" to disable the add and thrash buttons respectively if the condition is true. However, only the add button is etting disabled.
When I remove the class "multiple" to the other buttons "publish" and "unpublish", the "trash" can now be disabled.
Why can't I disable a button if it has other buttons with the same class? How can I fix this?

I created a fiddle with your code, assuming both .php calls return 'disabled'. It renders both 'Add' and 'trash' buttons as disabled:
<input type="submit" id="add" value="Add" disabled><br/>
<input type="submit" class="multiple" id="publish" name="publish" value="publish"><br/>
<input type="submit" class="multiple" id="unpublish" name="unpublish" value="unpublish"><br/>
<input type="submit" id="trash" class="multiple" name="trash" value="trash" disabled><br/>

I have used the above code in my PC and everything is fine.(Without PHP)
First You put ;(semicolon) at the end of every PHP statement.
And /> instead of just > at the end of every input tag.
Let me know the results after that.

How to redirect form using click here for submit?

anyone can help i have a form, i want do something like this :
http://criminalcase.ha-lab.com/
there is a boutom "Click Here Before Submit", when you click on it you are redirected to the same page(*url dont change), and you can see the bottom submit (*no click here for submit). Thank you in advance for any help ^^
<form method="get" action="?">
id : <input name="id" / size="45"/><br>
Sig : <input name="sig" <br>
<input type="submit" name="submit" value="==>click here befor submit<==" id="submit" />
</form>
what i want is when i click on click here befor submit it will redirect me to to do same page but with boutom submit

Something like this? It's really difficult understand you without code.
$("#showSubmit").click(function(){
$(this).hide();
$("#submitButton").show();
})
.hidden{ display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>input</label><input type="text"/>
<input type="submit" class="hidden" id="submitButton" value="submit" />
Click here before submit
</form>

I am also trying to understand What Dr House is asking, I would like to slightly modify what JuaRoAI has done, and do something like this, try it and let us know:
$("#showSubmit").click(function(){
$(this).hide();
$("#submitButton").show();
})
.hidden{ display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>input</label><input type="text"/>
<input type="submit" class="hidden" id="submitButton" value="submit" />
Click here before submit
</form>

jQuery does not respond to button click (not submit)

I have one form on a page with no submit button:
<form id='voteForm' action='xyz' method='post'>
<fieldset>
<input type="hidden" id="task_id" value="{$feature_details['task_id']}" />
<input type="hidden" id="vote_id" value="{$vote['vote_id']}" />
<input type="hidden" id="vote_type" value="{$vote['vote_type']}" />
<input type="hidden" id="vote_rating" value="{$vote['vote_rating']}" />
<input id="btn-update-vote" class="btn btn-sm btn-primary" type='button' disabled="disabled" value="{L('SubmitVote')}">
</fieldset>
</form>
I cannot get jQuery to trap a click event on the 'SubmitVote' button
neither of these appear to work:
$('#btn_update_vote').click(function() {
console.log('Click: #btn_update_vote');
})
$('form#voteForm').on('click', '#btn_update_vote', function() {
console.log('Click: #btn_add_comment');
})
I do not understand what can cause this!
Any help appreciated!
BTW: I CAN set the disabled attribute on the button using jQuery and on 'documentReady' I log the button to the console:
[Log] [ (tracker, line 446)
<input id=​"btn-update-vote" class=​"btn btn-sm btn-primary" type=​"button" disabled=​"disabled" value=​"Cast Your Vote">​
]

Your button attr disabled="disabled" make it unclickable, even inline onclick listen.

<input id="btn-update-vote"
$('#btn_update_vote').click( //...
You declared your id with dashes (-), not underscores (_), so you need
$('#btn-update-vote').click(
Also #Richer is correct

Jquery toggle buttons deselect using .siblings

I am trying to make an interface element where there are three buttons.
Only one or none buttons can be selected. I.e. the buttons are faded out to start with, when the user clicks one it lights up, the other two remain faded.
If the user then clicks another button, any other buttons get faded out and the one the user clicked on highlights. This is not a problem.
The problem comes when I am trying to get a currently highlighted button to go back to a faded state if the user clicks on it, so you are left with no highlighted buttons.
This is where I have got to:
$('.gradeButtons button').click(function() {
if (!$(this).siblings().hasClass('quoteGrading'))
{
$('.gradeButtons button').addClass('quoteGrading')
}
if (!$(this).hasClass('quoteGrading'))
{
$(this).addClass('quoteGrading')
} else {
$(this).removeClass('quoteGrading')
}
})
My HTML:
<div class="control-group gradeButtons">
<button type="button" class="btn btn-danger quoteGrading">H</button>
<button type="button" class="btn btn-warning quoteGrading">W</button>
<button type="button" class="btn btn-info quoteGrading">C</button>
</div>
'quoteGrading' provides the faded out/inactive effect.
How can I make it work properly where only one or none buttons can be highlighted (not have 'quoteGrading' class applied)?

Live Demo
$(function() {
$('.gradeButtons button').on("click",function() {
$(this).siblings().removeClass('quoteGrading');
$(this).toggleClass('quoteGrading');
$("input.inp").hide();
$("#"+this.id+"input").toggle($(this).hasClass("quoteGrading"));
});
});
using
<div class="control-group gradeButtons">
<button type="button" id="H" class="btn btn-danger">H</button>
<button type="button" id="W" class="btn btn-warning">W</button>
<button type="button" id="C" class="btn btn-info">C</button><br />
<input type="text" class="inp" placeholder="H - message" id="Hinput" /><br/>
<input type="text" class="inp" placeholder="W - message" id="Winput" /><br/>
<input type="text" class="inp" placeholder="C - message" id="Cinput" /><br/>
</div>
and
.quoteGrading { color:red }
.inp { display:none }