I have a set of radio buttons with an onclick event that hides/shows an area of the website. The onclick also enables/disables spry validation.
The onclick is working great! However, not sure how to trigger the onclick when the page is loaded and the radio button is marked as clicked.
For example, the user may select radio button on the main page. Then later in the form process the user may want to edit the input that they put in. I would then check the radio button that the user had selected on the main page. Since the user has not clicked the radio button the hidden area still remains hidden.
window.onready=function()
{
if(document.getElementById('yourRadioButtonId').checked) {
//call your function, that you want to be triggered, as you will have the same call back function bounded for your onclick event
}
or
window.onready=function()
{
var radioButton=document.getElementById('yourRadioButtonId');
if(radioButton.checked) {
radioButton.click();
}
}
Note: Not not all browsers allow simulated events in this way. Please see the jQuery source for the trigger method to see how all the browser quirks are handled.
The best way to handle this is to write a helper function. Later, this helper function can be called by both of onClick (on radio button) and onLoad (on body element) events. This function will get the valu of your radio button and will do the stuff based on the result.
For example:
function handleRadioButtonStateAction() {
var radioButtons = document.getElementsByName('theRadioButtonName');
for (var x = 0; x < radioButtons.length; x ++) {
if (x == yourDesiredButton && radioButtons[x].checked) {
//do action
}
}
}
Related
I have a webpage with two drop down menus. The first one (id = ddlIndustry) has a 'Go' button that refreshes the page after selecting an option from the drop down. Once this is done, a selection can be made in the second drop down (id = region). This has an onchange property that is triggered and refreshes the page when a selection is made.
I am trying to write a set of commands in Javascript that selects an option from the first dropdown, clicks the 'Go' button, and once the page is refreshed, selects an option from the second drop down and programatically triggers the onchange event.
The code I have so far is:
document.all.ddlIndustry.selectedIndex = 21;
document.getElementById("cmdChart").click();
window.onload = function(){
document.all.region.selectedIndex = 2;
document.all.region.onchange();
};
This lets me select a ddlIindustry index and press 'Go', but does not select a region and trigger an onchange event. However, when I select an industry and press go manually, the second part of the code:
document.all.region.selectedIndex = 2;
document.all.region.onchange();
does allow me to select a region and trigger the onchange event.
How can I do both things together?
Edit: I have tried this in both Chrome (Version 37.0.2062.120 m) and IE (Version 11.0.9600.17280)
I think, If you write something like given below will work.
region.selectedIndex = 2;
region.onchange();
you can try this as well:
var body_Onload = function(){
document.all.region.selectedIndex = 2;
document.all.region.onchange();
};
In HTML add this function to body tag as
<body onLoad="body_Onload">
...
...
</body>
http://services.groupes.be/ibrunet/ibrunet.aspx?lg=NL
I am trying to simulate click events on DIV elements with class="x-grid-cell-inner"(with text Ibrunet, Signaletiek..)
First I inserted jQuery.
javascript:var s=document.createElement('script');s.setAttribute('src', 'http://code.jquery.com/jquery.js');document.getElementsByTagName('body')[0].appendChild(s);alert("loaded");void(s);
Then I tried this
var bedragenDivClass = "x-grid-cell-inner ";
var bedragenDivText = "Bedragen";
var divs = document.getElementsByClassName(bedragenDivClass);
for (var i = 0, len = divs.length; i < len; i++) {
if(divs[i].innerText.localeCompare(bedragenDivText) == 0){
alert("found");
};
};
And I've got referrence to this DIV but then I tried several different functions to trigger click event without any success
.trigger()
.triggerHandler()
.click()
When I open Chrome Dev Tools I can see several handler bounded to that DIV but I dont know how to trigger them
Unusual thing is that I could simulate click on input elements on right panel
var contractTypeInputId = "Cmb_Type_Contrat_Ibrunet_PLus-inputEl";
var contractTypeInput = document.getElementById(contractTypeInputId);
contractTypeInput.click();
Also I could click on elemenets of that input that show after script click it.
Since those DIV's don't have id attribute and I thought I need id to trigger the event I've gave them inside Dev Tools and I could retrieve it after but again no success with triggering onClick event.
The strangest thing is when I run something like this:
$("div").click();
I can see many DIV's beign clicked but those with that class I specified are not affected.
If I can trigger the event as simple as clicking on that DIV why I failed simulating it?
Using jquery
$(".-grid-cell-inner:contains(Ibrunet, Signaletiek)").click(function () {
alert(1);
});
$(".-grid-cell-inner:contains(Ibrunet, Signaletiek)").trigger("click");
I've looked at and tried numerous answers on this topic but can't seem to find a solution that works. I might be missing something obvious in which case I apologise but here's my problem:
I have a checkbox nested within a DIV element, this DIV element has a jQuery click event attached to it which then checks whether the checkbox is checked or not and then either checks/unchecks it. Depending on whether it has been checked/unchecked it then sends a variable to a PHP script to add into a session variable.
This all works fine when it's the DIV that has been clicked but when the checkbox is clicked I think some bubbling occurs as it fires the event for unchecking the checkbox every time. I've tried using stopPropogation(); and preventDefault(); attached to the checkbox click event but to no avail.
Here's some sample code to try and make this clearer:
Checkbox HTML code:
<div class='bundle_offer' id='bundle_offer_0'>
<input type="checkbox" />
</div>
Click function:
// Click function on bundle offer div to add booster
$(".bundle_offer").click(function (event) {
// IF its not the checkbox clicked, send over the div id
if (event.target.type !== 'checkbox') {
var bundle_offer_div_id = "#"+this.id;
bundle_offer_click(bundle_offer_div_id);
}
// ELSE find div id and send it
else{
var bundle_offer_div_id = $(this).closest(".bundle_offer").attr("id");
bundle_offer_div_id = "#"+bundle_offer_div_id;
bundle_offer_click(bundle_offer_div_id);
}
}); // end bundle offer click function
the bundle_offer_click function simply takes the id of the DIV clicked, finds the checkbox, checks/unchecks it and then sends the appropriate variable to the PHP script via AJAX.
EDIT:
I managed to fix the problem by moving round the logic a bit, here is what I changed it to:
// Click function on bundle offer div to add booster
$(".bundle_offer").mouseup(function (event) {
// Get whether checked or not
var isChecked = $(this).find('input').is(':checked');
// IF its not the checkbox clicked
// check/uncheck
// send over the div id
if (event.target.type !== 'checkbox') {
if(isChecked == false){
// Check
$(this).find('input').attr('checked',true);
}
else{
// Uncheck
$(this).find('input').attr('checked',false);
}
var bundle_offer_div_id = "#"+this.id;
bundle_offer_click(bundle_offer_div_id, isChecked);
}
// ELSE find div id and send it
else{
var bundle_offer_div_id = $(this).closest(".bundle_offer").attr("id");
bundle_offer_div_id = "#"+bundle_offer_div_id;
bundle_offer_click(bundle_offer_div_id, isChecked);
}
}); // end bundle offer click function
Main difference is using the mouseup function instead and doing the logic for checking/unchecking the checkbox within that mouseup function rather than the bundle_offer_click one.
In case you click on check box browser automatically check/uncheck checkbox. you don't need do that using JavaScript.
I believe inside bundle_offer_click you are checking/unchecking checkbox. you should pass a flag as second parameter in bundle_offer_click flag value should be depend on clicked element. and inside bundle_offer_click based on flag take action on checkbox.
code:
function bundle_offer_click(id, isCheckBoxClicked){
if(isCheckBoxClicked){
//do nothing on check box
}
}
I'm developing a Javascript virtual keyboard, and I would like it to appear everytime a user press enter on a text fields. But how can I know if a text (or any input) field is selected?
--clarification
I have to information or control over the page that will be loaded. I just want that, if a input field is selected and the user press enter, my virtual keyboard shows up.
--update
Does it makes any difference if what I'm trying to do is a firefox extension? (I think it shouldn't)
use jQuery and add the following
$(document).ready(function() {
//apply action to input elements by class
//$("#.input_class").keypress(function(e) {
//apply action to all input elements ( input, textarea, select and button )
$(':input').keypress(function(e) {
if(e.keyCode==13){
// Enter pressed... do anything here...
alert($(this).val());
} else {
//make shure you get the desired action for other keys pressed
xTriggered++;
}
//do not submit the form
return false;
});
});
bind it to the onfocus event. That event is triggered when the input element gets the focus. You could remove the keyboard again on the onblur event if you want to hide it again.
To get notified that a text field is selected, you could attach an event handler to onfocus of the fields you're interested in.
Example in jQuery (jQ chosen for brevity, the event works in plain JS):
$('input[type="text"]').focus(function(event){
// do something here
});
If you only care to capture the "enter" key, you don't need to worry about focus, just attach to the onkeypress event of the textfields (see #poelinca's answer).
Despite of what jquery apologetes say, there is no hassle to instrument all fields without resorting to large and slow external library:
for (var i = 0; i < document.forms.length; i++)
for (var j = 0; j < document.forms[i].elements.length; j++)
if (document.forms[i].elements[j].tagName.match(/^INPUT$/i))
if (document.forms[i].elements[j].type.match(/^TEXT$/i))
document.forms[i].elements[j].addEventListener('focus', function(){/* your stuff here */}, false);
My solution, for now, was use a specified key just to open the virtual keyboard when the user request.
I'm disabling groups of radio buttons when a user clicks a checkbox, just using raw javascript and the disabled property.
My function is trivial:
function toggleEnabled(elementId) {
e = document.getElementById(elementId)
e.disabled = !e.disabled;
}
and it is called with the onClick event like onClick="toggleEnabled('radio_div')"
It works great, but if the user clicks back, the browser seems to remember the state of the checkbox, but resets the state of the components in the div to whatever they originally were.
This is in IE7, and I do not want to use a JS library right now so please no suggestions to that effect.
Am I doing something wrong? Is there a solution to get the intended behaviour (remember the state of both the checkbox and the div on Back)?
You have to check each radio box value within your onload method:
var selects = document.getElementByTagName("select");
for ( var i = 0 ; i < selects.length ; i ++ )
{
//call your code if an option is checked
if ( selects.options[selects.selectedIndex] )
{
var selectedOption = selects.options[selects.selectedIndex];
//now you got your option and can enable the div.
toggleEnabled('radio_div');// <-- change this depending on selectedOption
}
}