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

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;
}
}
}
}

Related

how to exchange the attribute values simultaneously on single click event using jQuery

I want to replace #cardvieo_localstream with #cardvideo_remotestream at the first click, again I click the same element, I want to change #cardvideo_remotestream back #cardvieo_localstream, I'm not sharp at jQuery yet, but I'm trying to learn. I appreciate all help I can get.
I've try this code but working on first click. but not working on second click
$('.video-list .videoWrap').on('click', function() {
var $thisVideoWrap = $(this).find('.video-list .videoWrap');
var $mainVideoWrap = $('.mainVideoWrap');
if ($(this).attr('id') === '#cardvideo_localStream') {
$(this).attr('id', '#cardvideo_remotestream');
}
else if($(this).attr('id') == '#cardvideo_localStream') {
$(this).attr('id', '#cardvideo_local');
$mainVideoWrap.attr('id', 'cardvideo_remotestream');
}
});
Don't change An Id Attribute because of id is a unique value Only use the Classname, I swap the elements successfully
// using jQuery
var initVideoSwapping = function () {
// check if there is an element first
if ($('.video-list .videoWrap').length > 0) {
$('.video-list .videoWrap').on('click', function () {
var $thisVideo = $(this).find('video')[0];
var $mainVideo = $('.mainVideoWrap').find('video')[0];
swapNodes($thisVideo, $mainVideo)
});
}
}
function swapNodes(a, b) {
var aparent = a.parentNode;
var asibling = a.nextSibling === b ? a : a.nextSibling;
b.parentNode.insertBefore(a, b);
aparent.insertBefore(b, asibling);
}
$(function () {
initVideoSwapping();
});

How to remove previously bind event in jquery

On a checkbox change event, one of a javascript bind the toggle action.
Later on(in a different script) I want to change toggle action based on a condition.
Ex.
script 1:
$(document).ready(function () {
var shipFields = $('.address1 input');
$("input[name = 'same_as_bill']").on("change", function (evt) {
toggleFields(shipFields, !$(this).is(":checked"));
});
function toggleFields(fields, show) {
var inputFields = $("li", fields).not(".sameas, .triggerWrap");
inputFields.toggle(show);
}
}
Script 2:
$(document).ready(function () {
$('li.sameas input').click(function (sender) {
var target = $(sender.target);
var selectedCountryValue = $('li.country select', target.closest('fieldset')).val();
// determine data method based on country selected
if (selectedCountryValue === "xxx") {
ShowAddress(true, target);
} else {
ShowAddress(false, target);
}
});
function kleberShowAddress(show, target) {
if (show) {
$('li.address).hide();
} else {
$('li.address).show();
}
}
});
Issue I have here is, my site load the script 1 first and then the script 2. So by the time script 2 performs the action, toggle action is queued and will trigger that after the changes from script 2, that will revert the changes which I want.
Is there a way to remove the action in the queue? or stop happening first request. I do not want to use .unbind() which will stop triggering script 1 function. I just want to stop the action when ever it meets the condition in script 2.
Please note: above functions are trimmed to show less codes.
add var isActive = true; and use it to check in first script.
In script 2, you can call isActive = false any time you want to disable the first script's function or isActive = true for re-enable them.
Your code will look like:
//script1
var isActive = true;
$(document).ready(function() {
var shipFields = $('.address1 input');
$("input[name = 'same_as_bill']").on("change", function(evt) {
if (isActive) {
toggleFields(shipFields, !$(this).is(":checked"));
}
});
function toggleFields(fields, show) {
if (isActive) {
var inputFields = $("li", fields).not(".sameas, .triggerWrap");
inputFields.toggle(show);
}
}
});
//script2
$(document).ready(function() {
isActive = false;
$('li.sameas input').click(function(sender) {
var target = $(sender.target);
var selectedCountryValue = $('li.country select', target.closest('fieldset')).val();
// determine data method based on country selected
if (selectedCountryValue === "xxx") {
ShowAddress(true, target);
} else {
ShowAddress(false, target);
}
});
function kleberShowAddress(show, target) {
if (show) {
$('li.address').hide();
} else {
$('li.address').show();
}
}
});

How to change class back after onclick

I'm creating a spoiler-tag script where the user clicks on spoiler text, the text will either blank out or change font-color depending on the class assigned to it. I'm rather a noob at Javascript.
My script only works when I click on the spoilered text when it is blank- so when I have already clicked on it, I can't reclick to change it back.
Here is the code that works:
// Hide Spoiler Individually
var singleHidden = document.getElementsByClassName("hidden");
var hideMe = function () {
var attribute = this.getAttribute("hidden");
this.className = "show";
};
for (var i = 0; i < singleHidden.length; i++) {
singleHidden[i].addEventListener("click", hideMe, false)
};
Here's a link on jsfiddle.
https://jsfiddle.net/o94c00hb/
Try this:
var hideMe = function() {
if(this.className == "hidden")
this.className = "show"
else
this.className = "hidden"
};
If you're not opposed to using jquery i would do something like this:
$('.hidden').on('click', function(){
$(this).toggleClass('show');
});
JSFIDDLE

Toggle function in javascript

I'm trying to write a simple button control in javascript that will self encpsulate toggle functionality so every time it works it changes the show or hide of an element.
I thought this could be easy but I'm not able to get it to work.
simplify: function(){
aRemoveButtons[t].show();
//next time
aRemoveButtons[t].hide();
}
I tried to set a variable and then do a !variable on it but I couldn't check for its existance as it was a boolean and false was seen to be the same as undefined.
Are you using jQuery? It has a built-in toggle-Method: http://api.jquery.com/toggle/
$('.target').toggle();
Try something like :
function toggle(elementID) {
var target1 = document.getElementById(elementID); // get the element
if (target1.style.display == 'none') { // check current state
target1.style.display = 'block'; // show
} else {
target1.style.display = 'none'; // hide
}
}​
usage :
<div id="something" style="display:none;"></div>
toggle('something');
Ext.override(Ext.Element, {
toggle : function()
{
// check current state of visibility
var mode = this.getVisibilityMode();
var hideClass = '';
switch (mode) {
case Ext.Element.prototype.VISIBILITY:
hideClass = 'x-hidden-visibility';
break;
case Ext.Element.prototype.DISPLAY:
hideClass = ''x-hidden-display';
break;
case Ext.Element.prototype.OFFSETS:
hideClass = 'x-hidden-offsets';
break;
}
// default should be visible
var visible = true;
// if class exists then the element is hidden
if(this.hasCls(hideClass)) {
visible = false;
}
this.setVisible(!visible);
}
});

Changing jqtransform radio button class via 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

Categories