I have a function called showHide() that alternately shows and hides a text input field and a button (button2) when another button (button1) is clicked. The text input field is automatically focused when it opens, and this works great.
The HTML looks roughly thus:
<button1>Show/Hide</button>
<form>
<input class="hidden" type="text" />
<button2 type="submit">Submit</button>
</form>
<script type="text/javascript">
$("button1.someSelectors").click(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})
</script>
I would like to extend the function such that when the input field loses focus it and button1 disappear, unless it loses focus because button1 is being clicked. As it reads now I'm only testing whether the input field has focus or not. How can I also check whether button2 is being clicked or not?
I tried:
$("input.someSelectors").blur(function() {
if (!$("button2.someSelectors").is(":focus")) {
showHide();
}
});
but it hid the form elements even when I tried clicking button2.
An alternative would be to test whether button2 is being clicked or not in the "hide" part of the function, but when I added
if(!$("button2.someSelectors").click()) {do the hide part of the function}
to showHide(), the form got submitted when I clicked button1 or button2. Here is an example of my problem. Can anyone help?
--Edit:
var showHide=function(item, category) {
if($("input."+item+"."+category).hasClass("hidden")) {
$("input."+item+"."+category).show("fast").focus().removeClass("hidden");
$("button.buy."+item+"."+category).show("fast");
$("button.purchase."+item+"."+category).text("Never mind!");
} else {
$("input."+item).hide("fast").addClass("hidden");
$("button.buy."+item).hide("fast");
$("button.purchase."+item).text("Purchase");
}
}
blur event on textbox is triggered before the click event fires on the button. In order to avoid that you can use mousedown event instead of click event which will be triggered before click event. Try this
$("button1.someSelectors").mousedown(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})
Related
My goal is to replace a button with another button, but I am running into some issues. I am able to trigger the first button click and I am able to cause an alert with the second button click, but for some reason when I try to trigger the first button click in the click event handler of the second button, it doesn't work. What am I doing wrong? For some context, I'm doing this in Powerapps Portals by adding a Content Snippet.
$(window).load(function() {
//Code to Add Custom 'Register' Button (and Hide the original one- currently commented out)
$('#SubmitButton').after('<input type="submit" name="ctl00$ctl00$ContentContainer$MainContent$MainContent$mySubmitButton" value="Register" id="mySubmitButton" class="btn btn-primary">');
//$('#SubmitButton').hide(); *THIS WORKS*
//$("#SubmitButton").click(); *THIS ALSO WORKS*
$("#mySubmitButton").click(function()
{
//window.alert('yes!'); *THIS WORKS*
$("#SubmitButton").click(); // *THIS DOES NOT WORK*
});
});
You need to prevent the default action to stop the form from submitting when the button is clicked.
$("#mySubmitButton").click(function(e){
e.preventDefault();
$("#SubmitButton").click();
});
Alternatively, you can set the button's type to "button" so clicking it does not submit the form by default.
$('#SubmitButton').after('<input type="button" name="ctl00$ctl00$ContentContainer$MainContent$MainContent$mySubmitButton" value="Register" id="mySubmitButton" class="btn btn-primary">');
I have troubles to show an alert when a button (actually an input type=image object) is disabled because user should first to click on a terms checkbox.
This is my jQuery code:
$('#divButton').on("click", function() {
if ($('#buybutton').prop('disabled', true)) {
alert('Please confirm . . .');
}
});
And this is the HTML code:
<form>
...
<div id="divButton">
<input type="image" id="buybutton"...
</div>
</form>
When buybutton is disabled and I click inside divButton (over disabled button for example) nothing happens.
I am a mobile developer trying to write JavaScript code, so be patient with me.
What am I doing wrong?
EDIT: Debugging it on Chrome, when buybutton is disabled it is never entering inside divButton's click handler function to check
if ($('#buybutton').prop('disabled', true)).
Looks like onClick event in that div be disabled.
best approach is Pat Dobson's recipe, is not exactly the same than I was trying to do, but can works:
Make alert window when clicking a disabled button
Thanks for your help, guys ;-)
What I am trying to do is to prevent the user from changing the radio button until they confirm that they want to leave the "page". The radio button should not change to the one they clicked until after they click on the button in the popup to say "ok leave page".
This call handles changing the page to the selected radio button, and everything else. This should only be fired if the button in the popup is clicked:
$("body").on("change", "input[type='radio'][name='quote-type']:checked", function(e){
//Change the radio button and everything else
});
This handles the popup and everything:
$(function(){
var LEAVEPAGE;
//Radio button changes, so show a popup
$("body").on("change", ".coverage-options-wrapper li:not(.custom) input[type='radio'][name='quote-type']", function(e){
e.preventDefault();
e.stopPropagation();
LEAVEPAGE = e.currentTarget;
//Show the popup to ask if you are sure you want to switch radio buttons
});
//Click the button in the popup to leave the page, so change the originally clicked radio button.
$("body").unbind("click").on("click", ".leave-page", function(){
$(LEAVEPAGE).prop("checked", true).trigger("change"); //triggers change for the first call to be run, to actually change the page
});
});
What is happening is the radio button is just being changed regardless, it shows the popup too, however it isn't waiting for a response from the popup. It just switches anyways. Also, when I click on the .leave-page button, it triggers change (it's suppose to be so that it will load the new page attributed to that button), however it ALSO triggers the popup again (as they both use the change event).
I am very stumped.
DEMO
JS
var optionTarget;
$(":radio").click(function(e){
e.preventDefault();
optionTarget = e.target;
$("#leave-dialog").show();
});
$("#leave-dialog button").click(function(){
$("#leave-dialog").hide();
});
$("#leave-btn").click(function(){
$(optionTarget).prop('checked', true);
});
HTML
<input type="radio" name="bleh" value="yes" checked>option 1
<input type="radio" name="bleh" value="no">option 2
<div id="leave-dialog">Are you sure?
<br/>
<button id="leave-btn">Yes</button>
<button>No</button>
</div>
Let's say I have a field and a button. The button submits the field and triggers some AJAX request which returns data to the same page. Every time the button is clicked, the field is deselected/blurred. This can be partially fixed by making the button focus the text field upon its click. However, during the click, there is a brief moment where the field blurs. The way I have my page set up this does not look good. I would like to completely prevent the field from blurring throughout the click. What is the easiest way to do this? Thanks!
Code:
<input type="text" id="f" autofocus/><span id="btn" onclick="document.getElementById('f').focus()"></span>
Instead of handling button click you can move the focus on button focus with a very small timeout:
jQuery:
$('#btn').focus(function (event) {
setTimeout(function () {
$('#f').focus();
}, 5);
});
JavaScript:
document.getElementById('btn').onfocus = function (event) {
setTimeout(function (event) {
document.getElementById('f').focus();
}, 5);
};
I'm trying to create an Ajax enabled webform, and have created a simple page. On the page, I have a div that contains the value I wish to edit.
I've got working javascript to add a text input box around the contents of the div, complete with a Save button to post back to the web server, but unlike the example I'm following, I don't want a cancel button, instead I want the cancel operation to be triggered by the input box losing focus.
I've added a onblur event to the text input box to cancel the edit operation and return the form back to it's original unedited state (and not save the change).
The problem I'm having, is that when I click the 'Save' button, the onblur event of the text input box is also triggered. How can I stop this happening?
The edit function (called when a user clicks on the text to be edited) is as follows:
function edit(obj)
{
Element.hide(obj);
var textarea = '<div id="'+obj.id+'_editor"><div class="fieldvalueedit"><input type="text" id="'+obj.id+'_edit" name="'+obj.id+'" rows="1" size="64" value="'+obj.innerHTML+'"></div>';
var button = '<div class="fieldvaluebuttons"><input id="'+obj.id+'_save" type="button" value="Save"/></div></div>';
new Insertion.After(obj, textarea+button);
document.getElementById(obj.id+'_edit').focus();
Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)}, false);
Event.observe(obj.id+'_edit', 'blur', function(){cleanUp(obj)}, false);
}
Instead of using an onblur event on input you can register an onclick event on the document that resets the textareas state, then cancel the propagation of this event when the save button is clicked (you will want to apply this to the text area as well).
Event.observe(obj.id+'_save', 'click', function( e ){
e.stopPropagation();
saveChanges(obj);
}, false);
Event.observe(document, 'click', function(){cleanUp(obj)}, false);