disabling submit button and enable if change was made to the textbox - javascript

I have a textbox and a submit button. I want to have the button grayed out (disabled) on pageload and when the user makes a change in the textbox whether adding text or removing text the button will be enabled and once it is saved the button will be disabled again.
<h3>Username</h3>
#Html.TextBoxFor(m=>m.username)
<button class="btn btn-small savebtn" type="submit" value="User Name">Save</button>
Now the issue i am having is how to properly insert this script into my view. This is my current view:
#model Project.Models.UsernameModel
#using (Html.BeginForm("_UsernamePartial", "Account")) {
<h3>Username</h3>
#Html.TextBoxFor(m=>m.Username)
<button class="btn btn-small savebtn" type="submit" value="User name">Save</button>
do i add the script like this at the bottom after the tag:
#section scripts {
<script type="text/javascript">
$(document).ready(function () {
$(".savebtn").attr('disabled', 'disabled');
$("#UserName").keyup(function () {
$(".savebtn").removeAttr('disabled');
});
$(".savebtn").click(function () {
$(this).attr('disabled', 'disabled');
});
});
</script>

If I understand your requirements correctly, you want something like this:
$(document).ready(function () {
//Disable Save Button On Page Load
$(".savebtn").attr('disabled', 'disabled');
//When User Name changes, enable Save Button
$("#UserName").keyup(function() {
$(".savebtn").removeAttr('disabled');
});
//Disable Save Button once clicked
$(".savebtn").click(function() {
$(this).attr('disabled', 'disabled');
});
});
And here is a sample JS Fiddle.

Related

How to enable tooltip on disabled button in javascript?

I have a disabled button and i want it to show a tooltip but change it when i enable it again. How do i get this to work i can only use HTML, javascript and css.
This is the button
<div class="right-item"><button class="button ripple" id="print" onclick="printDiv('qr-code')" disabled="disabled">Drucken</div>
Use title
function toggle() {
var button = document.getElementById('button');
if (button.disabled) {
button.disabled = false;
button.setAttribute('title', 'Enabled title');
} else {
button.disabled = true;
button.setAttribute('title', 'Disabled title');
}
}
<button onclick="toggle()">Toggle enable/disable</button>
<button disabled title="Enabled title" id="button">Hover on me</button>
<button disabled title="Hello">Hover on me</button>
This code will show same tool tip for both disabled or enabled button. Have a function which checks the status of button and apply the title value based on it.
You need to add Javascript when you enable button.
In jQuery:
$('#yourElementId').attr('title', 'your new title');
In Javascript:
var myBtn= document.getElementById("yourElementId");
myBtn.setAttribute('title','mytitle');

when button is disable then also on click event call

