Changing jqtransform radio button class via JavaScript - javascript

I am trying to get my jqtransform'd radio buttons to switch to "checked" via my rowover javascript that I was already using.
Here is the script for the row over effect without the jqtransform:
function selectRowEffect(object, buttonSelect) {
if (!selected) {
if (document.getElementById) {
selected = document.getElementById('defaultSelected');
} else {
selected = document.all['defaultSelected'];
}
}
if (selected) selected.className = 'moduleRow';
object.className = 'moduleRowSelected';
selected = object;
// one button is not an array
if (document.checkout_address.shipping[0]) {
document.checkout_address.shipping[buttonSelect].checked=true;
} else {
document.checkout_address.shipping.checked=true;
}
}
function rowOverEffect(object) {
if (object.className == 'moduleRow') object.className = 'moduleRowOver';
}
function rowOutEffect(object) {
if (object.className == 'moduleRowOver') object.className = 'moduleRow';
}
//--></script>
Currently if I click on the row, it will actually select the radio button in my form but the jqtransform does not reflect that so it still looks like it is not clicked. I tried adding something like
jqTransformRadio.addClass("jqTransformChecked");
My JavaScript knowledge is quite limited. Any help is greatly appreciated.

I think you can change the your selectRowEffect() function like this:
function selectRowEffect(object, buttonSelect) {
if (!selected) {
if (document.getElementById) {
selected = document.getElementById('defaultSelected');
} else {
selected = document.all['defaultSelected'];
}
}
if (selected) selected.className = 'moduleRow';
object.className = 'moduleRowSelected';
selected = object;
// Get checkbox element inside the row, then trigger the 'click' event.
$('.jqTransformRadio', object).trigger('click');
}
I haven't tested the code yet, but I think it will work

Related

jQuery group of checkbox issue

