Get RadioButton value with php - javascript

I can get the value of text input from a form.
Like this:
<label for="lblName">Name (*):</label>
<input type="text" name="txtBoxName" id="txtBoxName">
I submit the form with a validation check first:
<form name="contactDataForm" action="sendMail.php" onsubmit="return ValidationCheck()" method="post">
This is sendMail.php:
$Name = $_POST['txtBoxName'];
This works, but how you do it for a RadioButton value? The selected radio button value.
<input type="radio" name="test1" id="test1" value="test1" required> TEST 1<br>
<input type="radio" name="test2" id="test2" value="test2"> TEST 2<br>

A radio button is used for selecting a single value from multiple values. So, there will be only one single name for all the radio buttons and the values for each of them may vary. You can get the value using the usual $_POST['name'] in PHP.
<form action="" method="post">
<input type="radio" name="radio" value="1">Radio 1
<input type="radio" name="radio" value="2">Radio 2
<input type="radio" name="radio" value"3">Radio 3
<input type="submit" name="submit" value="Get Selected Values" />
</form>
<?php
if (isset($_POST['submit'])) {
if(isset($_POST['radio']))
{
echo "You have selected :".$_POST['radio']; // Displaying Selected Value
}
}
?>

Make the 2 radio buttons with the same name attribute test1 example
you will find the radio button value at your PHP server with
$radioValue = $_POST['test1'];

This is a standard HTML Form. A HTML form always gives the value of the selected radio button. If you have a 2 radio buttons with the same name value this will work. The selected radio button will then post your answer to the server. You can then get the value the same way.
I hope this helps.

Related

How to validate radio button and text field javascript

Below is my code
<!DOCTYPE html>
<head>
</head>
<body>
<form action="script.php" method="post" id="Form1">
<input name="radioGroup" type="radio" value="Radio1" id="Radio1id">
<input name="radioGroup" type="radio" value="Radio2" id="Radio2id">
<input name="radioGroup" type="radio" value="Radio3" id="Radio3id">
<br>
<br>
<input type="text" size="30" id="name" placeholder="Name*"><br>
<input type="text" size="30" id="email" placeholder="Email*"><br>
<input type="text" size="30" id="comments" placeholder="Comments (Optional)"><br><br>
<input type="submit">
</form>
</body>
</html>
Is there any way to validate radio button and text filed at same time. for an example if radio button is not checked or text field not used. should get a alert window.
Thanks,
Try something like that, or use JQuery because is easy to use for validation
if((document.getElementById('Radio1id').checked) && document.getElementById('name').value != "") {
//Action for checked radio button and text box without value
}else if(document.getElementById('Radio2id').checked) {
//Another Action . . .
}
if((document.getElementById('Radio1id').checked == false) && document.getElementById('name').value != "") {
//Action for NON checked radio button and text box without value
}
by using jQuery.
// valid syntax for jQuery
$("#Radio1id").is(":checked"); // for radio button
$("#email").val()===""; // for any input
use jQuery Validator , gives you more feature and choices down the road with any project. Plus, you can ask questions on GitHub.

Javascript onClick not working on Multiple Forms

I have a dynamically generated form with some radio buttons.For each radio button there will be a onClick/onChange Function.
The problem is that whenever radio button is clicked ,the onClick of the the first form radio button is called.
<form name="a" id="a">
<input type="radio" name="radioa" onclick="func(1);"/>
<input type="radio" name="radioa" onclick="func(2);"/>
</form>
.
.
<form name="f" id="f">
<input type="radio" name="radiof" onclick="func(3);"/>
<input type="radio" name="radiof" onclick="func(4);"/>
</form>
<script>
function func(val){
alert(val);
}
</script>
I tried with onchange function also its not working.
Always the first form's radio button function is called and alert(1) is shown everytime.
Any help is appreciated.
Thanks in advance.
How about like this. I assume that the value you put as parameter on func() is the value of that radio button.
If so, then you can change your HTML markup to this:
<form name="a" id="a">
<input type="radio" name="radioa" onclick="func(this);" value="1" />
<input type="radio" name="radioa" onclick="func(this);" value="2" />
</form>
.
.
<form name="f" id="f">
<input type="radio" name="radiof" onclick="func(this);" value="3" />
<input type="radio" name="radiof" onclick="func(this);" value="4" />
</form>
Instead of passing the value as parameter to the function, use the value="" attribute (which I think much better). Then pass this as your parameter which will contain the HTML dom where the onClick was triggered.
Then on your javascript:
<script>
function func(val){
alert(val.value);
}
</script>
Check this FIDDLE.

regarding input name in javascript