once the button clicked I have a disabled button and on page load, I get the status of the button and then enable and disable the button according to requirement.it's work properly but I give an on-click event to the button. when the button is disabled then also when I click the button javascript call a method.
i have tag as a button.
how I can handle when button is disabled raise event stop.
thank you in advance.
<a id="check_status_api" class="btn btn-info btn-sm" href="javascript:void(0)">run_batch</a>
$("#check_status_api").click(function(e){
console.log('my ajax call code ')
})
$(document).ready(function(){
//on page load get status of my batch if it's running then button disable property add
if ('runnig' == 'runnig'){
$("#check_status_api").attr( "disabled", "disabled" );
}
})
try this:
$("btn btn-info btn-sm").prop('disabled', true);
or you can try adding a css class on click that disables the button:
.disabled {
pointer-events: none;
}
or document.getElementById("check_status_api").disabled = true;
Try this:
const myBtn = $('#check_status_api')
myBtn.click(function(e){
if (!myBtn.is('[disabled=disabled]')) {
console.log('my ajax call code ')
}
})
$(document).ready(function(){
//on page load get status of my batch if it's running then button disable property add
if ('runnig' == 'runnig'){
myBtn.attr( "disabled", "disabled" );
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<a id="check_status_api" class="btn btn-info btn-sm" href="javascript:void(0)">run_batch</a>

How to remove focus from button after closing javascript confirm box

I have a button with a bootstrap element on it.
<button title="delete" type="button" class="btn btn-default btn-sr" data-confirm="Are you sure to delete this item?"><span class="glyphicon glyphicon-trash white"></span></button></a>';
It has a css property which I color it red.
When user clicks the delete button, a JavaScript confirmation will come out.
The problem is whenever i click cancel, the button will be focused. How do I remove the focused button?
Here is the jQuery code:
<script>
$(document).on('click', ':not(form)[data-confirm]', function(e) {
if( !confirm($(this).data('confirm')) ) {
e.stopImmediatePropagation();
e.preventDefault();
}
});
</script>
Maybe could you try to blur() the button?
<script>
$(document).on('click', ':not(form)[data-confirm]', function(e) {
if( !confirm($(this).data('confirm')) ) {
e.stopImmediatePropagation();
e.preventDefault();
$(this).blur(); // to make the focus disappear
}
});
</script>
$(this).blur();
removes the focus
$(this).blur();
over
document.activeElement.blur()

How to check whether link button is disabled or not

After rendering code in browser the anchor tag is generated as
<a onclick="alert();" id="ctl00_RightContent_lnkSaveTop" title="Select Mail then Click to Send..." class="btn btn-u" data-rel="tooltip" data-container="body" data-toggle="popover" data-placement="top" data-content="Select Mail then Click to Send..." href="javascript:__doPostBack('ctl00$RightContent$lnkSaveTop','')" style="float: right" data-original-title="Send Email" disabled="disabled">
Send Mail
</a>
I have written jquery as below lines of code
$(document).ready(function () {
$('#<%= lnkSaveTop.ClientID%>').click(function () {
if ($(this).is(':disabled')) {
alert('No need to click, it\'s disabled.');
}
});
});
Basically I want that if disabled button is clicked, then the tooltip should be displayed.
Try:
if ($(this).attr('disabled') === "disabled") {
alert('No need to click, it\'s disabled.');
}
if you intend to use readonly attribute, it's the same, replace 'disabled' with 'readonly '
What you can do is have a custom data attribute on your input button which is a blank string. Then when the mouse enters the button you remove the title and place it inside of your empty data attribute and remove title, this will stop the tooltip from appearing. You then listen for the click even on the input and then move copy the text from the data attribute to the title and that should do the trick
Here is my jsFiddle : https://jsfiddle.net/44vof888/
jQuery
$(function () {
$('input').mouseenter(function () {
$(this).data('title', this.title)
this.title = '';
});
$('input').on('click', function () {
this.title = $(this).data('title');
});
});
html
<input type="button" data-title="" value="Hello" title="Half an update" readonly="readonly"></input>

Close popup div when clicked outside it

I have a button on which when i click, a form opens to be filled by the user. When i click the button again the form closes. This wasn't possible as with one button i wasn't able to perform 2 functions like opening and closing of the form with one button. So, i took 2 buttons. When one button is clicked, it hides and the second button shows and the form is opened and when the second button is clicked, the same button hides and the first button shows and the form closes. I have no problem in this.
Now, I also want that when user clicks anywhere outside the div form, the form should close itself. Help me do this. These are the 2 buttons.
<input type="button" value="Add New" id="NewRow" class="btn1 green" onclick="ToggleDisplay()" />
<input type="button" value="Add New" id="NewRowCopy" style="display: none;" class="btn green" />
This is the form.
<div id="div_fieldWorkers" style="display:none;" class="formsizeCopy">
This is the script.
$(document).ready(function () {
$('#div_fieldWorkers').hide();
$('input#NewRowCopy').hide(); });
$('input#NewRow').click(function () {
$('input#NewRowCopy').show();
$('input#NewRow').hide();
$('#div_fieldWorkers').slideDown("fast");
});
$('input#NewRowCopy').click(function () {
$('input#NewRow').show();
$('input#NewRowCopy').hide();
$('#div_fieldWorkers').slideUp("fast");
});
$("html").click(function (e) {
if (e.target.parentElement.parentElement.parentElement == document.getElementById("div_fieldWorkers") || e.target == document.getElementById("NewRow")) {
}
else
{
$("#input#NewRowCopy").hide();
$("#input#NewRow").show();
$("#div_fieldWorkers").slideUp("fast");
}
I an trying to hide the second button when clicked outside the form.. but not working..
Try
$(document).ready(function () {
$('#div_fieldWorkers').hide();
$('input#NewRowCopy').hide();
$('#NewRow').click(function (e) {
$('#NewRowCopy').show();
$('#NewRow').hide();
$('#div_fieldWorkers').stop(true, true).slideDown("fast");
e.stopPropagation();
});
$('#NewRowCopy').click(function (e) {
$('#NewRow').show();
$('#NewRowCopy').hide();
$('#div_fieldWorkers').stop(true, true).slideUp("fast");
e.stopPropagation();
});
$(document).click(function (e) {
var $target = $(e.target);
if ($target.closest('#div_fieldWorkers').length == 0) {
$("#NewRowCopy").hide();
$("#NewRow").show();
$("#div_fieldWorkers").stop(true, true).slideUp("fast");
}
})
});
Demo: Fiddle

Categories

Resources