I have two group of checkbox newBuilding & oldBuilding.
Idea over here is I can select checkbox only one of the group.
In each group there is checkbox name other area, so I when click on it, it will show and hide textbox next to it.
Now to achieve first point, lets for example that already we have oldBuilding checkboxes are checked and I if I click one of the newBuilding checkbox then it will remove the check from oldBuilding group but newBuilding checkbox will not get checked but just get focus, I have to click again to check.
What I found out that above issue happen when I call trigger event. How can I overcome the issue
Code for other area
$("#chkOldBuildingOtherAreas").change(function () {
if ($("#chkOldBuildingOtherAreas").is(":checked"))
$("#txOldOtherAreas").show();
else
$("#txOldOtherAreas").hide();
});
$("#chkNewBuildingOtherAreas").change(function () {
if ($("#chkNewBuildingOtherAreas").is(":checked"))
$("#txNewOtherAreas").show();
else
$("#txNewOtherAreas").hide();
});
Code for removing check mark from other groups
$("input[name='oldBuilding']").change(function () {
if ($("input[name='newBuilding']:checked").length > 0) {
$("input[name='newBuilding']").removeAttr('checked');
$("#chkNewBuildingOtherAreas").trigger("change");
}
});
$("input[name='newBuilding']").change(function () {
if ($("input[name='oldBuilding']:checked").length > 0) {
$("input[name='oldBuilding']").removeAttr('checked');
$("#chkOldBuildingOtherAreas").trigger("change");
}
});
My jsfiddle
https://jsfiddle.net/milindsaraswala/wchrwjnx/
https://jsfiddle.net/1ny36nwL/4/
var groups = ['.oldGroup', '.newGroup'];
$(groups.join(',')).find('input[type=text]').hide();
function resetGroup(selector) {
//clear and hide texts
$('input[type=text]', selector).val('').hide();
//uncheck boxes
$('input[type=checkbox]', selector).removeAttr('checked');
}
$("input[name='oldBuilding']").change(function(e) {
if (this.id == 'chkOldBuildingOtherAreas') {
$("#txOldOtherAreas").toggle();
}
resetGroup('.newGroup');
});
$("input[name='newBuilding']").change(function(e) {
if (this.id == 'chkNewBuildingOtherAreas') {
$("#txNewOtherAreas").toggle();
}
resetGroup('.oldGroup');
});
as you can see I added groups var which can contain multiple groups (not only two), but code need to be changed a little more for that to work
you need to detect id/class of current group by something like $(this).closest('.form-group').id and reset every group except current group. in that way you can leave only one change function which will be universal
oh and you also need to add some class for checkbox that contain text input, and if that checkbox is clicked, trigger toggle for input. so it won't be if (this.id == 'chkNewBuildingOtherAreas') { but something like if ($(this).hasClass('has-input'))
Try replacing this in your code. It should work.
$("#txOldOtherAreas").hide();
$("#txNewOtherAreas").hide();
$("input[name='oldBuilding']").change(function (e) {
$("input[name='newBuilding']").removeAttr('checked');
e.target.checked = true;
if (e.target.id == "chkOldBuildingOtherAreas") {
$("#txOldOtherAreas").show();
$("#txNewOtherAreas").hide();
} else {
$("#txNewOtherAreas").hide();
}
});
$("input[name='newBuilding']").change(function (e) {
$("input[name='oldBuilding']").removeAttr('checked');
e.target.checked = true;
if (e.target.id == "chkNewBuildingOtherAreas") {
$("#txNewOtherAreas").show();
$("#txOldOtherAreas").hide();
} else {
$("#txOldOtherAreas").hide();
}
});
You can try following code to fix the problem (Tested in fiddle):
$('#txNewOtherAreas, #txOldOtherAreas').hide();
$('input[name="oldBuilding"]').on('click', function(){
if($('input[name="newBuilding"]').is(':checked')){
$('input[name="newBuilding"]').removeAttr('checked');
$('#txNewOtherAreas').hide();
}
});
$('input[name="newBuilding"]').on('click', function(){
if($('input[name="oldBuilding"]').is(':checked')){
$('input[name="oldBuilding"]').removeAttr('checked');
$('#txOldOtherAreas').hide();
}
});
$('#chkNewBuildingOtherAreas').on('click', function() {
if($(this).is(':checked')){
$('#txNewOtherAreas').show();
} else {
$('#txNewOtherAreas').hide();
}
});
$('#chkOldBuildingOtherAreas').on('click', function() {
if($(this).is(':checked')){
$('#txOldOtherAreas').show();
} else {
$('#txOldOtherAreas').hide();
}
});

JavaScript variable unset after the second click event time

I have this code which asks a question; askQuestion()
which runs as the page loads and runs again when a button with id wb_option_button is clicked.
But I noted that at the first click, its runs well, but the second click never never run. I want to know what is wrong with it (in case), and how to do it work.
var q_selected;
var q_number = 1;
var questionDiv = $('.wb_questions');
var optionDiv = $('div#wb_options');
function askQuestion()
{
questionDiv.html(questions[q_number]['question']);
optionDiv.html('<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][0]+'</button>'+
'<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][1]+'</button>'+
'<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][2]+'</button>'+
'<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][3]+'</button>'
);
}
function checkAnswer(q_answer)
{
if(q_selected === q_answer)
{
return true;
}
}
function isCheckpoint()
{
if(checkpoints[q_number]!=null)
{
return true;
}
else
{
return false;
}
}
askQuestion();
$('button.wb_option_button').click(function(){
q_selected = $(this).text();
if(checkAnswer(questions[q_number]['answer'])===true)
{
if(isCheckpoint()===true)
{
showRank(q_number);
}
else
{
q_number+=1;
//alert(q_number);
askQuestion();
// showStage();
return q_number;
}
}
else
{
alert("You failed");
}
});
var questions is an object, var checkpoints ia also an object.
All of your buttons have the same ID. When you get an Element by id, it will only return the first element it finds with this id. If you want to get multiple elements you have to get them with another selector, ie. by className or any other means then by ID.
Edit : You are in fact selecting the buttons by className. The problem is that when you call askQuestion() again, the click listener is not added to the new buttons, so you might want to move the click event assignment inside askQuestion
Hope this helps.
After a little more digging, I arrived at this solution which works perfectly.
Thank you all for your help!!!
$('.wb_options').on('click','.wb_option_button',function(){
q_selected = $(this).text();
if(checkAnswer(questions[q_number]['answer'])===true)
{
if(isCheckpoint()===true)
{
showRank(q_number);
}
else
{
q_number+=1;
askQuestion();
alert(q_number);
// showStage();
//return q_number;
}
}
else
{
alert("You failed");
}
});