Using jQuery mobile and javascript I'm attempting to produce a small quiz which would be functional on a smart phone. It isn't fully finished.
I'm attempting to create a list of radio buttons which one selected the value is carried over and submitted but why is the input name "radio=choice-v-6" when this is one of the options.
<script type="text/javascript">
var answer1 = 2;
function submit()
{
if ($('input[name=radio-choice-v-6]:checked', '#myForm').val() == answer1)
{
alert("Correct");
window.location = "#question-2"
}
else
{
alert("Incorrect");
window.location = "#incorrect"
}
}
</script>
then when I use the jQuery mobile pre-set button names I use.
<form id="myForm" name="myForm">
<fieldset data-role="controlgroup" id="radiobuttons" data-mini="true">
<input name="radio-choice-v-6" id="radio-choice-v-6a" type="radio" onclick="question1()" value="1">
<label for="radio-choice-v-6a">One</label>
<input name="radio-choice-v-6" id="radio-choice-v-6b" type="radio" onclick="question1()" value="2">
<label for="radio-choice-v-6b">Two</label>
<input name="radio-choice-v-6" id="radio-choice-v-6c" type="radio" onclick="question1()" value="3">
<label for="radio-choice-v-6c">Three</label>
</fieldset>
<td><button type="submit" id="submit" name="submit" value="Submit" onclick="submit()"></td>
</form>
I assumed I would put the input name as "radiobuttons" or "myForm"
I'm new to JavaScript and would like to know why "radio-choice-v-6" works.
'input[name=radio-choice-v-6]:checked' is the selector and targets only the radio button that is checked and has the name of radio-choice-v-6. The form in general cannot be deemed as checked and neither can the fieldset. So myForm and radiobuttons will not target the currently checked radio button.

Nested Form to disable text field with selection box HTML

I have code form.html and entry.php
First I want to disable textfield with selection box using javascript, then submit it to give an output.
If i not using this code <form name="form1" method="post" action="entry.php"> form.html is success to display in web browser, but how i can submit it with one submit button?
form.html
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$('.group').hide();
$('#option1').show();
$('#chooseForm').change(function() {
$('.group').hide();
$('#'+$(this).val()).show();
})
});
</script>
</head>
<body>
<form name="form1" method="post" action="entry.php">
<select id="chooseForm" name="select">
<option value="option1">Form1</option>
<option value="option2">Form2</option>
<option value="option3">Form3</option>
</select>
<form id="option1" class="group">
<input name="a" value="form A"><br>
</form>
<form id="option2" class="group">
<input name="a" value="form A"><br>
<input name="b" value="form B"><br>
</form>
<form id="option3" class="group">
<input name="a" value="form A"><br>
<input name="b" value="form B"><br>
<input name="c" value="form C"><br>
</form>
<input value="Save" name="submit" type="submit"><br>
</form>
</body>
</html>
entry.php
<?php
$select = $_POST['select'];
$a = $_POST['a'];
$b = $_POST['b'];
$c = $_POST['c'];
echo $select;
echo "<br>";
echo $a;
echo "<br>";
echo $b;
echo "<br>";
echo $c;
?>
Can anyone solve this code without nested form? thanks :)
First of all, you can't nest forms.
As I understand the idea is to group some elements. If so, then replace the interior <form>tags with <div>s.
The other problem is that you want to use the same input elements names through different sections. Basically, if name is not unique, it will get updated with the last occurrence's value. For example:
<input type="text" name="a" value="val 1" />
<input type="text" name="a" value="val 2" />
When the above is posted, $_POST['a'] will contain val 2 value. Even, if the second text-box is hidden. So either you make text-boxes names unique or you disable the ones, which are hidden. disabled attribute will make the control disabled for user input and also not present in $_POST array. So, in this case:
<input type="text" name="a" value="val 1" />
<input type="text" name="a" value="val 2" disabled />
$_POST['a'] will contain val 1 value, because the second text-box is disabled.
In your case, every time you hide a section you should disable all controls within the group. Here's how to do it: disable all form elements inside div.

Can't get second radio button selected value

I have two pair of Radio Button. One pair for Gender and other for User type.
My problem is I cant get the selected value of second pair of Radio button that is User type.
Only get the selected value of first pair of radio button that is Gender.
Can u help me?
$('input:radio[name=user[user_type_id]]:checked').val();
$('input:radio[name=user[gender]]:checked').val();
Check jQuery(':radio') Selector
If you use val() then it will not give value of the input:checked, it will return on or off only. To get get value of the radio button use the use the attr method:
//Html
<div>
<input type="radio" name="gender" value="Male"/>
<input type="radio" name="gender" value="Female" /></div>
<div>
<input type="radio" name="user" value="admin"/>
<input type="radio" name="user" value="user" />
</div>
<input type="button" id="clickMe" value ="Click Me" />
//js
$('#clickMe').click(function(){
alert($('input[name=gender]:radio:checked').attr('value'));
alert($('input[name=user]:radio:checked').attr('value'));
});
Ref:
Get attribute name value of <input>
jquery get attribute value when property is not set
Check this jsFiddle example

Categories

Resources