Validate a Radio Button - html

I want to make a simple validation form, which will show warning message, when it will be uncheck in a <div>.
This is what, i come up till now.
<form action="result.php" method="post">
<b>1st question:</b><br />
Option 1 <input type="radio" name="question1" value="Option1" /><br />
Option 2 <input type="radio" name="question1" value="Option2" /><br />
Option 3 <input type="radio" name="question1" value="Option3" /><br />
Option 4 <input type="radio" name="question1" value="Option4" /><br />
<br />
<b>2nd question:</b><br />
Option 1 <input type="radio" name="question2" value="Option1" /><br />
Option 2 <input type="radio" name="question2" value="Option2" /><br />
Option 3 <input type="radio" name="question2" value="Option3" /><br />
Option 4 <input type="radio" name="question2" value="Option4" /><br />
<br />
<input type="submit" value="submit" />
</form>`

you can do this by jQuery. The length attribute it calculate The number of elements in the jQuery object
$("#forms").submit(function(){ //or you can use click event
if ($("input[name='question1']:checked").length > 0){
$('.show_message').html(' ');
$('.show_message').html('selected ');
}
else{
$('.show_message').html(' ');
$('.show_message').html(' no one selected ');
return false;
}
});
and
<div class="show_message"></div>
<form id="form" action="result.php" method="post">
. . . .
</form>

Related

How to check all radio buttons based on database values?

I'm busy making a small comment system. I want users to be able to give ratings, besides giving comments, and right now i'm storing these rating values (that come from radio buttons) in the database. However, when I try to populate radio buttons with rating values for each comment from the database, the following script only checks the radio button that corresponds to the last value in the database.
<?php
$sql = mysql_query("SELECT * FROM comments WHERE id_post = '$id_post'") or die(mysql_error());;
while($affcom = mysql_fetch_assoc($sql)){
$name = $affcom['name'];
$email = $affcom['email'];
$comment = $affcom['comment'];
$rating = $affcom['rating'];
$date = $affcom['date'];
// Get gravatar Image
// https://fr.gravatar.com/site/implement/images/php/
$default = "mm";
$size = 35;
$grav_url = "http://www.gravatar.com/avatar/".md5(strtolower(trim($email)))."?d=".$default."&s=".$size;
?>
<div class="cmt-cnt">
<img src="<?php echo $grav_url; ?>" />
<div class="thecom">
<h5><?php echo $name; ?></h5><span data-utime="1371248446" class="com-dt"><?php echo $date; ?></span>
<br/>
<p>
<?php echo $comment; ?>
</p>
<p>
<input type="radio" name="hoi" value="1" <?php echo ($rating=='1')?'checked':'' ?> />
<input type="radio" name="hoi" value="2" <?php echo ($rating=='2')?'checked':'' ?> />
<input type="radio" name="hoi" value="3" <?php echo ($rating=='3')?'checked':'' ?> />
<input type="radio" name="hoi" value="4" <?php echo ($rating=='4')?'checked':'' ?> />
<input type="radio" name="hoi" value="5" <?php echo ($rating=='5')?'checked':'' ?> />
</p>
</div>
</div><!-- end "cmt-cnt" -->
<?php } ?>
This is an image of what it looks like right now:
Can someone tell me how to check all of the boxes (based on database values)?
I don't understand your question properly???
If you want to check the radio buttons according to ratting you can use in this way:
<form>
<p>
<input type="radio" name="hoi1" value="1" checked />
<input type="radio" name="hoi2" value="2" />
<input type="radio" name="hoi3" value="3" />
<input type="radio" name="hoi4" value="4" />
<input type="radio" name="hoi5" value="5" />
<input type="radio" name="hoi6" value="5" />
</p>
</form>
<form>
<p>
<input type="radio" name="hoi1" value="1" checked />
<input type="radio" name="hoi2" value="2" checked />
<input type="radio" name="hoi3" value="3" />
<input type="radio" name="hoi4" value="4" />
<input type="radio" name="hoi5" value="5" />
<input type="radio" name="hoi6" value="5" />
</p>
</form>
<form>
<p>
<input type="radio" name="hoi1" value="1" checked />
<input type="radio" name="hoi2" value="2" checked />
<input type="radio" name="hoi3" value="3" checked />
<input type="radio" name="hoi4" value="4" />
<input type="radio" name="hoi5" value="5" />
<input type="radio" name="hoi6" value="5" />
</p>
</form>
<form>
<p>
<input type="radio" name="hoi1" value="1" checked />
<input type="radio" name="hoi2" value="2" checked />
<input type="radio" name="hoi3" value="3" checked />
<input type="radio" name="hoi4" value="4" checked />
<input type="radio" name="hoi5" value="5" />
<input type="radio" name="hoi6" value="5" />
</p>
</form>
<form>
<p>
<input type="radio" name="hoi1" value="1" checked />
<input type="radio" name="hoi2" value="2" checked />
<input type="radio" name="hoi3" value="3" checked />
<input type="radio" name="hoi4" value="4" checked />
<input type="radio" name="hoi5" value="5" checked />
<input type="radio" name="hoi6" value="5" />
</p>
</form>
<form>
<p>
<input type="radio" name="hoi1" value="1" checked />
<input type="radio" name="hoi2" value="2" checked />
<input type="radio" name="hoi3" value="3" checked />
<input type="radio" name="hoi4" value="4" checked />
<input type="radio" name="hoi5" value="5" checked />
<input type="radio" name="hoi6" value="5" checked />
</p>
</form>
Use different names for the tags. And you can put them inside the form tag.
Never mind, fixed it. The name was the problem. It should be unique for every set of radio buttons ;). Tnx for your help Dineth

Multiples input type="radio" that can be selected and and deselected

I have the following code of inputs
<div id="especiality">
<input type="radio" class="rad" name="Item1" value="Item1" />Publicidad
<br />
<input type="radio" class="rad" name="Item2" value="Item2" />Editorial
<br />
<input type="radio" class="rad" name="Item3" value="Item3" />Identidad Corporativa
<br />
<input type="radio" class="rad" name="Item4" value="Item4" />Web
<br />
<input type="radio" class="rad" name="Item5" value="Item5" />Empaques
<br />
<input type="radio" class="rad" name="Item6" value="Item6" />Tipografía
<br />
<input type="radio" class="rad" name="Item7" value="Item7" />Fotografía
<br />
<input type="radio" class="rad" name="Item8" value="Item8" />Señalética
<br />
<input type="radio" class="rad" name="Item9" value="Item9" />Animación
<br />
<input type="radio" class="rad" name="Item10" value="Item10" />Ilustración
<br />
</div>
That works with this script
<script>
$(document).ready(function () {
$("#button").click(function () {
// Radios
$(".rad:checked").each(function() {
console.log("Radio: " + $(this).val());
});
});
})
</script>
It works for select multiples options and thats ok but it doesn't when it comes to deselect the option. Any solutions?
Thanks
Selector for unchecked items would be:
$(".rad:not(:checked)").each(function() {
Radio buttons are designed to let you select exactly one out of a group. You can start a group with zero selected (by omitting the checked attribute from all of them) but there isn't a clean way to go back to that state.
To group radio buttons, give them all the same name.
If you want to select zero or more from a group, you should be using checkboxes, not radio buttons.

Why am i able to check multiple radio buttons at once?

This is the code i use for my form and I'm using radio button as i know only one can be ticked but for some reason I can click on multiple. How do I fix this?
<form name="Question1" method="post" onsubmit="return CheckAnswer1()">
<input type="radio"
name="Q1opt1"
value="1" >Having loads of pictures on the website<br /><br />
<input type="radio"
name="Q1opt2"
value="2" >Making the website nice and pretty.<br /><br />
<input type="radio"
name="Q1opt3"
value="3" >Making the website most user friendly.<br /><br />
<input type="submit" value="Select Your Answer and Click Here" />
</form>
They should have the same name but different values, that's how the browser distinguishes between sets of radio button groups:
<form name="Question1" method="post" onsubmit="return CheckAnswer1()">
<input type="radio"
name="Q1opt"
value="1" >Having loads of pictures on the website<br /><br />
<input type="radio"
name="Q1opt"
value="2" >Making the website nice and pretty.<br /><br />
<input type="radio"
name="Q1opt"
value="3" >Making the website most user friendly.<br /><br />
<input type="submit" value="Select Your Answer and Click Here" />
</form>
It's because their names are all the same.
Try this:
<input type='radio' name='Qstn1' Id='q1Opt1' value='1' />Opt 1<br />
<input type='radio' name='Qstn1' Id='q1Opt2' value='2' />Opt 2<br />
<input type='radio' name='Qstn1' Id='q1Opt3' value='3' />Opt 3<br />

How to validate a form using HTML5 and CSS

I coded a form that can post information to another page where it is processed. I wanted to ask users if there are options that were not selected. My form looks like this:
<form action="answers-of-brain-teaser-questions.php" method="post">
<div>
<div>Question 1</div>
<input name="q1" type="radio" value="1">A. 1
<br />
<input name="q1" type="radio" value="2">B. 4
<br />
<input name="q1" type="radio" value="3">C. 3
<br />
<input name="q1" type="radio" value="4">D. 2
</div>
<div>
<div id="question">Question 2</div>
<input name="q2" type="radio" value="5">A. 1
<br />
<input name="q2" type="radio" value="6">B. 2
<br />
<input name="q2" type="radio" value="7">C. 3
<br />
<input name="q2" type="radio" value="8">D. 4
</div>
</form>
How can I show users a message if some radio buttons are clicked. I only want to show a message if a question has no selected answer (no radio button is selected). For example, if no option is selected for question 2.
The easiest way to do this is with the built-in HTML5 attribute called required which tells the user that he has left a field (in our case the radio button).
An example how to use it:
<!DOCTYPE HTML>
<html>
<body>
<form id="exampleForm" action="#" method="get">
<input name="q1" type="radio" required="required" value="4">test<br />
<input name="q1" type="radio" required="required" value="4">test<br />
<input name="q1" type="radio" required="required" value="4">test<br />
<input name="sform" type="submit">
</form>
</body>
</html>
If you have no access to JQuery and want to support browsers not supporting required, you can use something like this:
var names = new Array("q1", "q2");
var notSelected = new Array();
var checked = "";
for(var i = 0; i < names.length; ++i) {
var current = getElementsByName(names[i]);
for(var j = 0; j < current.length; ++j) {
if(current[j].checked) {
checked = names[i];
}
}
if(names[i] !== checked)
notSelected.push(names[i]);
}
if(notSelected.length>0)
alert("You have to select the following radiogroups: "+notSelected.join(", "));
If you want to validate it via jquery it will go like-
//in script add jquery-min.js
function validate(){
if($("input[name=q2]:checked").length > 0) {
//Is Valid
}
}
<form action="answers-of-brain-teaser-questions.php" method="post" onsubmit="validate()">
<div>
<div>Question 1</div>
<input name="q1" type="radio" value="1">A. 1
<br />
<input name="q1" type="radio" value="2">B. 4
<br />
<input name="q1" type="radio" value="3">C. 3
<br />
<input name="q1" type="radio" value="4">D. 2
</div>
<div>
<div id="question">Question 2</div>
<input name="q2" type="radio" value="5">A. 1
<br />
<input name="q2" type="radio" value="6">B. 2
<br />
<input name="q2" type="radio" value="7">C. 3
<br />
<input name="q2" type="radio" value="8">D. 4
</div>
</form>
And if you want to do it in php page-
then check it via-
if(!isset($_POST['q2'})){
//your msg to user
}

Two radio buttons on at the same time

Hello Can you tell why I am allowed to select two radio buttons in this code
<html>
<head><title>Survey</title>
<body>
<h3>Please Enter the following Information: </h3>
<form method= "post" action="/~fmccown/cgi-bin/printinfo.cgi">
<input type ="hidden" name="input-source" value="survey2.html" />
<p>
Name: <input type="text" name="name" size="30" />
</p><p>
Classification:
<select name="class">
<option>Freshman</option>
<option selected="selected">Sophomore</option>
<option>Junior</option>
<option>Senior</option>
</select>
</p><p>
Gender:
<input type="radio" name="gender" value="M" checked="checked" />Male
<input type="radio" name="gender" value="F" />Female
</p><p>
Email address: <input type="text" name="email" size="30" />
</p><p>
Password: <input type="password" name="pword" />
</p><p>
What are your favorite computer classes?
<br />
<label>
<input type="checkbox" name="class-int" />Internet Development
</label>
<label>
<input type="checkbox" name="class-net" />Networking
</label>
<label>
<input type="checkbox" name="class-gui" />GUI
</label>
<label>
<input type="checkbox" name="class-oop" />OOP
</label>
</p><p>
Are you graduating this spring?
<label>
<input type="radio" name="grad-yes" value="Yes" />Yes
</label>
<label>
<input type="radio" name="grad-no" value="Yes" />No
</label>
</p><p>
<input type="submit" value="Submit Survey" />
<input type="reset" value="Clear Form" />
</p>
</form>
<p>
Thank You!
</p>
</body>
</html>
These two elements should probably have the same name:
<input type="radio" name="grad-yes" value="Yes" />
<input type="radio" name="grad-no" value="Yes" />
Radio buttons get grouped together if and only if they share a common name.
The first pair is called gender, so it works.
The second pair doesn't, since one is called grad-yes and the other grad-no.
The way to go would be:
<label>
<input type="radio" name="grad" value="Yes" />Yes
</label>
<label>
<input type="radio" name="grad" value="No" />No
</label>