form elements fade out with jQuery on selected option - javascript

I have this JavaScript code to fade out elements when a certain option is selected in the form, here is my code:
<script type="text/javascript">
function opt_onchange() {
if (document.getElementById("opt").value == "banscan") {
document.getElementById("form_username").style.visibility = "hidden";
document.getElementById("form_password").style.visibility = "hidden";
} else {
document.getElementById("form_username").style.visibility = "visible";
document.getElementById("form_password").style.visibility = "visible";
}
if (document.getElementById("opt").value == "") {
document.getElementById("submit").style.visibility = "hidden";
} else {
document.getElementById("submit").style.visibility = "visible";
}
}
</script>
When the option banscan is selected, the top 2 fields username and password fade out. But in Javascript they fade out instantly.
As I'm using bootstrap 3 on the website I thought I should try out jQuery as it is already available. I've read through some jQuery tutorials but I can't find anything specific to what I need. Here is my attempt:
<script type="text/javascript">
function opt_onchange() {
if (document.getElementById("opt").value == "") {
document.getElementById("submit").style.visibility = "hidden";
} else {
document.getElementById("submit").style.visibility = "visible";
}
if (document.getElementById("opt").value == "banscan") {
$("form_username").fadeOut();
$("form_password").fadeOut();
} else {
$("form_username").fadeIn();
$("form_password").fadeIn();
}
}
</script>
However, this code doesn't work at all.
Edit:
Here is my updated code, now I just need to make the submit button fade out on page load.
<script type="text/javascript">
$(document).ready(function() {
$("#submit").fadeOut();
});
function opt_onchange() {
if (document.getElementById("opt").value == "") {
$("#submit").fadeOut();
} else {
$("#submit").fadeIn();
}
if (document.getElementById("opt").value == "banscan") {
$("#form_username").fadeOut();
$("#form_password").fadeOut();
} else {
$("#form_username").fadeIn();
$("#form_password").fadeIn();
}
}
</script>

