This is the code for playing an audio when a radio button is clicked and evaluated by a Submit button.
There are two sound files separately for two radio buttons respectively. These files are not playing when they are evaluated by a Submit button. Please check out that whether the code works properly or not.
<html>
<head>
<script LANGUAGE="JavaScript">
var snd = new Audio('\Users\raja\Desktop\abs.mp3');
var x = new Audio('\Users\raja\Desktop\new.mp3');
function ValidateForm(form){
ErrorText= "";
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
if ( ( form.gender[0].checked == true ) && ( form.gender[1].checked == false ) )
{
snd.play();
alert ( "Your Gender:Male");
return false;
}
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == true ) )
{
x.play();
alert ( "Your Gender:Female");
return false;
}
if (ErrorText= "") { form.submit() }
}
</script>
</head>
<body>
<form name="feedback" action="#" method=post>
Your Gender:
<p><input type="radio" name="gender" value="Male"> Male </p>
<p><input type="radio" name="gender" value="Female" > Female</p>
<input type="button" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)">
<input type="reset" value="Reset">
</form>
</body>
</html>
Related
I created a little register form in HTML.
And I created a JS that pops up an alert for each of them if any of them are left blank
Now I want to combine all the alerts into a single one for example at the start a box will appear with all alerts and if you complete one if you push submit the next box will appear without the alert of the box you already completed
This is my JS Code:
function validate()
{
if( document.inrValid.Nume.value == "" )
{
alert( "Introduceti va rog numele!" );
document.inrValid.Nume.focus() ;
return false;
}
if( document.inrValid.Prenume.value == "" )
{
alert( "Introduceti va rog Prenumele!" );
document.inrValid.Prenume.focus() ;
return false;
}
if( document.inrValid.EMail.value == "" )
{
alert( "Introduceti va rog Emailul!" );
document.inrValid.EMail.focus() ;
return false;
}
if( document.inrValid.Telefon.value == "" )
{
alert( "Introduceti va rog Numarul de Telefon!" );
document.inrValid.Telefon.focus() ;
return false;
}
if( document.inrValid.parola.value == "" )
{
alert( "Introduceti va rog Parola!" );
document.inrValid.parola.focus() ;
return false;
}
return( true );
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="/cgi-bin/test.cgi" name="inrValid" onsubmit="return(validate());">
<p>Nume <input type="text" name="Nume" /></p>
<p>Prenume <input type="text" name="Prenume" /></p>
<p>EMail <input type="text" name="EMail" /></p>
<p>Telefon <input type="number" name="Telefon" /></p>
<p>Parola <input type="password" name="parola" /></p>
<p><input type="submit" onclick="clickAlert()" value="Submit" name="clickAlert" /></p>
</form>
<script src="script.js"> </script>
</body>
</html
As stated in the comment, you could use the required attribute as a small form of validation.
You could also add all of your error messages to an array, for example:
var checkForm = function () {
var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
var errors = [];
if (foo.value.length === 0) {
errors.push('Foo is blank');
}
if (bar.value.length === 0) {
errors.push('Bar is blank');
}
alert(errors.join(','));
};
<form onsubmit="checkForm()">
<input id="foo" type="text" />
<input id="bar" type="text" />
<input type="submit" />
</form>
The following javacript is used for validation checking. However the alert
statements do not appear when there is missing input.
I tried to delete the if statement and use only the alert statement and the
script works fine.
Is there anything wrong with the if statements?
Below is my HTML code:
<html>
<head>
<title>A More Complex Form with JavaScript Validation</title>
<script type="text/javascript">
// Validation form
function validate_form()
{
valid = true;
// check for missing name
if ( document.contact_form.contact_name.value == "" )
{
alert("Please fill in the 'Your Name' box,");
valid = false;
}
// check for missing gender
if ( document.contact_form.gender[0].checked == false ) && (
document.contact_form.gender[1].checked == false )
{
alert("Please choose your Gender: Male or Female");
valid = false;
}
// check for missing age
if ( document.contact_form.age.selectedIndex == 0 )
{
alert("Please select your Age.");
valid = false;
}
// check for missing terms
if ( document.contact_form.terms == false )
{
alert("Please check the Terms & Conditions box.");
valid = false;
}
return valid;
}
//-->
</script>
</head>
<body>
<h1>Please Enter Your Details Below</h1>
<form name="contact_form" onsubmit="validate_form()">
<p>Your Name:
<input type="text" name="contact_name" size="20">
</p>
<p>
Your Gender:
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</p>
<p>
Your Age:
<select name="age">
<option value="1">0-14 years</option>
<option value="2">15-30 years</option>
<option value="3">31-44 years</option>
<option value="4">45-60 years</option>
<option value="5">61-74 years</option>
<option value="6">75-90 years</option>
</select>
</p>
<p>
Do you agree to the Terms and Conditions?
<input type="checkbox" name="terms" value="yes">Yes
</p>
<input type="submit" name="submit" value="Send Details">
</form>
</body>
</html>
if ( document.contact_form.gender[0].checked == false ) && (
document.contact_form.gender[1].checked == false )
{
alert("Please choose your Gender: Male or Female");
valid = false;
}
you have to change if condition like that
if ( document.contact_form.gender[0].checked == false &&
document.contact_form.gender[1].checked == false )
{
alert("Please choose your Gender: Male or Female");
valid = false;
}
Your script can't fire up because of this mistake.
Tip: You can check script errors from dev-console of browsers like Chrome Console.
as "trincot" said by comment, you can also use ! operator to check boolean values like that.
if ( !document.contact_form.gender[0].checked && !document.contact_form.gender[1].checked )
{
alert("Please choose your Gender: Male or Female");
valid = false;
}
This is my form
Select Staff : <select name="Staff" id="Staff"><br />
<option value="Staff">Select Staff</option>
The validation for the form is as simple this
<script type="text/javascript" language="javascript">
function validateMyForm ( ) {
var isValid = true;
if ( document.form1.Name.value == "" ) {
alert ( "Please type your Name" );
isValid = false;
} else if ( document.form1.Staff.value == "Staff" ) {
alert ( "Please choose Staff" );
isValid = false;
}
return isValid;
}
</script>
How do I validate radio buttons using JS ?
<input type="radio" name="question" id="question_yes" value="Yes" />Yes<br>
<input type="radio" name="question" id="question_no" value="No" />No
<script>
if(document.getElementById('question_yes').checked) {
// yes is checked
}else if(document.getElementById('question_no').checked) {
// no is checked
}
</script>
Here's a jsFiddle to show you how it works: http://jsfiddle.net/A3fg8/
I have 2 radio buttons. I need to give validations for radio button using javascript. Please tel me whats wrong with my code. Here is the code.
$(function() {
$("#XISubmit").click(function(){
var XIGender= document.forms["XIForm"]["XIGender"].value;
if (XIGender==null || XIGender=="") {
alert("Please select the gender");
return false;
}
document.getElementById("XIForm").submit();
});
Here is my HTML code:
<label>Gender </label>   
<input type='radio' name='XIGender' value='Male' id="XImale"/>Male
<input type='radio' name='XIGender' value='Female' id="XIfemale"/>Female</td>
One more here,
$(document).ready(function() {
$("#XISubmit").click(function () {
if($('input[name=XIGender]:checked').length<=0){
alert("Please select the gender");
return false;
}
$( "#XIForm" ).submit();
});
});
JSFiddle
Here is the code. You will have to create a form and validate it on submit.
HTML:-
<form name="myForm" action="targetpage.asp" onsubmit="return validateForm();" method="post">
<label>Gender</label>  
<input type='radio' name='XIGender' value='Male' id="XImale" />Male
<input type='radio' name='XIGender' value='Female' id="XIfemale" />Female</td>
<input type="submit" value="submit" id="XISubmit" />
</form>
JS:-
function validateForm() {
if (validateRadio(document.forms["myForm"]["XIGender"])) {
alert('All good!');
return false;
}
else {
alert('Please select a value.');
return false;
}
}
function validateRadio(radios) {
for (i = 0; i < radios.length; ++i) {
if (radios[i].checked) return true;
}
return false;
}
Hope this will help you. :)
Enjoy coding.
<form name="formreg" enctype="multipart/form-data" method="post">
<input type="radio" value="male" name="gender" /> Male<br />
<input type="radio" value="female" name="gender" /> Female<br />
<input value="Submit" onclick="return inputval()" type="submit" />
</form>
JS:
<script type="text/javascript">
function inputval() {
var $XIForm = $('form[name=XIForm]');
if ($("form[name='formreg'] input[type='radio']:checked").length != 1) {
alert("Select at least male or female.");
return false;
}
else {
var gender = $("input").val();
//alert(gender);
$XIForm.submit();
alert(gender);
}
}
</script>
You can't get the value of the radio button like that. document.forms["XIForm"]["XIGender"] will return more than one node and you can't get the value property of a list of nodes. Since your using jQuery, this can be made much easier:
$("#XISubmit").click(function () {
var $XIForm = $('form[name=XIForm]');
var XIGender = $XIForm.find('input[name=XIGender]:checked').val();
if (XIGender == null || XIGender == "") {
alert("Please select the gender");
return false;
}
$XIForm.submit();
});
JSFiddle
Use the :checked selector as below
function() {
var len = $("input:checked").length;
if(len == 0) {
alert("Please select a gender");
return false;
}
see fiddle
I have two radio buttons. Each one has one associated text box. If I click one radio button and then submit an alert box should be shown if the associated text box is empty. How can I achieve this?
<form action="#" name="form1" id="form1" method="post" onsubmit="return check_workorder()">
<input type="radio" name="click" id="click1" checked="checked" value="date"/>
<strong>Start Date
<input type="text" id="my_date_field" name="my_date_field" class="datepicker" style="width:80px;"/>
</strong>
<script language="JavaScript" type="text/javascript">
new Control.DatePicker('my_date_field', { icon: 'images/calendar.png' });
</script>
</br><br />
<input type="radio" name="click" id="click2" value="order" />
<strong>Work order no
<input type="text" name="workno" id="workno" style="width:100px;"/>
</strong><span class="submit">
<input type="submit" name="submit" value="submit" onclick="return check_workorder()"/>
the javascript is
function check_workorder() {
if (document.forms.form1.elements.click.value == "date") {
var dat = (form1.my_date_field.value);
if (dat == "") {
alert("please select date");
return false;
}
} else if (document.forms.form1.elements.click.value == "order") {
var wor = (form1.workno.value);
if (wor == "") {
alert("please enter work order no");
return false;
}
}
}
if (document.forms.form1.elements.click.value == "date") {
if (document.forms.form1.elements.click.checked) {
//the radio button is checked
}
}