<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
Related
I have a webpage that contains two set of radio buttons. I want to do; if user select a OS in first fieldset and a language from second fieldset, then user must directed to relevant pages.
Please guide me to complete this page. I am unable to get two radio button values at a time. If I rename the radio buttons like below,
<fieldset id="group1">
<input type="radio" class="radto" name="android"/>
</fieldset>
<fieldset id="group1">
<input type="radio" class="radto" name="english"/>
</fieldset>
It's working, but the problem is users can select more than one OS and language. I need to prevent this. How can I overcome this problem.
<?php
if (isset($_POST['submit'])) {
if (isset($_POST['android']) && isset($_POST['english'])) {
header("location: andro_eng.php");
exit();
}
if (isset($_POST['android']) && isset($_POST['french'])) {
header("location: andro_fre.php");
exit();
}
}
?>
<html>
<head>
</head>
<body>
<form action="" method="post">
<fieldset id="group1">
<li><input type="radio" class="radto" name="a"/> android</li>
<li><input type="radio" class="radto" name="a"/> ios</li>
<li><input type="radio" class="radto" name="a"/> symbian</li>
</fieldset>
<fieldset id="group2">
<li><input type="radio" class="radto" name="b"> english</li>
<li><input type="radio" class="radto" name="b" > french</li>
<li><input type="radio" class="radto" name="b"> spanish</li>
</fieldset>
<input type="submit" value="next" name="submit">
</form>
</body>
</html>
The name attribute has to be the same for the different options:
$( document ).ready(function() {
$('#button').click(function() {
alert($('input[name=os]:checked').val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="group1">
<input type="radio" class="radio" name="os" value="android" id="android" />
<label for="a">Android</label>
</fieldset>
<fieldset id="group1">
<input type="radio" class="radio" name="os" value="iOS" id="iOS" />
<label for="b">iOS</label>
</fieldset>
<button id="button" type="button">Get value</button>
And you need to add a value attribute to the radio inputs, otherwise you won't get any value.
Then you can get the values from PHP: $_POST['os'] will return android, iOS or may be empty if no value is selected.
This question already has answers here:
Show and hide, enable and disable depending on radios and checkboxes
(4 answers)
Closed 7 years ago.
Reposting this question. I need to approach it from a different way than
Show and hide, enable and disable depending on radios and checkboxes
My old way below:
First I am not supposed to use the click function for radio buttons. I need to check if radio buttons are checked and then display the electronics div or cookware-items div accordingly. Also need to display both if the radio button option "both" is checked.
The textbox fields in electronics div and cookware items div for the user to input quantities should be displayed only when the checkbox for the respective electronics or cookware item is checked.
Any inputs ?
<html>
<head>
<script src="jquery-1.11.0.js"></script>
<style>
div{display:none}
</style>
</head>
<body>
<form>
<input type="radio" name="household" id ="electronics" value="electronics">Electronics<br>
<input type="radio" name="household" id="cookware" value="cookware">Cookware<br>
<input type="radio" name="household" id="both" value="both">Both<br>
</form>
<script>
$(document).ready(function(){
$(input[type="radio"]).click(function(){
$("#electronics").show;
});
});
</script>
<div id="electronics">
<input type="checkbox" value="radio" name="radio">Radio 2000 <input type="textbox" name="text1"><br>
<input type="checkbox" value="phone" name="phone">Phone 2000 <input type="textbox" name="text2"><br>
<div id="cookware-items">
<input type="checkbox" value="grinder" name="grinder">Grinder 2000 <input type="textbox" name="text1"><br>
<input type="checkbox" value="mixer" name="mixer">Mixer 2000 <input type="textbox" name="text2"><br>
</div>
</body>
</html>
Edit checkbox Cookware's value to cookware-items
Using jquery hide and show like this:
Live demo: http://code.freetuts.net/editor.html?id=241
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.0.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
div{display:none}
</style>
</head>
<body>
<form>
<input type="radio" name="household" value="electronics">Electronics<br>
<input type="radio" name="household" value="cookware-items">Cookware<br>
<input type="radio" name="household" value="both">Both<br>
</form>
<script>
$(document).ready(function() {
$('input[name="household"]').click(function()
{
// Hide 2 divs
$('#electronics').hide();
$('#cookware-items').hide();
// Show by current checkbox
var value = $(this).val();
if (value == 'both'){
$('#electronics').show();
$('#cookware-items').show();
}
else{
$('#'+value).show();
}
});
});
</script>
<div id="electronics">
<input type="checkbox" value="radio" name="radio">Radio 2000 <input type="textbox" name="text1"><br>
<input type="checkbox" value="phone" name="phone">Phone 2000 <input type="textbox" name="text2"><br>
</div>
<div id="cookware-items">
<input type="checkbox" value="grinder" name="grinder">Grinder 2000 <input type="textbox" name="text1"><br>
<input type="checkbox" value="mixer" name="mixer">Mixer 2000 <input type="textbox" name="text2"><br>
</div>
</body>
</html>
<?php
echo $_POST['textvalue'];
echo $_post['radiovalue'];
?>
<div id="hidethis">
<form method="POST" action="">
<label>Tekst Value</label>
<input type="text" name="textvalue">
<label>Radio Value</label>
<input type="radio" name="radiovalue" value="autogivevalue">
<input type="submit" id="submit" name="submit" value="submit">
</div>
http://jsfiddle.net/Bjk89/2/ here is it with the jQuery.
What i try to do is to hide the <div id="hidethis"> when it's clicking submit.
I know i can make another page where i can recieve the values without the <form> section, but i want to put both in one page, make the <div id="hidethis"> hidden after submit.
So i'll be able to get echo $_POST['textvalue']; and echo $_post['radiovalue']; as results
RESULT MUST BE LIKE
A Text // This is the value you input into Tekst Value
autogivevalue // This is the value from the radio button
----- INVISIBLE -----
<form is hidden because we set it in jQuery so>
</form>
Try this. No need to use jQuery here.
<?php
if($_POST) {
echo $_POST['textvalue'];
echo $_post['radiovalue'];
} else {
?>
<form method="POST" action="">
<label>Tekst Value</label>
<input type="text" name="textvalue">
<label>Radio Value</label>
<input type="radio" name="radiovalue" value="autogivevalue">
<input type="submit" id="submit" name="submit" value="submit">
</form>
<?php
}
?>
Try adding '#' in your jquery code. Your version does not have # next to submit. Also your form is missing a closing tag here and in your JSFiddle code.
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#submit').click(function () {
$('form').submit();
$('#hidethis').hide();
});
});
</script>
<form method='post' id="hidethis" name='form'>
<input type="text" name="textvalue">
<input type="radio" name="radiovalue" value="1">
<input type="button" id="submit" name="submit" value="submit">
</form>
i am a beginner in php and my first task is to build a calculator and I am here to ask how to get a value from a button and just echo it on the same page. I am trying through method post using isset but enable to display any value on the same page.
<form action="" method="POST">
<input type="button" value="0" name="zero">
</form>
<?php
if (isset($_POST["zero"]))
{
echo $_POST["zero"];
}
?>
Only an input[type=submit] will submit the form onclick. It is valid to have multiple submit buttons:
<form action="" method="POST">
<input type="submit" value="0" name="mybutton">
<input type="submit" value="1" name="mybutton">
<input type="submit" value="2" name="mybutton">
</form>
<?php
if (isset($_POST["mybutton"]))
{
echo $_POST["mybutton"];
}
?>
If you want to use input[type=button] then you will need some Javascript to trigger the submit, and a hidden input to transport the value.
<script>
window.onload = function(){
document.getElementsByName("mybutton").onclick = function(){
document.getElementsByName("postvar")[0].value = this.value;
document.forms.myform.submit();
}
};
</script>
<form name="myform" action="" method="POST">
<input type="hidden" name="postvar" value="" />
<input type="button" value="0" name="mybutton">
<input type="button" value="1" name="mybutton">
<input type="button" value="2" name="mybutton">
</form>
<?php
if (isset($_POST["postvar"]))
{
echo $_POST["postvar"];
}
?>
Change
<input type="button" value="0" name="zero">
To
<input type="submit" value="0" name="zero" />
Add an event handler if you want to do it via button click.
Try this
<form action="" method="POST">
<input type="submit" value="0" name="zero">
</form>
<?php
if (isset($_POST["zero"]))
{
echo $_POST["zero"];
}
?>
Use
<input type="submit" value="0" name="zero">
else if you want to use button use javascript
<form action="" method="POST">
<input type="button" value="0" name="zero">
</form>
<script type="text/javascript">
$("input[type='button']").click(function(){
alert(this.value);
});
</script>
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();
});