I have read through lots of postings here and around the net, and I even have books covering this subjective, but I just can't get it to work. I just can't get the Function to pick up the value of the "RadioDrink" variable. I have tried all sorts of combinations Using DOM methods like below and here using a collection (this) and (form) with no luck.
Any help would be appreciated.
function ValDrink(form){
if (form.RadioDrink.value == "soup")
{
alert("Its soup OK!");
return true; // OK
}
======================here is my code.======================
<html>
<head>
<title>Test</title>
<script type="text/JavaScript">
<!--
function ValDrink()
{
if (document.forms.Drinks.RadioDrink.value == "soup")
{
alert("Its soup OK!");
return true; // soup
}
else
{
alert("OK");
return false; // not soup
}
}
//-->
</script>
</head>
<body>
<form method="post" id="Drinks" name="Drinks" onsubmit="return ValDrink()">
<input type="radio" checked name="RadioDrink" value="Tea">Tea<br>
<input type="radio" name="RadioDrink" value="Coffee">Coffee<br>
<input type="radio" name="RadioDrink" value="Soup">Soup<br>
<input type="checkbox" name="CheckMilk" value="Yes">Milk
<input type="checkbox" name="CheckSugar" value="Yes">Sugar
<br>
<input type="submit" name="OKButton" value="Vend">
</form>
</body>
</html>
This will give the value of "Soup" checkbox:
document.forms["Drinks"]["RadioDrink"][0].checked
you need to do this in a different way. first of all your DOM is showing undefined value. you can add different ids to the radio buttons. you can do it like below
<html>
<head>
<title>Test</title>
<script type="text/JavaScript">
<!--
function ValDrink()
{
if (document.getElementById("Rsoup").checked == true)
{
alert("its soup");
return true; // soup
}
else
{
alert("its not soup");
return false; // not soup
}
}
//-->
</script>
</head>
<body>
<form method="post" id="Drinks" name="Drinks" onsubmit="return ValDrink()">
<input type="radio" checked name="RadioDrink" value="Tea">Tea<br>
<input type="radio" name="RadioDrink" value="Coffee">Coffee<br>
<input type="radio" name="RadioDrink" id="Rsoup" value="Soup">Soup<br>
<input type="checkbox" name="CheckMilk" value="Yes">Milk
<input type="checkbox" name="CheckSugar" value="Yes">Sugar
<br>
<input type="submit" name="OKButton" value="Vend">
</form>
</body>
</html>
The problem is that this:
document.forms.Drinks.RadioDrink
returns an array-like reference to all three inputs with that name, it doesn't return a reference to the currently selected one. So you can't just test the value property.
The easiest to explain way to achieve what you want to do is to give the radio buttons unique ids:
<input type="radio" checked name="RadioDrink" id="RadioDrinkTea" value="Tea">Tea<br>
<input type="radio" name="RadioDrink" id="RadioDrinkCoffee" value="Coffee">Coffee<br>
<input type="radio" name="RadioDrink" id="RadioDrinkSoup" value="Soup">Soup<br>
And then directly select the one you want to test:
if (document.getElementById("RadioDrinkSoup").checked) {
alert("It's soup OK!");
return true; // soup
} else {
alert("OK");
return false; // not soup
}
Try your coding like below... it will help you.....
<html>
<head>
<title>Test</title>
<script type="text/JavaScript">
<!--
function ValDrink() {
var radios = document.getElementsByName('RadioDrink');
var radioName;
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
radioName = radios[i].value;
}
}
if (radioName.toUpperCase() == "soup".toUpperCase())
{
alert("Its soup OK!");
return true; // soup
}
else
{
alert("OK");
return false; // not soup
}
}
//-->
</script>
</head>
<body>
<form method="post" id="Drinks" name="Drinks" onsubmit="return ValDrink()">
<input type="radio" checked name="RadioDrink" value="Tea">Tea<br>
<input type="radio" name="RadioDrink" value="Coffee">Coffee<br>
<input type="radio" name="RadioDrink" value="Soup">Soup<br>
<input type="checkbox" name="CheckMilk" value="Yes">Milk
<input type="checkbox" name="CheckSugar" value="Yes">Sugar
<br>
<input type="submit" name="OKButton" value="Vend">
</form>
You should check for each value in the radio group & use it instead. Something like :
function getCheckedRadio(radio_group) {
for (var i = 0; i < radio_group.length; i++) {
var button = radio_group[i];
if (button.checked) {
return button;
}
}
return undefined;
}
Call it to get selected value. So In your case :
getCheckedRadio(document.forms.Drinks.RadioDrink);
Not a right way to get radios value. Use the following function, also can check this question
function ValDrink()
{
var radios =document.forms.Drinks.RadioDrink;
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked && radios[i].value==="Soup") {
alert("Its soup OK!"); // soup
return true;
}
}
alert("OK");
return false; // not soup
}
Related
On button press the following code will display a message with values collected from all checkboxes. But I want to pass these values (returned by function) as hidden input on submit.
<form action="script.php" method="post">
<input type="checkbox" name="chb1" value="html" />HTML<br/>
<input type="checkbox" name="chb2" value="css" />CSS<br/>
<input type="checkbox" name="chb3" value="javascript" />JavaScript<br/>
<input type="checkbox" name="chb4" value="php" />php<br/>
<input type="checkbox" name="chb5" value="python" />Python<br/>
<input type="checkbox" name="chb6" value="net" />Net<br/>
<input type="button" value="Click" id="btntest" />
</form>
<script type="text/javascript"><!--
function getSelectedChbox(frm) {
var selchbox = [];
var inpfields = frm.getElementsByTagName('input');
var nr_inpfields = inpfields.length;
for(var i=0; i<nr_inpfields; i++) {
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
}
return selchbox;
}
document.getElementById('btntest').onclick = function(){
var selchb = getSelectedChbox(this.form);
alert(selchb);
}
//-->
</script>
I've seen guys like you trying to code my router interface, so I'll help out.
give your form an id cause you'll need it later
<form action="script.php" method="post" id="the_form">
add the hidden input in the form
<input type="hidden" name="values" id="values" value="" />
the button in the form matures to a real submit (amazing)
<input type="submit" ...
your "getSelectedChbox()" function is amazing; don't change anything there, just wanted to give you congratulations for it, it's a great function
now, where it says document.getElementById('btntest').onclick - get rid of all that and add this code instead; this code will do the rest.
document.getElementById('the_form').onsubmit = function(){
var selchb = getSelectedChbox(this);
var values = selchb.join(', ');
if(!values.length){
alert('There was an error. You have to select some checkboxes. ');
return false;
}
document.getElementById('values').value = values;
if(!confirm(" Are you interested in submitting this form now? If not, click accordingly. "))
return false;
}
Or simply copy-paste this whole thing in a file called script.php:
<?php echo var_dump(isset($_POST['values']) ? $_POST['values'] : 'Submit first.'); ?>
<form action="script.php" method="post" id="the_form">
<input type="checkbox" name="chb1" value="html" />HTML<br/>
<input type="checkbox" name="chb2" value="css" />CSS<br/>
<input type="checkbox" name="chb3" value="javascript" />JavaScript<br/>
<input type="checkbox" name="chb4" value="php" />php<br/>
<input type="checkbox" name="chb5" value="python" />Python<br/>
<input type="checkbox" name="chb6" value="net" />Net<br/>
<input type="hidden" name="values" id="values" value="" />
<input type="submit" value="Click" id="btntest" />
</form>
<script type="text/javascript"><!--
function getSelectedChbox(frm) {
var selchbox = [];
var inpfields = frm.getElementsByTagName('input');
var nr_inpfields = inpfields.length;
for(var i=0; i<nr_inpfields; i++) {
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true)
selchbox.push(inpfields[i].value);
}
return selchbox;
}
document.getElementById('the_form').onsubmit = function(){
var selchb = getSelectedChbox(this);
var values = selchb.join(', ');
if(!values.length){
alert('There was an error. You have to select some checkboxes. ');
return false;
}
document.getElementById('values').value = values;
if(!confirm(" Are you interested in submitting this form now? If not, click accordingly. "))
return false;
}
//-->
</script>
Have fun.
I am working on a plugin for MyBB, and there I have to collect values of all checked "checkboxes" every checkbox has diffrent name/ID & unfortunatly these checkboxes are not placed under any form tag so how can I do this ???
Look at code below this code works fine if I place form tag at first row but it doesn't return anything if I place form tag below all checkbox (actually this is exactly how I have to handle checkboxes in MyBB)
Thanks,
<input type="checkbox" name="chb1" value="html" />HTML<br/>
<input type="checkbox" name="chb2" value="css" />CSS<br/>
<input type="checkbox" name="chb3" value="javascript" />JavaScript<br/>
<input type="checkbox" name="chb4" value="php" />php<br/>
<input type="checkbox" name="chb5" value="python" />Python<br/>
<input type="checkbox" name="chb6" value="net" />Net<br/>
<form action="script.php" method="post">
<input type="button" value="Click" id="btntest" />
</form>
<script type="text/javascript"><!--
function getSelectedChbox(frm) {
var selchbox = [];
var inpfields = frm.getElementsByTagName('input');
var nr_inpfields = inpfields.length;
for(var i=0; i<nr_inpfields; i++) {
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
}
return selchbox;
}
document.getElementById('btntest').onclick = function(){
var selchb = getSelectedChbox(this.form);
alert(selchb);
}
//-->
</script>
>>>Test the Fiddle<<<
Well... with pure JavaScript:
function getCheckboxesValues(){
return [].slice.apply(document.querySelectorAll("input[type=checkbox]"))
.filter(function(c){ return c.checked; })
.map(function(c){ return c.value; });
}
document.getElementById("btntest").addEventListener("click", function(){
console.log(getCheckboxesValues());
});
my validation is work on only one radio button and all left radio button its not working here is my code
<script>
function xyz()
{
var x = document.getElementsByName("red");
//alert(x.length);
for (var i=0; i<x.length; i++)
{
if (x[i].checked) {
return true;
}else{
alert("fe");
return false;
}
}
}
</script>
<form name="as" method="post" action="n.php">
<input type="radio" id="x1" name="red">
<input type="radio" id="x2" name="red">
<input type="radio" id="x3" name="red">
<input type="radio" id="x4" name="red">
<input type="submit" value="button" onclick="return xyz()">
</form>
You should try this.
function xyz()
{
var x = document.getElementsByName("red");
for (var i=0; i<x.length; i++)
{
if (x[i].checked) {
return true;
}
}
// No radio button checked, return false.
return false;
}
Your function will return in either states after first run. To skip to next element of iteration you should use continue instead of return. See: http://www.w3schools.com/js/js_break.asp. To iterate threw all elements you shoul do:
for (var i=0; i<x.length; i++) {
if (x[i].checked) {
// Do something if checked
} else {
// Do something if not checked
alert("fe");
}
// Continue to next element
}
Try the following code:
<script type="text/javascript">
function validate()
{
var checked = null;
var inputs = document.getElementsByName('correct');
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].checked) {
checked = inputs[i];
}
}
if(checked==null)
{
alert('Please choose an option');
return false;
}
else
{
return confirm('Save As Correct Answer '+checked.value+'');
}
}
</script>
<form method="post" name="Form" onsubmit="return validate()" action="">
<input type="radio" name="correct" id="correct" value="A">
<input type="radio" name="correct" id="correct" value="B">
</form>
my html code-
<form method="post" name="editorform" id="editorform" onsubmit="return validate_editorform(this)" action="#">
<ol><li>
<label for="qtitle"><b>Title</b></label>
<input id="qtitle" name="qtitle" class="text"></textarea>
</li><li>
<label for="tag"><b>Tag</b></label>
<table border="0">
<tr>
<td><input type="radio" name="tag" value="art"/>Art & Living</td>
<td><input type="radio" name="tag" value="travel" class="rdbtn"/>Travel</td>
<td><input type="radio" name="tag" value="religion" class="rdbtn"/>religion</td>
</tr>
.....
my javascript-
function validate_editorform(editorform)
{
var qtitle = editorform.qtitle.value;
var tag = editorform.tag.value;
var question = editorform.question.value;
var nameRegex = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
if(qtitle == "") {
inlineMsg('qtitle','You must enter a Question title.',5);
return false;
}
if(editorform.tag.checked == "") {
inlineMsg('tag','You must Tag your question.',5);
return false;
}
if(question == "") {
inlineMsg('question','You must enter a your Question.',5);
return false;
}
}
For qtitle and question JavaScript is working fine but for radio button (tag) it isn't. Can anyone identify the problem?
Change
if(editorform.tag.checked == "") {
to
if(tag == "") {
if(editorform.tag[0].checked == False... and so on for tag[1]...)
<html>
<head>
<title>Validating Radio Button</title>
<script>
select = ""
len = document.myform.radioname.length
for (i = 0; i <len; i++) {
if (document.myform.radioname[i].checked) {
select = document.myform.radioname[i].value
}
}
if (select == "") {
alert("No Option selected");
return false;
}
else {
alert("option selected");
return true;
}
</script>
</head>
<body>
<form name="myform" action="thankyou.html" onsubmit="return validateForm()" method="post">
Choose your favourite Car Brand
<input type="radio" name="radioname" value="maruti">Maruti<br>
<input type="radio" name="radioname" value="fiat">Fiat<br>
<input type="radio" name="radioname" value="BMW">BMW<br>
<input type="radio" name="radioname" value="jaguar">Jaguar<br>
</form>
</body>
</html>
How to get the checked option in a group of radio inputs with JavaScript?
<html>
<head>
<script type="text/javascript">
function testR(){
var x = document.getElementsByName('r')
for(var k=0;k<x.length;k++)
if(x[k].checked){
alert('Option selected: ' + x[k].value)
}
}
</script>
</head>
<body>
<form>
<input type="radio" id="r1" name="r" value="1">Yes</input>
<input type="radio" id="r2" name="r" value="2">No</input>
<input type="radio" id="r3" name="r" value="3">Don't Know</input>
<br/>
<input type="button" name="check" value="Test" onclick="testR()"/>
</form>
</body>
</html>
http://www.somacon.com/p143.php
If you need the actual element and not just the selected value, try this:
function findSelected(){
for (i=0;i<document.formname.radioname.length;i++){
if (document.formname.radioname[i].checked){
return document.formname.radioname[i];
}
}
}
generic functions (loosely based on yours )
function getRadioGroupSelectedElement(radioGroupName) {
var radioGroup = document.getElementsByName(radioGroupName);
var radioElement = radioGroup.length - 1;
for(radioElement; radioElement >= 0; radioElement--) {
if(radioGroup[radioElement].checked){
return radioGroup[radioElement];
}
}
return false;
}
function getRadioGroupSelectedValue(radioGroupName) {
var selectedRadio = getRadioGroupSelectedElement(radioGroupName);
if (selectedRadio !== false) {
return selectedRadio.value;
}
return false;
}