We Keep Coding

Disable the button during the initial load, enable after the submit

I want to have the btnDisableFilteredList disabled during the initial page load. Then I want to enabled the enable it after the btnSearch button is click. How do I do it using jQuery?
<div class="panel panel-heading">
<form id="frmAutoCritical">
Search: <input type="text" name="SearchString" /><input type="submit" id="btnSearch" value="Filter" />
<input type="button" id="btnDisableFilteredList" value="Disable Filtered List" />
</form>
</div>

You need to give the btnDisableFilteredList the disabled prop first:
disabled="disabled"
Then setup an on click event listener on the btnSearch input to remove the disabled prop from the btnDisableFilteredList input.
$(function() {
$("#btnSearch").on("click", (e) => {
e.preventDefault();
$("#btnDisableFilteredList").prop("disabled", false);
});
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="panel panel-heading">
<form id="frmAutoCritical">
Search: <input type="text" name="SearchString" />
<input type="submit" id="btnSearch"value="Filter"/>
<input type="button" id="btnDisableFilteredList" value="Disable Filtered List" disabled="disabled"/>
</form>

Try in this way:
$(document).ready(function() {
$("#btnSearch").click(function () {
$("#btnDisableFilteredList").css("display", "inline-block");
});
});
#btnDisableFilteredList {
display: none;
}
<div class="panel panel-heading">
<form id="frmAutoCritical">
Search:
<input type="text" name="SearchString" />
<input type="button" id="btnSearch" value="Filter" />
<input type="button" id="btnDisableFilteredList" value="Disable Filtered List" />
</form>
</div>
Look at this codepen
I used type="button" instead of type="submit" to avoid reloading the page, then to submit the form you can use jQuery's AJAX Function

Show tooltip when the button isn't clicked

I want to show a tooltip when the user didn't click the specific button while submitting a form. I prevent the form from submitting and I want to show just the tooltip to say "you should click first the button". Thank's in advance.
<form id="signUpForm">
<button type="button" id="agree" class="btn btn-default" data-color="info" tabindex="7">I Agree</button>
<input type="hidden" id="hidden" value="0">
<input type="submit" id="btn-submit" value="submit">
</form>
<script>
$('#signUpForm').submit(function(e) {
if ($('#hidden').val() == '0') {
e.preventDefault();
//show the tooltip that "you first click the agree button" and fadeOut(1000)
}
});
</script>

try this, make button type as button instead of submit:
<form id="signUpForm" >
<button type="button" id="agree" class="btn btn-default" data-color="info" tabindex="7" >I Agree</button>
<input type="hidden" id="hidden" value="0">
<input type="button" id="btn-submit" value="submit">
</form>
<script>
$('#btn-submit').click(function(e){
if($('#hidden').val()=='0'){
}
else {
$('#signUpForm').submit();
}
});
</script>

Check below script it will helpful to you for display the tooltip.
<script>
$(".tooltip").hide();
$('#signUpForm').submit(function (e) {
if ($('#hidden').val() == '0') {
e.preventDefault();
//show the tooltip that "you first click the agree button" and fadeOut(1000)
$("#signUpForm").find(".tooltip").stop().fadeIn();
setTimeout(function () {
$("#signUpForm").find(".tooltip").stop().fadeOut();
}, 1000);
}
});
</script>
HTML Part
<form id="signUpForm">
<button type="button" id="agree" class="btn btn-default" data-color="info" tabindex="7">I Agree</button>
<input type="hidden" id="hidden" value="0">
<input type="submit" id="btn-submit" value="submit">
<div class="tooltip">
you first click the agree button
</div>
</form>

input type button enable/disable attribute

How to disable/enable button depending on whenever itemToAdd javascript property is empty or not
<input type="text" data-bind='value:itemToAdd, valueUpdate: "afterkeydown"' />
<input type="button" data-bind="click:$parent.addItem" value="add" />
here's jsfiddle
Thank you!

There is an enable binding in knockout for this:
<input type="button" data-bind="click:$parent.addItem, enable: itemToAdd" value="add" />
Here is fiddle: http://jsfiddle.net/M2xDF/36/

How do I change function after clicking buttons in JavaScript?

If I have three functions A(),B(),C()
<input type="button" value="text" id="Button" onclick="A()"></input>
What should I write in function A() to make it into
<input type="button" value="text" id="Button" onclick="B()"></input>
after I click the button.

Change attribute after click:
<input type="button" value="text" id="Button" onclick="B();this.setAttribute('onclick','A()')"></input>
http://jsfiddle.net/ye87k/

Find the index of clicked element with same class

My html code is
<input type="button" class="buttonclose marleft fleft clrPric" value="X">
<input type="button" class="buttonclose marleft fleft clrPric" value="X">
<input type="button" class="buttonclose marleft fleft clrPric" value="X">
<input type="button" class="buttonclose marleft fleft clrPric" value="X">
I gave jquery like
$('.clrPric').click(function(){
console.log($(this).index());
});
It shows only 7 in console. No other elements with this class.
I want to get the number of the clicked button.
Thanks in advance.

You need to do this:
$('.clrPric').click(function () {
console.log($(this).index('.clrPric'));
});
FIDDLE