How to validate radio button through javascript?
Male <input type="radio" name="sex" value="male" />
female <input type="radio" name="sex" value="female" />
try
document.getElementsByName('sex').value == 'male'
^
Reference
one more
Try the following, include jQuery
$(document).ready(function(){
$('#submit').click(function() {
if (!$("input[#name='sex']:checked").val()) {
alert('Nothing checked!');
return false;
}
else {
alert('A radio button is checked!');
}
});
});
Your html should look like this
<form method="post" id="form">
Male <input type="radio" name="sex" value="male" />
female <input type="radio" name="sex" value="female" />
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
Remember to include the jQuery api's
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.js" type="text/javascript"></script>
I think you are looking for required validation:
Check the following code:
<html>
<head>
<script language='javascript'>
function submit_form(){
var temp=document.getElementsByName("gender");
if(temp[0].checked == true || temp[1].checked == true )
{
document.forms["f1"].submit();
}
else
{
alert("Please Select a Gender");
}
}
</script>
<body>
<form id="f1" action="custom.html" method="post">
<input type="radio" name="gender" value="male"/>
<input type="radio" name="gender" value="female"/>
<input type="button" id="s1" onclick="submit_form()" value="Submit" />
</form>
</body>
</html>
Related
I have 4 radio buttons in my form:
<tr><td>Type</td><td>
<input type="radio" name="type" id="a" value="a" >A
<input type="radio" name="type" id="b" value="b" >B
<input type="radio" name="type" id="c" value="c" >C
<input type="radio" name="type" id="d" value="d" >D</td></tr>
On page load I set one of the radio buttons using jquery
$("#b").prop("checked", true);
Now I select the value d in my form and submit. In PHP I echo $_POST['type'] , I am always getting the value which was set during page load using jquery i.e. in this case b instead of d.
Why is the value not updating?
Thanks.
UPDATE:Thanks all, it was due to unintentional val() called on radio button. So if radio button value is set using val() it will not change later, strange behavior.
In jQuery 1.6+
$('#b').prop('checked', true);
$('#b').prop('checked', false);
jQuery 1.5 and below
$('#b').attr('checked','checked');
$('#b').removeAttr('checked');
instead of using
$("#b").prop("checked", true);
why dont you write your radio buttons as
<input type="radio" name="type" id="a" value="a" >A
<input type="radio" name="type" id="b" value="b" checked="checked" >B
<input type="radio" name="type" id="c" value="c" >C
<input type="radio" name="type" id="d" value="d" >D
Works like a charm ;-)).
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js" /></script>
<script type="text/javascript">
$(document).ready(function() {
$('#b').attr('checked', 'checked');
});
</script>
</head>
<body>
<?php
if(isset($_POST['sbmt']) && isset($_POST['type'])) {
?>
<h1>Selected type: <?php echo($_POST['type']); ?></h1>
<?php
}
?>
<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post">
<ul>
<li><input type="radio" name="type" id="a" value="a" /> A</li>
<li><input type="radio" name="type" id="b" value="b" /> B</li>
<li><input type="radio" name="type" id="c" value="c" /> C</li>
<li><input type="radio" name="type" id="d" value="d" /> D</li>
</ul>
<input name="sbmt" type="submit" value="Submit" />
</form>
</body>
</html>
Try this code
<?php
if(isset($_REQUEST['sb']))
{
echo $_REQUEST['type'];
}
?>
<html>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(e) {
$('#b').attr('checked','checked');
});
</script>
<tr><td>Type</td><td>
<form name="frm" method="post" action="">
<input type="radio" name="type" id="a" value="a" >A
<input type="radio" name="type" id="b" value="b" >B
<input type="radio" name="type" id="c" value="c" >C
<input type="radio" name="type" id="d" value="d" >D</td></tr>
<input type="submit" name="sb" value="submit" />
</form>
</body>
</html>
Try:
$("#b").attr("checked", true);
or
$("#b").attr("checked", "checked");
<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 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 new in web programming and I really need your help. I have a form with several radio buttons and I want to insert them into mysql through an ajax post. I can do it for a single button but for more than one I don't have idea how to do it.
This is a part of my html and jquery:
<html>
<script>
$(document).ready(function () {
$("#submit").click(function () {
var q1 = $('input[type="radio"]:checked').val();
if ($('input[type="radio"]:checked').length == "0") {
alert("Select any value");
} else {
$.ajax({
type: "POST",
url: "ajax-check.php",
data: "q1=" + q1,
success: function () {
$("#msg").addClass('bg');
$("#msg").html("value Entered");
}
});
}
return false;
});
});
</script>
</head>
<body>
<div id="msg"></div>
<form method="post" action="">
<div class="Clear">
question1:bla bla bla
<input class="star required" type="radio" name="q1" value="1" />
<input class="star" type="radio" name="q1" value="2" />
<input class="star" type="radio" name="q1" value="3" />
<input class="star" type="radio" name="q1" value="4" />
<input class="star" type="radio" name="q1" value="5" />
</div>
<br />
<div class="Clear">
question2:bla bla bla
<input class="star required" type="radio" name="q2" value="1" />
<input class="star" type="radio" name="q2" value="2" />
<input class="star" type="radio" name="q2" value="3" />
<input class="star" type="radio" name="q2" value="4" />
<input class="star" type="radio" name="q2" value="5" />
</div>
<input type="submit" name="submit" id="submit" />
</form>
</body>
</html>
And here is how I insert the button in mysql:
<?php
$query = mysql_connect("localhost", "root", "");
mysql_select_db('db', $query);
if (isset($_POST['q1'])) {
$choice1 = $_POST['q1'];
$choice2 = $_POST['q2'];
mysql_query("INSERT INTO tb VALUES('','$choice1')");
}
?>
I've tried to make a var for each button but dosen't worked.
How could I post all values in php and what should I change into my ajax and php?
Thanks!
This is how I did the .php
<?php
$query=mysql_connect("localhost","root","");
mysql_select_db('cosmote',$query);
$q = array();
for ($i = 1; $i <= 2; $i++) {
$q[$i] = isset($_POST['q'+$i]) ? mysql_real_escape_string($_POST['q'+$i]) : 0;
}
mysql_query("INSERT INTO tabel (q1,q2) VALUES ('$q[1]','$q[2]')");
?>
OK, here is how to do it. First, add an id to the form:
<form id="myform" method="post" action="">
This will make it easier to access via jQuery. Then, pass the serialized form as the POST data to your PHP script:
$(document).ready(function () {
$("#submit").click(function () {
if ($('input[type="radio"]:checked').length == "0") {
alert("Select any value");
} else {
$.ajax({
type: "POST",
url: "ajax-check.php",
data: $("#myform").serialize(),
success: function () {
$("#msg").addClass('bg');
$("#msg").html("value Entered");
}
});
}
return false;
});
});
After that, you can get the radio button values from the $_POST array in your PHP script:
$_POST['q1'] // value of q1, can be 1-5
$_POST['q2'] // value of q1, can be 1-5
EDIT: The problem with your PHP code is that you used + instead of . for concatenating strings. Write this instead:
$q[$i] = isset($_POST['q'.$i]) ? mysql_real_escape_string($_POST['q'.$i]) : 0;
After this, I'm pretty sure it will work.
You could use .serialize() on the form, it will give you the values of the form as if you was submitting it regularly data: $('form').serialize(),
I'm using php. I'd like to know how can I test if a radio button is selected and get the value? i can test if the radio button is selected but i cannot get the value.
I created a button to test this in my form. First I select a radio button, then i click on the button and it must display a message that says which value i selected and put this value into a variable. In order to test if a radio button is selected i did like this:
$selected_radio=$_POST['SINGLE_' . $question->id . $multi_name_adjust . ''];
if ($selected_radio = 'checked'){}
Thanks
It's pretty simple, take a look at the code below:
The form:
<form action="result.php" method="post">
Answer 1 <input type="radio" name="ans" value="ans1" /><br />
Answer 2 <input type="radio" name="ans" value="ans2" /><br />
Answer 3 <input type="radio" name="ans" value="ans3" /><br />
Answer 4 <input type="radio" name="ans" value="ans4" /><br />
<input type="submit" value="submit" />
</form>
PHP code:
<?php
$answer = $_POST['ans'];
if ($answer == "ans1") {
echo 'Correct';
}
else {
echo 'Incorrect';
}
?>
A very more efficient way to do this in php:
<form action="#" method="post">
<select name="Color">
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="Yellow">Yellow</option>
</select>
<input type="submit" name="submit" value="Get Selected Values" />
</form>
<?php
if(isset($_POST['submit'])){
$selected_val = $_POST['Color']; // Storing Selected Value In Variable
echo "You have selected :" .$selected_val; // Displaying Selected Value
}
?>
and for check boxes multiple choice:
<form action="#" method="post">
<select name="Color[]" multiple> // Initializing Name With An Array
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="Yellow">Yellow</option>
</select>
<input type="submit" name="submit" value="Get Selected Values" />
</form>
<?php
if(isset($_POST['submit'])){
// As output of $_POST['Color'] is an array we have to use foreach Loop to display individual value
foreach ($_POST['Color'] as $select)
{
echo "You have selected :" .$select; // Displaying Selected Value
}
?>
Just simply use isset($_POST['radio']) so that whenever i click any of the radio button, the one that is clicked is set to the post.
<form method="post" action="sample.php">
select sex:
<input type="radio" name="radio" value="male">
<input type="radio" name="radio" value="female">
<input type="submit" value="submit">
</form>
<?php
if (isset($_POST['radio'])){
$Sex = $_POST['radio'];
}
?>
<?php
if (isset($_POST['submit']) and ! empty($_POST['submit'])) {
if (isset($_POST['radio'])) {
$radio_input = $_POST['radio'];
echo $radio_input;
}
} else {
}
?>
<form action="radio.php" method="post">
<input type="radio" name="radio" value="v1"/>
<input type="radio" name="radio" value="v2"/>
<input type="radio" name="radio" value="v3"/>
<input type="radio" name="radio" value="v4"/>
<input type="radio" name="radio" value="v5"/>
<input type= "submit" name="submit"value="submit"/>
</form>
take a look at this code
<form action="result.php" method="post">
Answer 1 <input type="radio" name="ans" value="ans1" /><br />
Answer 2 <input type="radio" name="ans" value="ans2" /><br />
Answer 3 <input type="radio" name="ans" value="ans3" /><br />
Answer 4 <input type="radio" name="ans" value="ans4" /><br />
<input type="submit" value="submit" />
</form>
php
<?php
if(isset($_POST['submit'])){
if(isset( $_POST['ans'])){
echo "This is the value you are selected".$_POST['ans'];
}
}
?>
I suggest you do it through the GET request:
for example, index.html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form action="result.php" method="post">
Answer 1 <input type="radio" name="ans" value="ans1" /><br />
Answer 2 <input type="radio" name="ans" value="ans2" /><br />
Answer 3 <input type="radio" name="ans" value="ans3" /><br />
Answer 4 <input type="radio" name="ans" value="ans4" /><br />
<input type="button" value="submit" onclick="sendPost()" />
</form>
<script type="text/javascript">
function sendPost(){
var value = $('input[name="ans"]:checked').val();
window.location.href = "sendpost.php?ans="+value;
};
</script>
this is sendpost.php:
<?php
if(isset($_GET["ans"]) AND !empty($_GET["ans"])){
echo $_GET["ans"];
}
?>
my form:
<form method="post" action="radio.php">
select your gender:
<input type="radio" name="radioGender" value="female">
<input type="radio" name="radioGender" value="male">
<input type="submit" name="btnSubmit" value="submit">
</form>
my php:
<?php
if (isset($_POST["btnSubmit"])) {
if (isset($_POST["radioGender"])) {
$answer = $_POST['radioGender'];
if ($answer == "female") {
echo "female";
} else {
echo "male";
}
}else{
echo "please select your gender";
}
}
?>