|
JavaScript - Show Content Depending Which Checkboxes Checked
display text depending dropdown
Hey! I am creating a new function for my website which will make it very nice I believe. But since I am no good at javascript I have got quite stuck here but I don't think it's that hard afterall. Actually I'm not completely sure if javascript is needed but please lead me in the right direction here, I'm lost. What I want to make is depending what checkboxes the visitor choose and then click "Search" he will get a certain result which is categoried under these checkboxes. I don't know what else to say but I hope you get an idea of what I mean, if not please ask and I'll try explain it better. Thankful for your help Similar TutorialsCan someone please help, I don't understand why my code doesn't work?! I just want to check to see if a checkbox has been checked... Code: <script language="JAVASCRIPT" type="text/djs">
function checkCheckBoxes() {
if (document.f1.Times[].checked == false
{
alert ('You didn\'t choose any of the checkboxes!');
return false;
}
else
{
return true;
}
}
</script>
<form onsubmit="return checkCheckBoxes();" action="add-booking-script.php" name="f1" method="post">
<input type="checkbox" name="Times[]" value="07:00:00"> 07:00 - 10:00<br />
<input type="checkbox" name="Times[]" value="10:00:00"> 10:00 - 13:00<br />
<input type="checkbox" name="Times[]" value="13:00:00"> 13:00 - 16:00<br />
<input type="checkbox" name="Times[]" value="16:00:00"> 16:00 - 19:00<br />
</form>
Hi, I'm having problems getting the values of selected checkboxes and outputting them to a textarea. This seems like quite a simple thing to do but its causing me a lot of bother! I am using a mixture of JavaScript and jQuery to find a solution to this. Code: <h2>Booking Form</h2> <form name="booking"> Please choose the days that would suit your visit: <br/> <input type="checkbox" name="days" value="Monday">Monday<br/> <input type="checkbox" name="days" value="Tuesday">Tuesday<br/> <input type="checkbox" name="days" value="Wednesday">Wednesday<br/> <input type="checkbox" name="days" value="Thursday">Thursday<br/> <input type="checkbox" name="days" value="Friday">Friday<br/> </form> <textarea id="output"> </textarea> Code: var values = $("#days").val() || [];
$("p#ss").html("<strong>Checked values:</strong> " + values.join(", "));
//This just outputs "Checked values:" to the paragraph 'ss' that I created just to test it this way.
Help with this would be appreciated. Hi I am very new to Javascript and I was wondering if anyone could help. This is my jQuery code: Code: $(document).ready(function(){
if("input.cf_flt:checked") {
$(".filterbox").show()
}
else {
$(".filterbox").hide()
}
$(".filtertoggle").click(function()
{
$(this).next(".filterbox").slideToggle(500);
});
});
HTML (sorry, quite a lot) Code: <h3 class="filtertoggle">Filter These Results <span>Click Here</span></h3>
<div class="filterbox">
<form name="cf_form" action="index.php" method="get"
class="cf_form topfilter">
<div class="cf_flt_wrapper">
<div class="cf_flt_header" id="cfhead_0">
Grape </div>
<div class="cf_wrapper_inner"
id="cf_wrapper_inner_0">
<ul class="cf_filters_list"><li><input onclick="window.location='/eden/index.php?custom_f_17[0]=50726f63616e69636f2c2056657264656c6c6f2c2047726563686574746f2c204d616c766173696120546f7363616e61&option=com_customfilters&view=products';" type="checkbox" name="custom_f_17[]"class="cf_flt" id="flt_50726f63616e69636f2c2056657264656c6c6f2c2047726563686574746f2c204d616c766173696120546f7363616e61" value="50726f63616e69636f2c2056657264656c6c6f2c2047726563686574746f2c204d616c766173696120546f7363616e61" /><label class="" for="flt_50726f63616e69636f2c2056657264656c6c6f2c2047726563686574746f2c204d616c766173696120546f7363616e61"><a href="/eden/index.php?custom_f_17[0]=50726f63616e69636f2c2056657264656c6c6f2c2047726563686574746f2c204d616c766173696120546f7363616e61&option=com_customfilters&view=products" class="cf_option ">Procanico, Verdello, Grechetto, Malvasia Toscana</a></label></li><li><input onclick="window.location='/eden/index.php?custom_f_17[0]=53616e67696f76657365&option=com_customfilters&view=products';" type="checkbox" name="custom_f_17[]"class="cf_flt" id="flt_53616e67696f76657365" value="53616e67696f76657365" /><label class="" for="flt_53616e67696f76657365"><a href="/eden/index.php?custom_f_17[0]=53616e67696f76657365&option=com_customfilters&view=products" class="cf_option ">Sangiovese</a></label></li></ul> </div>
</div>
<div class="cf_flt_wrapper">
<div class="cf_flt_header" id="cfhead_1">
Bottle Size </div>
<div class="cf_wrapper_inner"
id="cf_wrapper_inner_1">
<ul class="cf_filters_list"><li><input onclick="window.location='/eden/index.php?custom_f_18[0]=3735636c&option=com_customfilters&view=products';" type="checkbox" name="custom_f_18[]"class="cf_flt" id="flt_3735636c" value="3735636c" /><label class="" for="flt_3735636c"><a href="/eden/index.php?custom_f_18[0]=3735636c&option=com_customfilters&view=products" class="cf_option ">75cl</a></label></li></ul> </div>
</div>
<div class="cf_flt_wrapper">
<div class="cf_flt_header" id="cfhead_2">
ABV </div>
<div class="cf_wrapper_inner"
id="cf_wrapper_inner_2">
<ul class="cf_filters_list"><li><input onclick="window.location='/eden/index.php?custom_f_16[0]=31322e3525&option=com_customfilters&view=products';" type="checkbox" name="custom_f_16[]"class="cf_flt" id="flt_31322e3525" value="31322e3525" /><label class="" for="flt_31322e3525"><a href="/eden/index.php?custom_f_16[0]=31322e3525&option=com_customfilters&view=products" class="cf_option ">12.5%</a></label></li><li><input onclick="window.location='/eden/index.php?custom_f_16[0]=313325&option=com_customfilters&view=products';" type="checkbox" name="custom_f_16[]"class="cf_flt" id="flt_313325" value="313325" /><label class="" for="flt_313325"><a href="/eden/index.php?custom_f_16[0]=313325&option=com_customfilters&view=products" class="cf_option ">13%</a></label></li><li><input onclick="window.location='/eden/index.php?custom_f_16[0]=31332e3525&option=com_customfilters&view=products';" type="checkbox" name="custom_f_16[]"class="cf_flt" id="flt_31332e3525" value="31332e3525" /><label class="" for="flt_31332e3525"><a href="/eden/index.php?custom_f_16[0]=31332e3525&option=com_customfilters&view=products" class="cf_option ">13.5%</a></label></li></ul> </div>
</div>
<div class="cf_flt_wrapper">
<div class="cf_flt_header" id="cfhead_3">
Vintage </div>
<div class="cf_wrapper_inner"
id="cf_wrapper_inner_3">
<ul class="cf_filters_list"><li><input onclick="window.location='/eden/index.php?custom_f_15[0]=32303038&option=com_customfilters&view=products';" type="checkbox" name="custom_f_15[]"class="cf_flt" id="flt_32303038" value="32303038" /><label class="" for="flt_32303038"><a href="/eden/index.php?custom_f_15[0]=32303038&option=com_customfilters&view=products" class="cf_option ">2008</a></label></li><li><input onclick="window.location='/eden/index.php?custom_f_15[0]=32303130&option=com_customfilters&view=products';" type="checkbox" name="custom_f_15[]"class="cf_flt" id="flt_32303130" value="32303130" /><label class="" for="flt_32303130"><a href="/eden/index.php?custom_f_15[0]=32303130&option=com_customfilters&view=products" class="cf_option ">2010</a></label></li></ul> </div>
</div>
<input type="hidden" name="option" value="com_customfilters" /> <input
type="hidden" name="view" value="products" />
</form>
</div>
Basically if the checkbox with a class of cf_flt is checked then I want the div '.filterbox' to show. if the checkbox is unchecked then I want it to hide. As well as this I have a toggle button called '.filtertoggle' which toggles the '.filterbox' At the moment the '.filterbox' shows regardless of whether or not the checkbox is checked. The toggle button works correctly. If you know how to fix this then I would be very grateful. Thank you. Hi, my code below shows 2 radio buttons, when you click on one, it shows the content from a div, I would like to show the content of the checked radio button by default, at teh moment, they don't show any content until they are clicked! Code: <html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[name$='group1']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#"+test).show();
});
});
</script>
</head>
<body>
<input type="radio" name="group1" value="AvailableMon" checked>Available
<input type="radio" name="group1" value="Unavailable">Unavailable
<style type="text/css">
.desc { display: none; }
</style>
<div id="AvailableMon" class="desc">Available</div>
<div id="Unavailable" class="desc">Unavailable</div>
</body>
</html>
I've not really an idea how to do this. I know how to do it in PHP, but I need it dynamic <input type="checkbox" name="facebook" value="1" /> if($_POST['facebook'] == 1) echo "<input type='text' name='facebook_url' />"; Could someone tell me how I should do this. Thanks. Hi I have a multipage form. I can put data entered in hidden form elements from previous pages. I want to show or hide table rows depending on this data value. For example, I collect a list of names in first form, but if some names are blank I dont want to show the table row associated with that name to collect more data. I have seen loads of code to toggle rows but cant find any which shows me how to toggle on a variable. Thanks in advance. Dear Javascript programmers, Do you have an example of a Javascript something like this: A dropdownlist with values "one" and "two". The radio button is not visible (as a start). - If you have selected "one" from the dropdown list, then a radio button will appear. - If you have selected "two" from the dropdown list, then a radio button will NOT appear. Thanks, Cornelis Gouda - The Netherlands Firstly, I'm a complete Javascript noob, so apologies if this is blindingly simple. I'm trying to write a piece of javascript that will check a single checkbox depending on a dynamically-imported piece of information further up the page. The page will look like this: Code: <div id="title">
<p class="white">1</p>
</div>
<div id="question">
<p>Please indicate your area(s) of interest below:<br />
<input type=checkbox value="1" /> Option 1<br />
<input type=checkbox value="2" /> Option 2<br />
<input type=checkbox value="3" /> Option 3<br />
<input type=checkbox value="4" /> Option 4</p>
</div>
The variable which indicates which checkbox should already be checked is in the div 'title' in the p class 'white'. So in the case above, when the page loads the 'Option 1' checkbox should already be checked. The javascript i have, rather poorly, cobbled together so far just doesn't work, and I was wondering if anyone could point me in the direction of some useful tutorials. All the tutorials I have read so far deal with mass checking all the boxes with a button click. I have two effects, one is a fadein effect and one is a smooth scrolling effect. I also have a simple image slider but that isn't the problem. It doesn't seem like the fadein is the problem either because when I had non-scrolling (positioned absolute) content "fadein", it wouldn't fadein in IE but at least it showed up, whereas the main content is blocked in IE with a dialogue about not running scripts or activex. Is there a way to overwrite this? I tried running the basic example of smooth scrolling in IE9 and it worked fine without being blocked. My code seems the same! I would be ok with the content just not fading in when using IE9, but if a user doesn't know to enable activex scripts from the dialogue box (assuming they even get a dialogue box), they won't be able to read any of the content which is an issue. Here's the JavaScript in the head section: Code: <script type="text/javascript" src="jquery.js"></script>
<script>
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');}
</script>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="slider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
<link href="slider2.css" rel="stylesheet" type="text/css" media="screen" />
<script>
function fadein(){var fade=0,fadein=document.getElementById("fadein").style,ms=(fadein.opacity==0)?0:1,pace=setInterval(Fade,40);function Fade(){if(fade<100){fade+=2;if(ms)fadein.filter="alpha(opacity="+fade+")";else fadein.opacity=(fade/100)}else clearInterval(pace)}};
window.onload=fadein;
</script>
</head>
Can anyone tell me how I can change the code below so that instead of all the fade in fade out stuff the function will actually replace whatever is inside a div called Myholder with the response this script pulls in? Here's the code I need to change. <script type="text/javascript"> $(document).ready(function() { $('#wait_1').hide(); $('#drop_1').change(function(){ $('#wait_1').show(); $('#result_1').hide(); $.get("func.php", { func: "drop_1", drop_var: $('#drop_1').val() }, function(response){ $('#result_1').fadeOut(); setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400); }); return false; }); }); function finishAjax(id, response) { $('#wait_1').hide(); $('#'+id).html(unescape(response)); $('#'+id).fadeIn(); } </script> drop_1 is the name of a drop down which when changed runs this script which brings back a second dropdown with data relating to the first one. If I need to post more info to get some help with this please let me know. Thanks in advance. http://phplist.xxmn.com/menu.html When the mouse hover on the navigation (cpanel). it shows the corresponding content under it. but i can't click the link in it. is there a way to get it.i know it will be using setTimeout. but i don't know how to do. thank you. when i change the top value small.but under IE7 and IE6.i still can't click the link in the showing content. I want to place a Logo/ad in front of content, there are ways to do it but the problem with them is that they use JS show/hide method. What happens is that the content doesn't load while user is watching the logo/ad, which results as double waiting for the user first for the logo/ad and then the actual flash content loading. So I was thinking if there is a way that a logo/ad could be displayed and at the same time flash content continues to load at the back end. *I didn't ask for a loader that continues to appear until at the back end flash content is done loading, because I found only one script that was able to do so using Jquery but it was designed to work with fixed pixels while my flash content is based on %ages* Live Demo: http://bloghutsbeta.blogspot.com/201...ent-issue.html Note: Sorry for providing blogspot link but JsFiddle is not an option for a person living in Afghanistan with 5KBps but still if you feel that I am missing something please let me know I will edit it and try my best to provide as relevant question as possible ^^ Relevant Markup: Button for lightbox or Modal Window Code: <a class="poplight" href="#?w=100%" rel="popup_name"><img alt="play game" class="happybutton" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://farm5.static.flickr.com/4084/4998558471_27e3985c16_m.jpg" style="opacity: 0.8;" /></a> Code: <div class="popup_block" id="popup_name">
<script type="text/javascript">
$(document).ready(function(){
$('a.poplight[href^=#]').click(function() {
$('<iframe/>')
.attr('frameborder', 0)
.attr('allowTransparency', false)
.attr('scrolling', 'no')
.attr('width', '100%')
.attr('height', '98%')
.attr('src', 'http://files.cryoffalcon.com/bhgames/dressup/Celebrities/Wizard%20Fashion.html')
.appendTo('#popup_name');
});
});
</script>
</div>
CSS: Code: #fade {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999999;
}
.popup_block{
width: 98.95%; height: 98.2%;
display: none;
padding: 0px;
line-height:1em;
font-size: 1em;
position: fixed;
top: 0px; left: 0px;
z-index: 999999999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.close {
height:20px;
float: right;
margin: 0 2px 0 0;
}
JS (actually Jquery) Code: <script type="text/javascript">
$(document).ready(function(){
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" title="Close It" class="close"><img src="http://files.cryoffalcon.com/bloghuts/images/close%20button.png" alt="Close" width="20" height="20" /></a>');
//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
var popMargTop = ($('#' + popID).height() + 0) / 0;
var popMargLeft = ($('#' + popID).width() + 0) / 0;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
return false;
});
});
</script>
Hi ya all, how can I show / hide the content of sub divs based on whether the input is != or = and be able to repeat this. I tried to hide the sub divs using , onclick if bla bla = '' ; Code: document.getElementById('hideme').innerHTML = '';
which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input thx Hi, I'm very new to coding Javascript, so have no idea what I'm doing, so sorry What I'm trying to do is, on my Wordpress Blog I have a button/Image: Code: src="http://Mysite.com/Images/Button.png" I would like for when a user Clicks this Image/button, 2 things to happen - 1. For my Content Locker to pop up, I believe that i already have the correct code for that?: Code: onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://MYCONTENTLOCKER.com/guid?:1234567890')
For this content locker to trigger, The whole action needs to have a ID e.g. 'ID="button1'? And 2. For a timer to start for say 30 Seconds. When that timer ends, i would like the original button/image to be replaced with a different button/image. And when that New button is clicked i would like a text string to appear below the button - saying something e.g. 'You've completed this part' I know that this is a lot to ask, and I will be so very grateful if someone helps me out here! Thanks! Harry. I'l not good in Javascript and I can't find anything about what I want.. . On a sports website there is a table with our ranking and results. On this site the content is changed weekly, but it stays in the same tables.. . Is it possible to make a javascript to get those tables and put them on my own website so the content will change on my site when the content is changed on the sports site? Please help me, it would save me lot of time.. . THx So I have a form. Unfortunately, I'm not using a <form> tag, it's all div. Code: <div id="mainForm"> <div class="label"><input type="checkbox" id="LeftFixed" />Left Bar Always On Screen</div> What I'm trying to do is if that box is checked, execute a javascript. How do I do that? so if checked, execute 'sources/leftbar.js' or I could even just copy the code so it's inline, and not called. Is there a way to do this? Sorted. Close thread please. New problem in post below VVV Hi, I'm using JavaScript to check (or leave empty) a checkbox based on stored data. Code: for (var q=0;q<document.Simple.Subject.length;q++) {
if (document.Simple.Subject[q].value == document.Restored.Subject.value) {
document.Simple.Subject[q].checked = true; break; }
It works perfectly, but I've discovered that it adds a simple "checked" to the form: Code: <input type="checkbox" name="Subject" value="Math" checked /> ... I thought I read that checked is not proper... it the attribute should really be checked="checked" . Is there a way to tweak this with JavaScript? Thanks. ~Wayne |
|||||||