Add dropdown and checkbox values

I'm trying to get the values from the and a checkbox, and put the value in a text box OR add the dropdown and checkbox if both are selected and put that into a text box. There is a JavaScript error in the code, which you can see in the link below, in IE but it works correctly in Chrome. Any guidance on this?
function TotAmt() {
var DA = +document.getElementById("Donation").options[Donation.selectedIndex].value;
if (document.form1.somename.checked == true) {
document.form1.Summary.value = parseInt(DA) + parseInt(500);
} else {
document.form1.Summary.value = parseInt(DA);
}
}
View sample code
You get rid of that specific error in jsFiddle by not wrapping the javascript in the head. Then use getElementById function in your ToAtm() function like this:
function fnchecked(blnchecked) {
if (blnchecked) {
document.getElementById("CoatSizeDiv").style.display = "";
} else {
document.getElementById("CoatSizeDiv").style.display = "none";
}
}
function TotAmt() {
var DA = +document.getElementById("Donation").options[Donation.selectedIndex].value;
if (document.getElementById("somename").checked == true) {
document.getElementById("Summary").value = parseInt(DA) + parseInt(500);
} else {
document.getElementById("Summary").value = parseInt(DA);
}
}
UPDATED CODE

How do I disable input field when certain select list value is picked

How do I disable and make the input field text to hidden when certain value is selected from select list? In my code, I need to disable and make the input text to hidden when "United States" is selected from my drop down.
My HTML:
JSFiddle Link
My Javascript:
document.getElementById('BillingCountryCode').onchange = function () {
if(this.value != '840') {
document.getElementById("BillingStateProvince").disabled = true;
document.getElementById("BillingStateProvince").style.display="none"
} else {
document.getElementById("BillingStateProvince").disabled = false;
document.getElementById("BillingStateProvince").style.display="block"
}
}
The problem with your fiddle is you have two elements with the same ID. You can do exactly what is already there, just change the ID on either the state dropdown or the text input. Updated code might look like this, if you simply name the text input the same with a 2:
document.getElementById('BillingCountryCode').onchange = function () {
if(this.value != '840') {
document.getElementById("BillingStateProvince").disabled = true;
document.getElementById("BillingStateProvince").style.display="none";
document.getElementById("BillingStateProvince2").disabled = false;
document.getElementById("BillingStateProvince2").style.display="block";
}
else {
document.getElementById("BillingStateProvince").disabled = false;
document.getElementById("BillingStateProvince").style.display="block";
document.getElementById("BillingStateProvince2").disabled = true;
document.getElementById("BillingStateProvince2").style.display="none";
}
}
If i got the question , simply invert the if condition like this :
if(this.value === "840") { ... }
here is the working fiddle : http://jsfiddle.net/antwonlee/cf4Sz/7/

How to show multiple text fields on button click one by one

I need to add 2-3 text fields on button click one by one, where 'L' is the ID of the textfield. I am trying this code, but instead of using jQuery I want to use simple javascript because I am implementing this code in a Joomla environment.
function WrapperScript () {
JQuery('#wrapper1 button').click(function(){
for (var i=1;i<=4;i++)
{
var id='#L'+i;
var setting = JQuery(id).css('display');
if (setting=='none')
{
JQuery(id).css('display', 'block');
break;
}
}
});
}
if you need to make the same script without using jQuery here is a sample
function WrapperScript () {
//use an appropriate getter for the button
var button = document.getElementblahblah
button.onclick = function(){
for (var i=1;i<=4;i++)
{
var id='#L'+i;
var element = document.getElementById(id);
var setting = element.style.display;
if ( setting=='none' )
{
element.style.display = 'block';
break;
}
}
}
}

Categories