I'm having an issue with radio buttons showing one div and hiding the rest. I have my code which I'll post below (tested and working in jsfiddle but not when I put it onto my page).
To give you an idea of what I'm after, I am making a registration page. The radio buttons will control a div that has the form placed inside it, so radio 1 checked, div 1 is selected, and the rest hidden and so on.
Here's my jquery:
<script type="text/javascript">
$('#accountchoice').change(function() {
if ($('#personalfan').attr('checked')) {
$('#personalfan1').show();
$('#soloartist1').hide();
$('#band1').hide();
$('#venue1').hide();
$('#business1').hide();
$('#service1').hide();
} else if ($('#soloartist').attr('checked')) {
$('#soloartist1').show();
$('#personalfan1').hide();
$('#band1').hide();
$('#venue1').hide();
$('#business1').hide();
$('#service1').hide();
} else if ($('#band').attr('checked')) {
$('#band1').show();
$('#personalfan1').hide();
$('#soloartist1').hide();
$('#venue1').hide();
$('#business1').hide();
$('#service1').hide();
} else if ($('#venue').attr('checked')) {
$('#venue1').show();
$('#personalfan1').hide();
$('#soloartist1').hide();
$('#band1').hide();
$('#business1').hide();
$('#service1').hide();
} else if ($('#business').attr('checked')) {
$('#business1').show();
$('#personalfan1').hide();
$('#soloartist1').hide();
$('#band1').hide();
$('#venue1').hide();
$('#service1').hide();
} else if ($('#service').attr('checked')) {
$('#service1').show();
$('#personalfan1').hide();
$('#soloartist1').hide();
$('#band1').hide();
$('#venue1').hide();
$('#business1').hide();
}
});
</script>
and here's the HTML
<body>
<?php include_once "header_template.php"; ?>
<div id="signupwrapper">
<div id="signupinner">
<h3 align="left"> GETSCENE REGISTRATION ! </h3>
<hr />
<div id="signup" style="border:thin; border-color:#666">
<h4 align="left">Please Choose One of The Following Account Types</h4>
<div id="accountswrapper">
<form id="accountchoice" name="accountchoice" method="post" action="">
<label for="radio">personal/fan</label>
<input type="radio" name="radio" id="personalfan" value="radio1" checked="checked" />
<label for="radio2">Solo artist</label>
<input type="radio" name="radio" id="soloartist" value="radio2" />
<label for="radio3">band</label>
<input type="radio" name="radio" id="band" value="radio3" />
<label for="radio4">venue</label>
<input type="radio" name="radio" id="venue" value="radio4" />
<label for="radio5">business</label>
<input type="radio" name="radio" id="business" value="radio5" />
<label for="radio6">service</label>
<input type="radio" name="radio" id="service" value="radio6" />
</form>
<hr />
<div id="personalfan1">1</div>
<div id="soloartist1">2</div>
<div id="band1">3</div>
<div id="venue1">4</div>
<div id="business1">5</div>
<div id="service1">6</div>
</div>
</div>
</div>
</div>
<?php include_once "footer_template.php"; ?>
</body>
Any help here will be really appreciated as I've been banging my head against this for hours.
This script
<script type="text/javascript">
$('#accountchoice').change(function() {
Will only work if it's at the end of your body tag. If it's in the head, it won't do anything, since the dom won't be ready when the script runs.
The easiest way to fix this is to put this code into a document.ready handler:
$(function() {
//this will run when the dom is ready
$('#accountchoice').change(function() {
});
You should be able to trim this code down and do it all in one shot by looking at the radio that's checked
var allDivs = ['venue1', 'personalfan1', 'soloartist1', 'band1', 'business1', 'service1'];
var radio = $("input[type='radio']:checked");
if (radio.length === 0)
return;
$('#' + allDivs.join(',#')).hide();
$("div#" + radio[0].id + "1").show();
You could restructure your HTML to make your life MUCH easier.
Here is an example:
<style type="text/css">
#account_types > div { display: none; }
</style>
<div id="signupwrapper">
<div id="signupinner">
<h3 align="left"> GETSCENE REGISTRATION ! </h3>
<hr />
<div id="signup" style="border:thin; border-color:#666">
<h4 align="left">Please Choose One of The Following Account Types</h4>
<div id="accountswrapper">
<form id="accountchoice" name="accountchoice" method="post" action="">
<label for="personalfan">personal/fan</label>
<input type="radio" name="radio" id="personalfan" value="radio1" checked="checked" />
<label for="soloartist">Solo artist</label>
<input type="radio" name="radio" id="soloartist" value="radio2" />
<label for="band">band</label>
<input type="radio" name="radio" id="band" value="radio3" />
<label for="venue">venue</label>
<input type="radio" name="radio" id="venue" value="radio4" />
<label for="business">business</label>
<input type="radio" name="radio" id="business" value="radio5" />
<label for="service">service</label>
<input type="radio" name="radio" id="service" value="radio6" />
</form>
<hr />
<div id="account_types">
<div class="personalfan">1</div>
<div class="soloartist">2</div>
<div class="band">3</div>
<div class="venue">4</div>
<div class="business">5</div>
<div class="service">6</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#accountchoice').change(function() {
var divToShow = $(this).find('input:checked').attr('id');
$('#account_types > div').each(function() {
if($(this).hasClass(divToShow)) { $(this).show(); }
else { $(this).hide();}
});
});
$('#accountchoice').trigger('change');
});
</script>
Now, if you'll take a note at the restructuring, you'll see a few things. First, the Divs that contained the different account types are inside a holding Div. You don't need to do that, but it makes it easier to isolate them. You could just as easily have given them all a similar class to accomplish the same task.
Secondly, they now have class names that are the same as their associated input ID. This makes it very easy to reference the exact one you are looking for, while still making it easy to touch the rest of them too. So now you can loop through the array of these elements, show() the Div that goes along with the selected radio, and hide() the ones that aren't. All in a few small steps.
This also makes it much easier to add new parts to your code. Otherwise, if you added a new section, you'd have to edit each if() statement you made, adding the new section to make sure it shows and hides properly.
This is where you can see some of the power of the DOM. Much simpler code, easier to maintain, and you can reuse it later on.
I also fixed the labels for you too.
Here is another example, though it does require a little change to HTML to make it neat/easy to manage.
HTML
// Added class "choice" to the radio inputs
<input type="radio" name="radio" id="venue" class="choice" value="radio4" />
<input type="radio" name="radio" id="business" class="choice" value="radio5" />
<input type="radio" name="radio" id="service" class="choice" value="radio6" />
<div class="account_types">
<div class="dynamic" id="venue1">
4</div>
<div class="dynamic" id="business1">
5</div>
<div class="dynamic" id="service1">
6</div>
</div>
SCRIPT
$('input.choice').click(function () {
var eleToShow = this.id + "1";
$('div', '.account_types').hide();
$('#' + eleToShow).show();
});
Related
I've been trying to find a way to render the Submit button on a dynamic quiz useless until a user has selected an answer to every question. I could simply insert "required" before the answer's closing tags, but I have three different types of answers - including questions that require users to choose any number of checkboxes.
The solution appears to be a jQuery script that requires a selection for each question. But I can't get anything to work. I think maybe I'm just not getting my scripts properly associated with my form.
This is an example of my test code:
<div class="Answer">
<label class="Wide" for="q'.$QID.'-'.$Value.'"><div class="Radio"><input type="radio" name="q'.$QID.'[]" id="q'.$QID.'-'.$Value.'" value="'.$Value.'" style="display: none;"> '.$Value.'. '.$QA.'</div></label></div>
This is what the HTML looks like:
<li id="q7">
<div class="Question">Media that pretend to be opposed to the mainstream media are called...</div>
<div class="Answer">
<label class="Wide" for="q7-A"><div class="Radio"><input type="radio" name="q7[]" id="q7-A" value="A" style="display: none;"> A. alternative media</div></label></div>
<div class="Answer">
<label class="Wide" for="q7-B"><div class="Radio"><input type="radio" name="q7[]" id="q7-B" value="B" style="display: none;"> B. soapboxes</div></label></div>
<div class="Answer">
<label class="Wide" for="q7-C"><div class="Radio"><input type="radio" name="q7[]" id="q7-C" value="C" style="display: none;"> C. underground media</div></label></div>
<div class="Answer">
<label class="Wide" for="q7-D"><div class="Radio"><input type="radio" name="q7[]" id="q7-D" value="D" style="display: none;"> D. yellow journalism</div></label></div>
</li>
And this is the form that processes everything:
<div id="quiz2" rel="key" style="margin-top: 50px;">
<form action="grade.php" method="post" id="quiz">
<ol>
<li style="display: none;">
<?php
echo join ($Base, '');
?>
</li>
</ol>
<input type="hidden" name="PreviousURL" value="<?php echo $MyURL; ?>" id="url" />
<input type="hidden" name="user_token" value="<?php echo isset($_POST['user_token']) ? $_POST['user_token'] : '' ; ?>" />
<input type="submit" value="Submit Quiz" />
</form>
</div><!-- quiz-container -->
So what do I have to do to make the following jQuery work with the above? I changed the ID number to quiz, matching my form. I don't understand what "index" means, but I've tried replacing "value" with a number of variables. Nothing works.
<script>
var inputs = $('#quiz :input');
inputs.each(function(index, value) {
if ($(value).val() == '') { //check if the input is empty
//return the error
echo 'ERROR!';
}
});
</script>
Here's another script that looks interesting, but I don't know how to associate it with my form:
<script>
function checkInput() {
var inputs = $("input");
check = 0;
for (var i = 0; i < inputs.size(); i++) {
var iVal = $(inputs[i]).val();
if (iVal !== '' && iVal !== null) {
$(inputs[i]).removeClass('input-error');
} else {
$(inputs[i]).addClass('input-error');
$(inputs[i]).focus(function() {
$("input").removeClass('input-error');
$(inputs[i]).off('focus');
});
check++;
}
}
if (check > 0) {
return false;
} else {
return true;
}
}
checkInput()
</script>
I've been playing with both scripts, manipulating various variables, but every time I click the Submit button without answering a question, it forwards me to the next page.
QUESTION UPDATED
pqq.php file:
I have a form like so:
<form>
{General form input here, i.e. name, address}
<php include 'form_general.php'; ?>
{Specific form input here, i.e. equipment type}
<php include 'infrastructure.php'; ?>
<div id="placeholder"></div>
<submit>
</form>
So in my infrastructure.php file I have the following checkboxes contained within a couple of parent divs like so:
infrastrucure.php file:
Plant Hire Category
<div class="option_select"><p class="select">Plant Hire</p></div>
<div class="option_underlay">
<div class="align"><p class="header">Access Platforms</p>
<div class="float_column3">
<input type="checkbox" name="option" id="option" class="group1" value="same">Option
<input type="checkbox" name="option" id="option" class="group1" value="same">Option
<br>
<input type="checkbox" name="option" id="option" class="group1" value="same">Option
<input type="checkbox" name="option" id="option" class="group1" value="same">Option
</div>
</div>
</div>
Travel Category
<div class="option_select"><p class="select">Travel</p></div>
<div class="option_underlay">
<div class="align"><p class="header">Planes</p>
<div class="float_column3">
<input type="checkbox" name="option" id="option" class="group2" value="same">Option
<input type="checkbox" name="option" id="option" class="group2" value="same">Option
<br>
<input type="checkbox" name="option" id="option" class="group2" value="same">Option
<input type="checkbox" name="option" id="option" class="group2" value="same">Option
</div>
</div>
</div>
JQUERY in my pqq.php file:
<script>
$(document).ready(function () {
$('input[name=option]').change(function () {
if($(this).hasClass('group1')) {
$('#placeholder').load("safety.php");
} else if($(this).hasClass('group2')) {
$('#placeholder').load("travel.php");
}
});
});
</script>
what I am trying to do is if a user checks any checkbox from the Plant Hire category then it includes my safety.php file in the form. Otherwise if a user selects any checkbox from my travel category then my travel.php file is included in the form?
Does anyone know a way I can do this using jquery or other methods?
Thanks,
First make div, where the loaded php file will be stored, in my code it would be <div id="placeholder"></div>, then for each group of checkboxes use the same class, in my code it's class group-1 and class group-2. Then use something like this:
$(document).ready(function () {
$('input[name=option]').change(function () {
if ($(this).hasClass('group1')) {
var length = $('.group1:checked').length;
if (length) {
$('#placeholder').load("safety.php");
} else {
$('#placeholder').html("");
}
} else if ($(this).hasClass('group2')) {
var length = $('.group2:checked').length;
if (length) {
$('#placeholder').load("travel.php");
} else {
$('#placeholder').html("");
}
}
});
});
Can more checkboxes be selected? Or only one? If only one, you should probably uncheck all other checkboxes in the code.
Also you have in your sample code multiple same IDs, which is not a good practice.
<p><h3 style="font-size:18px;">Call Status:</h3>
<body>
<div>
<form action="immediate.php">
<label><input type="radio" name="colorRadio" <?php if (isset($colorRadio) && $colorRadio=="immediate" ) echo "checked";?>value="IMMEDIATE"> Call Immediate</label>
</form>
<form action="scheduled.php">
<label><input type="radio" name="colorRadio" <?php if (isset($colorRadio) && $colorRadio=="scheduled") echo "checked";?> value="SCHEDULED"> Call Scheduled</label>
</form></div>
<div class="IMMEDIATE box">You have selected <strong>red radio button</strong> so i am here</div>
<div class="SCHEDULED box"><p>
<td>
<input type="Text" id="demo1" name="demo1" maxlength="25" size="25"><a href="javascript:NewCal('demo1','DDMMYYYY',true,24)">
<img src="img/cal.gif" width="16" height="16" border="0"></a>
<span class="descriptions">Pick a Date</span>
</p></div>
Hi Sir this is my code...I just want to add multiple form action on selection of radio button... Call Immediate radio button is selected then send my form at immediate.php page and if Call Scheduled is selected then then page send on scheduled.php page
Its easier with jQuery. Basic version is:
<input type="radio" name="group1" id="basic" value="a.html" onclick="setLocation(this)" checked="checked" />
function setLocation(element) {
document.forms[0].action = element.value
}
here's an example for you
<html>
<head>
<script type="text/javascript">
function select()
{
var1=document.getElementById("radio1");
var2=document.getElementById("radio2");
if(var1.checked==true)
{
document.myform.action="immediate.php";
}
else
{
document.myform.action="Scheduled.php";
}
}
</script>
</head>
<body>
<form action="immediate.php" method="post" name="myform" onsubmit="select()">
<input type="radio" id="radio1" name="colorRadio" value="IMMEDIATE">
<input type="radio" id="radio2" name="colorRadio" value="Call SCHEDULED">
<input type="submit" value="Submit">
</form>
</body>
</html>
It check for selected radio button when submit is clicked and assign action based on selection.
Hope it helps
I have a JavaScript working on some PHP code as follows:
$(function(){
$("#hosted_prev_no").change(function(){
$("#attend").show();
$("#eligible").hide();
});
$("#hosted_prev_yes").change(function(){
$("#attend").hide();
$("#eligible").show();
});
$("#attend_prev_yes").change(function(){
$("#eligible").show();
});
$("#attend_prev_yes").change(function(){
$("#eligible").hide();
});
The php code is as follows:
<div class="full row column">
<label id="hosted_prev_label" for="hosted_prev" class="required">Have you hosted a Road Scholar program for Stetson University in the past?</label>
<label id="hosted_prev_yes_label" for="hosted_prev_yes">Yes</label>
<input id="hosted_prev_yes" name="hosted_prev" type="radio" value="Yes" />
<label id="hosted_prev_no_label" for="hosted_prev_no">No</label>
<input id="hosted_prev_no" name="hosted_prev" type="radio" value="No" /><br />
<div id="attend" class="hidden">
<label id="atend_prev_label" for="atend_prev" class="required">Have you attended at least one Stetson Road Scholar program in the past?</label>
<label id="attend_prev_yes_label" for="attend_prev_yes">Yes</label>
<input id="attend_prev_yes" name="attend_prev" type="radio" value="Yes" />
<label id="attend_prev_no_label" for="hosted_prev_no">No</label>
<input id="attend_prev_no" name="attend_prev" type="radio" value="No" /><br />
</div>
<div id="ineligible" class="hidden">
<p>All hosts are required to attend at least one Stetson University Road Scholar program before they may host p program. You may apply again once you have attended a Stetson University Road Scholar program. Thank you for your interest.</p>
</div>
</div>
<div id="eligible" class="full row column hidden">
<h2>Cohost Information</h2>
<label id="is_cohost_label" for="is_cohost" class="required">Will you be hosting with anyone?</label>
<label id="is_cohost_yes_label" for="is_cohost_yes">Yes</label>
<input id="is_cohost_yes" name="is_cohost" type="radio" value="Yes" />
<label id="is_cohost_no_label" for="is_cohost_no">No</label>
<input id="is_cohost_no" name="is_cohost" type="radio" value="No" /><br />
</div>
The problem is that the second radios not displaying the "eligible" div. How do you know which change function has precedence here?
You are binding the same element twice:
$("#attend_prev_yes").change(function(){
$("#eligible").show();
});
$("#attend_prev_yes").change(function(){
$("#eligible").hide();
});
I think what you need is:
$("#attend_prev_yes").change(function(){
$("#eligible").show();
});
$("#attend_prev_no").change(function(){
$("#eligible").hide();
});
For some reason my javascript won't execute when my submit button is pressed. It's supposed to leave an error message beside two textfields for a user's name and email address if they are empty, but it's not and I can't figure out why. Normally, when the two boxes are filled, the submit would go to a php page which sends an email. Any suggestions or help with fixing my javascript problem will be greatly appreciated.
This is my javascript:
//my javascript function
<script type='text/javascript'>
function validate_form()
{
$('span.error_message').html('');
var success = true;
$("#validate_form input").each(function()
{
if($(this).val()=="")
{
$(this).next().html("* You must complete this field"); // the error message
success = false;
}
});
return success;
}
</script>
and my form in html:
<form action=".....whatever....." method="POST" id="validate_form" onsubmit="return validate_form();">
<ol>
<li>
<span id="question">___ is your name? My name is Marie.</span>
<input type="text" name="q1" id="q1" />
</li>
<li>
<span id="question">___ are you from? I'm from Paris, France.</span>
<input type="text" name="q2" id="q2" />
</li>
<li>
<span id="question">Dave: ___ you like football</span>
<p>
<input type="radio" name="q6" value="1" id="q6_1" />
<label for="q6_1">Are</label>
<input type="radio" name="q6" value="2" id="q6_2" />
<label for="q6_2">Do</label>
<input type="radio" name="q6" value="3" id="q6_3" />
<label for="q6_3">Does</label>
<input type="radio" name="q6" value="4" id="q6_4" />
<label for="q6_4">Is</label>
</p>
</li>
<div id="username">
<p>
Before we begin, please enter your name and email:
<br />
<label for="user_name">Name: </label><input type="text" name="user_name" id="user_name" />
<span class="error_message" style="color:#FF0000"></span>
<br />
<label for="user_email">Email: </label><input type="text" name="user_email" id="user_email" />
<span class="error_message" style="color:#FF0000"></span>
</p>
</div>
<p style="width: 242px; margin: auto;">
<input type="submit" name="submit" value="Submit your answers" id="but" />
</p>
</form>
Edit: Fixed the problem with the javascript being called, but now the submit button isn't working even with the two textfields being filled.
$("#validate_form input") - I don't see validate_form anywhere; you need to add it or just use: $("input")
Firebug for firefox would help you debug these types of jscript issues. You can also use the Error Console in Firefox if you dont want to install firebug.