As #user3237539 pointed out, your jQuery selectors must begin with '#'. Your code should look like this:
<script type="text/javascript">
function opt_onchange() {
if (document.getElementById("opt").value == "") {
document.getElementById("submit").style.visibility = "hidden";
} else {
document.getElementById("submit").style.visibility = "visible";
}
if (document.getElementById("opt").value == "banscan") {
$("#form_username").fadeOut();
$("#form_password").fadeOut();
} else {
$("#form_username").fadeIn();
$("#form_password").fadeIn();
}
}
</script>
Hope that helps!
PS: Whenever you use document.getElementById() you could instead use $("#id") to be able to use more of jQuery's helpful functions. You could replace document.getElementById("submit").style.visibility = "hidden";
with $("#submit).hide();

Related

unable to uncheck checkbox after using java script

<script type="text/javascript">
function enableDisable(textBoxID,checkboxID) {
if(document.getElementById(checkboxID).checked= true) {
document.getElementById(textBoxID).style.display = 'block';
return true;
} else {
document.getElementById(textBoxID).style.display = 'none';
return true;
}
}
</script>
legacy<input type="checkbox" class="igm_class" id="legacy_cb" name="igm_2" value="legacy" onchange="enableDisable('legacytb','legacy_cb')">
This code is working fine. when the checkbox is checked then the text box is displayed but I am unable to uncheck the checkbox.. The check box remains checked
Because you use a single equation in the if condition. In js it's generally a good idea to use triple equation when checking value:
if(document.getElementById(checkboxID).checked === true) {
Or even better just leave the equations like this:
if(document.getElementById(checkboxID).checked) {
replace "if(document.getElementById(checkboxID).checked = true)" with "if(document.getElementById(checkboxID).checked === true)"
function enableDisable(textBoxID, checkboxID) {
if (document.getElementById(checkboxID).checked === true) {
document.getElementById(textBoxID).style.display = 'block';
return true;
}
else {
document.getElementById(textBoxID).style.display = 'none';
return true;
}
}

Show/Hide div with checkboxes using classes multiple times on a page

I am having trouble getting my script to work here. I am trying to target the show me span when the checkboxes are checked and it's not working.
Here is the code and link to fiddle: http://jsfiddle.net/dalond/nonyg6sm/
$('.single').live('change', ':checkbox', function() {
var target = $(this).closest('.single').prev().find('.showMe');
if ($(this).find('input:checked').length == 0) {
target.hide();
} else {
target.show();
}
});
I got it worked : http://jsfiddle.net/nonyg6sm/3/
$('input[type=checkbox]').click(function() {
var target = $(this).closest('.NoEd').prevAll(".Subs:first").find(".showMe");
if (this.checked) {
target.show();
} else {
target.hide();
}
});
You can modify it to feet your need.
UPDATE
http://jsfiddle.net/nonyg6sm/4/
$('input[type=checkbox]').click(function() {
var target = $(this).closest('.NoEd').prevAll(".Subs:first").find(".showMe");
if ($(this).closest('.NoEd').find("input[type=checkbox]:checked").length == 0) {
target.hide();
} else {
target.show();
}
});

jquery show and hide

i have a javascript code that when a link is clicked, it can show and hide divisions of the page.
function shoh(id) {
if (document.getElementById) { // DOM3 = IE5, NS6
if (document.getElementById(id).style.display == "none"){
$(id).fadeIn();
} else {
$(id).hide();
}
} else {
if (document.layers) {
if (document.id.display == "none"){
document.id.display = 'block';
} else {
document.id.display = 'none';
}
} else {
if (document.all.id.style.visibility == "none"){
document.all.id.style.display = 'block';
} else {
document.all.id.style.display = 'none';
}
}
}
}
however it now doesn't work when i added the jquery fadeIn and hide instead of using the document.getElementByid method. why?
In order to select an element by id with jQuery, you have to use the selector syntax which means appending a # to the id. So, change
$(id).fadeIn();
to
$("#" + id).fadeIn();
Try this:
function shoh(id) {
var el = $('#' + id);
if (el.is(':visible')) {
el.hide();
} else {
el.fadeIn();
}
}
Due jquery works for you, you won't write crossbrowser code.
So simply
var $el = $('#'+id); // <-- this is the main key :-)
if ($el.css('display') == "none"){
$el.fadeIn();
} else {
$el.hide();
}
You could just declare it as a variable and then wrap it in a jQuery selector:
var $el = $(document.getElementById(id));
// if
$el.fadein();
//else
$el.hide();
jsFiddle

Place a variable as a HREF

Basically, is it possible to do something like....
Click me!
<script>
function clicked() {
if(myVar == 1) {
link="http://stackoverflow.com"
}
else if (myVar == 2) {
link="http://google.com"
}
}
</script>
This example is probably impossible due to it firing at the same time...
But is it at all possible to use variables there?
Basically, I need a link that'll bring you to two different places depending on a variable.
I suppose I could have two links, and just hide/show each one respectively depending on the variable, but I was wondering if it's possible another way?
I'm working with HTML, CSS, JavaScript, and JQuery...
Thank you!
You could do...
$('a').click(function(event) {
if (condition) {
event.preventDefault();
window.location = 'http://different-url.com';
}
});
If the condition is met, then it will take you to a different URL.
Otherwise, the link will work as expected.
If you didn't want to use jQuery, that'd be...
var anchors = document.getElementsByTagName('a');
for (var i = 0, anchorsLength; i < anchorsLength; i++) {
anchors[i].onclick = function(event) {
if (condition) {
event.preventDefault();
window.location = 'http://different-url.com';
}
}
}
You could simply use Javascript to do a redirect:
<script>
function clicked() {
if(myVar == 1) {
window.location = "http://url1.com";
}
else if (myVar == 2) {
window.location = "http://url2.com";
}
}
</script>
No it's not possible to do it the way you want.
Why don't you do this instead -
Click me!
<script>
function clicked()
{
if(myVar == 1)
{
window.location.href = "www.stackoverflow.com";
}
else if (myVar == 2)
{
window.location.href = "www.google.com";
}
}
Take a look at Mozilla Developer Center for further references about the window.location object.
you could do this:
<script> function clicked() {
if(myVar == 1) {
window.location="http://stackoverflow.com"
}
else if (myVar == 2) {
window.location="http://google.com"
} }
</script>
Try this out
Click me!
<script>
function clicked() {
if(myVar == 1) {
location.replace("http://stackoverflow.com");
}
else if (myVar == 2) {
location.replace("http://google.com");
}
}
</script>
Cheers. This will take you to the desired place based on the myVar values!
function clicked() {
var dest = "";
if(myVar)
dest = "http://stackoverflow.com";
else
dest = "http://google.com"
window.navigate(dest);
But I see everyone said about the same. Just check which of the methods works on most browsers

How can I change the class of an element with jQuery>

I have a JavaScript function that looks like this:
function UpdateFilterView() {
if (_extraFilterExists) {
if ($('#F_ShowF').val() == 1) {
$('#extraFilterDropDownButton').attr('class', "showhideExtra_up");
$('#extraFilterDropDownButton').css("display", "block");
if ($('#divCategoryFilter').css("display") == 'none') {
$('#divCategoryFilter').show('slow');
}
return;
} else {
if ($('#divCategoryFilter').css("display") == 'block') {
$('#divCategoryFilter').hide('slow');
}
$('#extraFilterDropDownButton').css("display", "block");
$('#extraFilterDropDownButton').attr('class', "showhideExtra_down");
return;
}
} else {
if ($('#divCategoryFilter').css("display") != 'none') {
$('#divCategoryFilter').hide('fast');
}
$('#extraFilterDropDownButton').css("display", "none");
}
}
This will be triggered by the following code (from within the $(document).ready(function () {}):
$('#extraFilterDropDownButton').click(function() {
if ($('#F_ShowF').val() == 1) {
$('#F_ShowF').val(0);
} else {
$('#F_ShowF').val(1);
}
UpdateFilterView();
});
The HTML for this is easy:
<div id="divCategoryFilter">...</div>
<div style="clear:both;"></div>
<div id="extraFilterDropDownButton" class="showhideExtra_down"> </div>
I have two problems with this:
When the panel is hidden and we press the div button (extraFilterDropDownButton) the upper left part of the page will flicker and then the panel will be animated down.
When the panel is shown and we press the div button the panel will hide('slow'), but the button will not change to the correct class even when we set it in the UpdateFilterView script?
The correct class will be set on the button when hovering it, this is set with the following code:
$("#extraFilterDropDownButton").hover(function() {
if ($('#divCategoryFilter').css("display") == 'block') {
$(this).attr('class', 'showhideExtra_up_hover');
} else {
$(this).attr('class', 'showhideExtra_down_hover');
}
},
function() {
if ($('#divCategoryFilter').css("display") == 'block') {
$(this).attr('class', 'showhideExtra_up');
} else {
$(this).attr('class', 'showhideExtra_down');
}
});
To set a class completely, instead of adding one or removing one, use this:
$(this).attr("class","newclass");
Advantage of this is that you'll remove any class that might be set in there and reset it to how you like. At least this worked for me in one situation.
Use jQuery's
$(this).addClass('showhideExtra_up_hover');
and
$(this).addClass('showhideExtra_down_hover');
<script>
$(document).ready(function(){
$('button').attr('class','btn btn-primary');
}); </script>
I like to write a small plugin to make things cleaner:
$.fn.setClass = function(classes) {
this.attr('class', classes);
return this;
};
That way you can simply do
$('button').setClass('btn btn-primary');

Categories

Resources