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
Related
i am submitting data through FormData and i am trying to alert values of check boxes which are checked in my form, right now i am able to make it work for only one check box.
how can i alert values of all those check boxes which are checked.
var formData = new FormData(document.getElementById("update-form"));
$("#myCheckbox1").on('change',function(){
if($("#myCheckbox1").is(':checked'))
$('#hiddenInput1').val(1);
else{
$('#hiddenInput1').val(0);
}
});
alert(
$('#hiddenInput1').val()
);
Check Box 1:
<input type="hidden" value="0" name="visa" id="hiddenInput1">
<input type="checkbox" value="1" id="myCheckbox1">
Example Check Box 2:
<input type="hidden" value="0" name="visa1" id="hiddenInput2">
<input type="checkbox" value="1" id="myCheckbox2">
How to Alert Values of all check boxes which are checked in FormData without repeating code. i found similar example online but none were using FormData.
Form Name is : update-form
You can make use of start with attribute selector to select all checkboxes having id start with myCheckbox and attach it to change event handler.
Inside handler, you can read if checkbox is checked or not and change value of hidden input which is placed before checkbox.
See below code
$(function(){
$("input[type=checkbox][id^=myCheckbox]").on('change',function(){
var isChecked = $(this).is(':checked');
var $hiddenInput = $(this).prev('input[type=hidden]');
if(isChecked)
$hiddenInput.val(1);
else{
$hiddenInput.val(0);
}
alert($hiddenInput.val());
});
//iterate all hidden input on form submit
$('#update-form').submit(function(){
$('input[id^=hiddenUnput]').each(function(){
alert($(this).val());
});
$(this).submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Exammple Check Box 1:
<input type="hidden" value="0" name="visa" id="hiddenInput1">
<input type="checkbox" value="1" id="myCheckbox1">
Example Check Box 2:
<input type="hidden" value="0" name="visa" id="hiddenInput2">
<input type="checkbox" value="1" id="myCheckbox2">
I am not able to get second and third radio buttons values.
my code just gives me the first radio button value when I select this.
this is my radio buttons and the function by which I want to store the value of the radio button.
<input type="radio" id="choiced" name="Q0_choice" value="one">
<input type="radio" id="choiced" name="Q0_choice" value="2">
<input type="radio" id="choiced" name="Q0_choice" value="iii">
next.onclick = function () {
if (document.getElementById('choiced').checked) {
ans = document.getElementById('choiced').value;
}
}
This is because ID values must be unique - so it's grabbing the first element on the page it finds with the ID of choiced. You'll want to give each a unique ID, and you can use the name attribute for grouping radio button. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
Try
document.querySelector('#choiced:checked')
This query return checked radio button.
You should not have the same ID for those inputs:
<input type="radio" id="choiced" name="Q0_choice" value="one">
<input type="radio" id="choiced2" name="Q0_choice" value="2">
<input type="radio" id="choiced3" name="Q0_choice" value="iii">
Then to get the selected you have to get them by it's name property. You can loop to check which one is selected.
next.onclick = function () {
const radios = document.getElementsByName('Q0_choice');
radios.forEach((radio) => {
if (radio.checked){
console.log(radio.value);
}
})
}
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.
I'm trying to build a combined radio / text input for an "other" field in a form.
<input id="artist" type="radio" name="artist" value="Other">
<input id="other-artist" type="text" name="other_artist" placeholder="Other Artist"/>
I can't figure out how to click inside the text input and have the radio selected. I tried wrapping the text input in a label but that did not work.
you can add a onclick event to de input and check the radio like this.
<input id="artist" type="radio" name="artist" value="Other">
<input id="other-artist" type="text" name="other_artist"placeholder="Other Artist"
onClick="selectRadio()" />
and the js
selectRadio = () => {
var radio = document.getElementById("artist");
radio.checked = true;
}
example
hope this help.
I know this is probably very easy! I have two radio buttons that ng-show a div with an input field if the 'site' radio button has been selected. The text input field is set to a ng-model called 'sitePostcode'. What I am trying to achieve is that if the 'solution' radio button is selected then 'sitePostcode' model will have 'solution' in it. And if the 'site' radio button is selected, then 'sitePostcode' will contain what ever was entered into the input box.
<div>
<input type="radio" ng-model="product.group" value="Solution">Solution
<input type="radio" ng-model="product.group" value="Site">Site
</div>
<div ng-show="product.group == 'Site'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
I thought that the radio buttons should also be 'sitePostcode' model, but when I tried that and entered text into the input field the div would dissapear as the model value changes from 'site'. Cheers
You can watch changes of product.group and change sitePostcode in accordance to it.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
</head>
<body data-ng-app="app" data-ng-controller="MainController">
<div>
<input type="radio" ng-model="product.group" value="Solution">Solution
<input type="radio" ng-model="product.group" value="Site">Site
</div>
<div ng-show="product.group == 'Site'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
<script>
var app = angular.module('app', []);
app.controller("MainController", function($scope) {
var customPostcode = '';
$scope.$watch('product.group', function (newVal, oldVal) {
if (newVal === 'Solution') {
customPostcode = $scope.sitePostcode;
$scope.sitePostcode = 'Solution';
} else {
$scope.sitePostcode = customPostcode;
}
});
});
</script>
</body>
</html>
The radio buttons should belong to a group. Add 'name' attribute to the input fields and give them the same value.
<input name="group1" type="radio" ng-model="product.group" value="Solution">Solution
<input name="group1" type="radio" ng-model="product.group" value="Site">Site
Radio buttons can be tricky in Angularjs. Here is a great example of how they can work: http://jsfiddle.net/K9MLk/246/.
I think that the best way to do this is to check the product.group value in the controller and set the sitePostcode to Solution.
Another way to do this is as you suggested. You can set the ng-model of your radio buttons to sitePostcode and change your check to ng-show="product.group != 'Solution'". This is assuming that the user will not type Solution in the input field.
<div>
<input type="radio" ng-model="sitePostcode" value="Solution">Solution
<input type="radio" ng-model="sitePostcode" value="Site">Site
</div>
<div ng-show="product.group != 'Solution'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
But as I said it is best to do this in the controller.