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()
Related
I am making a text editor with <div contenteditable>. I want to prompt a confirmation message before the user deleting image element inside the editor. So when the user press backspace, before deleting the image element, there should be a prompt "Are you sure you want to delete the image?".
How can I do this?
Event listener keydown can be added to that <div contenteditable> element. Keydown and keypress events takes place before the content is changed and event.preventDefault() can be used to stop the content before editing.
window.onload = function(){
document.getElementById("elem").addEventListener('keydown',function(event){
if( event.key=='Backspace' ){
//your condition check can be given here
if( confirm('are you sure you want to delete') ){
return;
}else{
event.preventDefault();
}
}
});
}
.edit-elem{
background-color: red;
}
<div contenteditable="true" class="edit-elem" id="elem"></div>
Is this what you want?
$(document).ready(function(){
$('.remove').click(function(e){
e.preventDefault();
alert('Are You Sure?');
});
$(document).on('keyup','div', function(e){
console.log(e.keyCode);
if(e.keyCode == '8'){
alert('You have pressed backspace');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable>
<input type="file" class="image" name="image"/>
<button type="button" class="remove">Remove</button>
</div>
Issue when getting recently clicked button id. Form submit button decorated with fontawesome icons.
Operation:
On body click get button id
Submit form
Concept:
Mouse pointer over button click is working
Issue:
Mouse pointer exactly over button image(example:round arrow icon) click
not working.
Browser Console returning undefined
Any tweaks to make this work? Normally user will attracted by images and they will click over icons only. how fix this?
JSfiddle
Don't use body, only set it to the buttons then.
$(function() {
$('button').on('click', function(e) {
var buttonClicked = $(this).attr('id');
console.log(buttonClicked);
});
});
Working example.
I'm not sure if you want to do more work on the button click. So you could submit the form manually too in the callback. Just change the buttons to type="button" instead of submit and extend the callback:
$(function() {
$('button').on('click', function(e) {
var buttonClicked = $(this).attr('id');
console.log(buttonClicked);
// do your work
// submit the form manually
$("form").submit();
});
});
Working example.
If all you want is the ID of the button that was clicked, why attach the event to the body? I can maybe understand event delegation, but you only have two buttons here. Bind the click handler to both buttons. See http://jsfiddle.net/jvsxo8s0/4/
$(document).ready(function() {
$('button').on('click', function(e) {
target = $(e.target);
buttonclicked = target.attr('id');
console.log(buttonclicked);
e.preventDefault();
});
});
Dont know why you need the id, but you can use the submit() function from jQuery and serialize the form data.
$(function() {
$('#setpolicyform button').on('click', function(e) {
e.preventDefault();
// get button id
var buttonId = $(this).attr('id');
// form data
var formData = $('#setpolicyform').serialize();
console.log(formData);
// check the clicked id
if(buttonId === 'save') {
console.log('save');
} else {
console.log('send');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form role="form" method="POST" action="#" name="setpolicyform" id="setpolicyform">
<div class='box-body pad'>
<div class="form-group">
<div class="lnbrd">
<textarea class="textarea form-control" placeholder="Enter text ..." name="policyta" style="width: 510px; height: 200px;"></textarea>
</div>
</div>
</div>
<div class="box-footer clearfix">
<button type="button" class="btn btn-danger pull-right" id="save"><i class="fa fa-save"></i> SAVE</button>
<button class="btn btn-success" type="button" id="send"><i class="fa fa-arrow-circle-right fa-lg fa-fw"></i>Send</button>
</div>
</form>
</div>
Use this
$(document).ready(function() {
$('body').on('click', function(e) {
target = $(e.target);
buttonclicked = target.closest("button").attr('id');
console.log(buttonclicked);
});
});
Updated Fiddle is here http://jsfiddle.net/jvsxo8s0/6/
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
I'm using jQuery mobile and I was trying to add a button inside a collapsible but the problem is that when i click on the button the click event is not fired but instead the block gets uncollapsed or collapsed.
I tried the code below but it didn't work
$(document).on('pagebeforeshow', '#page', function () {
$('#header').on('click', '#start', function (e) {
alert("click");
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
});
});
<div data-role='collapsible' data-theme='c' data-content-theme='d' data-collapsed icon='arrow-d' data-expanded-icon='arrow-u' data-iconpos='right'>
<h4 id='header'>
<input type='button' data-theme='c' value='Demarrer' data-mini='true' data-inline='true' data-icon='mappin' data-icon-pos='top' id='start'/>
</h4>"
</div>
that's because your button exists inside the collapsible section. What you can do is prevent the section from collapsing when the button is clicked i.e get the id of the target clicked and if it's the id="start" then e.preventDefault(); so something like this:
$('#header').on('click', function (e) {
var id = e.target.id;
if(id=="start"){
alert("click");
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
}
});
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.