Need to set default value of radio group when not checked - javascript
In my html form, I have a group of radio buttons
<form action="receive.php" method="post">
<input type="radio" name="rad" value="one" /> One <br />
<input type="radio" name="rad" value="two" /> Two <br />
<input type="radio" name="rad" value="three" /> Three <br />
<input type="submit" value="submit" />
</form>
I have a scenario where no radio button is checked. In such case, my server-side php receives input value as false. What I want to do is change false to null or undefined. Is that possible? Any help is greatly appreciated.
You can do something like this:
<form action="receive.php" method="post">
<input type="radio" name="rad" value="one" /> One <br />
<input type="radio" name="rad" value="two" /> Two <br />
<input type="radio" name="rad" value="three" /> Three <br />
<input type="hidden" name="rad" value="null" />
<input type="submit" value="submit" />
</form>
Now if you haven't checked any radio button, you will get "null" input value, but remember "null" is not same as NULL in PHP.
Radio buttons, by definition, do not have a null value.
You could however add a radio button such as this:
<form action="receive.php" method="post">
<input type="radio" name="rad" value="one" /> One <br />
<input type="radio" name="rad" value="two" /> Two <br />
<input type="radio" name="rad" value="three" /> Three <br />
<input type="radio" name="rad" value="null" /> null <br />
<input type="submit" value="submit" />
</form>
And use it as the null that you need.
That might be done with an if/else statement within the .php:
$radioInput = false;
if (!isset($_POST['rad'])){
$radioInput = NULL;
}
else {
$radioInput = $_POST['rad'];
}
http://php.net/manual/en/function.isset.php
Use javascript to return null in case if no radio button is selected ,on "submit" click :
var radioChecked=0;
var radios=document.getElementsByName("rad");
for(var i=0;i<radios.length;i++)
{ if(radios[i].checked){
radioChecked=radioChecked+1;
} }
if(radioChecked==0)
return null;
Hope it solves your problem.
Related
PHP pass total value of radio button
How to count the total value of radio button within the same page and pass to another php file? The total will be count at this page and i can get the total from answer.php file. <form action="answer.php" method="POST"> <input type="radio" name="q1" value="1" />Yes <br /> <input type="radio" name="q1" value="0" />No <br /> <input type="radio" name="q2" value="2" />Yes <br /> <input type="radio" name="q2" value="0" />No <br /> <input type="radio" name="q3" value="3" />Yes <br /> <input type="radio" name="q3" value="0" />No <br /> <input type="submit" value="submit" name="submit"/> </form>
I suggest using an array to count your values. <input type="radio" name="q[]" value="2" /> <input type="radio" name="q[]" value="3" /> <input type="radio" name="q[]" value="4" /> <input type="radio" name="q[]" value="5" /> This will result in $_POST['q'] being an array. You can now do: echo "The total amount is ".array_sum($_POST['q']);
Using jQuery- it is easy, just iterate through the inputs and tally up the values. Note that I gave the form an Id so it can be targetted directly if you have other form. The total can be passed to your other page - either via AJAX or using a standard HTML form as a hidden field. Alternatively - since this is a form and you are already passing it to a PHP page - you could simply submit the form and tally up the $_POST variables on the other side.
$('#testForm input').on('change', function() {
var total=0;
$('input[type=radio]:checked', '#testForm').each(function(){
total += parseInt($(this).val());
})
alert(total)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm" action="answer.php" method="POST">
<input type="radio" name="q1" value="1" />Yes <br />
<input type="radio" name="q1" value="0" />No <br />
<input type="radio" name="q2" value="2" />Yes <br />
<input type="radio" name="q2" value="0" />No <br />
<input type="radio" name="q3" value="3" />Yes <br />
<input type="radio" name="q3" value="0" />No <br />
<input type="submit" value="submit" name="submit"/>
</form>
Commented version for the OP:
$('#testForm input').on('change', function() {//triggers the function on any change in the form
var total=0;//initialises the total at 0 so that each round ottallying up resets before the tally
$('input[type=radio]:checked', '#testForm').each(function(){//selects each input in the #testForm that is checked
total += parseInt($(this).val());//adds the value of each checked radio button to the tally
})
alert(total); //alerts the final tally after all iterations
});
You don't need jquery for this. Add a class to your radio buttons so we can query them without risking getting other elements in the page, something like "my-radio"
This javascript will get you the sum:
function getRadioButtonsSum(radioClass) {
var radioBtns = document.querySelectorAll(radioClass);
var count = 0;
var i;
for (i = 0; i < radioBtns.length; i += 1) {
if (radioBtns[i].checked) {
count += +radioBtns[i].value;
}
}
return count;
}
getRadioButtonsSum('.my-radio');
Is it possible disable a single radio button in jquery?
Is it possible to disable a single radio button in a group using jquery? <div id="divAddNewPayrollItemWages" title="Add New Payroll Item"> <strong>Wages</strong><br /> Do you want to set up a payroll item to track wages, annual salary, commissions or bonuses?<br /> <input type="radio" name="rblWages" value="Hourly" />Hourly Wage<br /> <input type="radio" name="rblWages" value="Annual" />Annual Salary<br /> <input type="radio" name="rblWages" value="Commission" />Commission<br /> <input type="radio" name="rblWages" value="Bonus" />Bonus<br /><br /> <input type="button" value="Back" disabled="disabled" /> <input type="button" value="Next" onclick="AddNewPayrollItemWages_Next();" /> <input type="button" value="Finish" disabled="disabled" /> <input type="button" value="Cancel" onclick="AddNewPayrollItemWages_Cancel();" /> </div> <div id="divAddNewPayrollItemHourlyWages" title="Add New Payroll Item"> <strong>Wages</strong><br /> Is this item for regular, overtime, sick or vacation pay?<br /> <input type="radio" name="rblHourlyWages" value="Regular" />Regular Pay<br /> <input type="radio" name="rblHourlyWages" value="Overtime" />Overtime Pay<br /> <input type="radio" name="rblHourlyWages" value="Sick" />Sick Pay<br /> <input type="radio" name="rblHourlyWages" value="Vacation Pay" />Vacation Pay<br /><br /> <input type="button" value="Back" onclick="" /> <input type="button" value="Next" onclick="AddNewPayrollItemWages_Next();" /> <input type="button" value="Finish" disabled="disabled" /> <input type="button" value="Cancel" onclick="AddNewPayrollItemHourlyWages_Cancel();" /> </div> What I am trying to accomplish is that when a user selects Annual from the first dialogue, the script opens the second dialogue and disables the Overtime radio button from the list. The only problem I am having at this point is disabling the radio button, everything else is good.
This should do it. Essentially, use jQuery to find an input with name of "rblHourlyWages" and value of "Overtime" and disable it.
$('input[name=rblHourlyWages][value=Overtime]').prop('disabled', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rblHourlyWages" value="Regular" />Regular Pay<br />
<input type="radio" name="rblHourlyWages" value="Overtime" />Overtime Pay<br />
<input type="radio" name="rblHourlyWages" value="Sick" />Sick Pay<br />
<input type="radio" name="rblHourlyWages" value="Vacation Pay" />Vacation Pay<br /><br />
What you want to do is establish a relationship between what radio button disables another. I would use an array, but that's a whole other pie.
What you can do is something on the lines of checking the radio group and using an if statement.
Array.prototype.forEach.call(document.querySelectorAll("[type='radio']"), function(x) {
x.addEventListener("click", function() {
if (x.value === "Annual") { //or any other field
document.querySelector("['OTHER_RELATED_FIELD']").disabled = true;
}
});
});
jQuery way:
$("[type='radio']").on("click", function() {
if (this.value === "Annual") $("[name='rblHourlyWages'][value='Overtime']").prop("disabled", true);
});
Note that you'll have to reset all radio buttons to enabled before each click function is run so that you can change the radio button and the option will be re-enabled.
Something like this should work. It allows for user to change radio again and reenable the other one
$('[name=rblWages]').change(function(){
var isAnnual = this.value == 'Annual';
$('[name=rblHourlyWages][value=Overtime]').prop('disabled', isAnnual);
});
DEMO
how do I select a parameter a Javascript selector?
Hi there (I'm a complete JS newbie so please no bullying)
I'm trying to pass formID inside my score variable but I don't think I'm getting my selector right, can anyone tell me what I'm doing wrong ?
Edit: Sorry everyone, I'm getting tired. My issue: I cannot properly select the value of my score var.
JS
function addScore(formId) {
var show_id = $('#show_id-'+formId).val();
var user_id = $('#user_id-'+formId).val();
var score = $('input[value="tvshowrating' + formID +'"]').val();
HTML
<form id="40">
<div class="your-score">
<div class="">Your Score</div> <div id="flash"></div>
<input class="hover-star" type="radio" name="tvshowrating40" value="1" title="1" />
<input class="hover-star" type="radio" name="tvshowrating40" value="2" title="2" />
<input class="hover-star" type="radio" name="tvshowrating40" value="3" title="3" />
<input class="hover-star" type="radio" name="tvshowrating40" value="4" title="4" />
<input class="hover-star" type="radio" name="tvshowrating40" value="5" title="5" />
<input class="hover-star" type="radio" name="tvshowrating40" value="6" title="6" />
<input class="hover-star" type="radio" name="tvshowrating40" value="7" title="7" />
<input class="hover-star" type="radio" name="tvshowrating40" value="8" title="8" />
<input class="hover-star" type="radio" name="tvshowrating40" value="9" title="9" />
<input class="hover-star" type="radio" name="tvshowrating40" value="10" title="10" />
<input type="hidden" id="show_id-40" value="40" />
<input type="hidden" id="user_id-40" value="2" />
<span id="hover-test" style="margin:0 0 0 20px;"></span>
<input id="submitscore" type="submit" value="Submit scores!" onclick="addScore(40);" />
</div>
</form>
</div>
You probably want the checked value:
$('input[name="tvshowrating' + formID +'"]:checked').val()
Here is another question that answers your problem:
Get Value of Radio button group
or
How can I know which radio button is selected via jQuery?
You're selecting <input>s by value. You probably want input[name=....
serializing radio buttons
I have a group of radio buttons like this
<input type="radio" name="test" value="h" />
<input type="radio" name="test" value="g" />
<input type="radio" name="test" value="s" />
Now I am serialzing the form to save their values, next time from the saved serialized form values I want load these radio buttons correctly, but its not showing the selected radio button correctly.
I am showing the form's serialized values into the page like this
var obj = $('form').serializeObject();
for(var r in obj){
if(obj.hasOwnProperty(r)){
var nr = obj[r];
$('[name='+r+']').val(nr);
}
}
HTML:
<form id="foo">
<input type="radio" name="test" value="h" />
<input type="radio" name="test" value="g" />
<input type="radio" name="test" value="s" />
<button id="button">foo</button>
</form>
<form id="bar">
<input type="radio" name="test" value="h" />
<input type="radio" name="test" value="g" />
<input type="radio" name="test" value="s" />
</form>
Javascript:
(function() {
$('#button').click(function(e) {
e.preventDefault();
var foo = $('#foo').serializeArray();
for(var i in foo) {
if(foo.hasOwnProperty(i)) {
$('[name="'+foo[i]['name']+'"][value="'+foo[i]['value']+'"]').each(function() {
$(this).attr('checked', true);
})
}
}
})
})();
Traverse object and return matching key / values
I have a series of objects containing product information that I need to use to filter the available product options. (i.e. Customer selects radio button with value option id 25, I need to filter the other two options based on what's available for id 25 and then get the value for that three part combination from configurations (25 / 1 / 13) and find that combination in siblings to return the sku value (25 / 1/ 13 = 1761).
I've been successful at getting the keys and values but not matching. I'm a total n00b with javascript (most of my experience is just animating things with jQuery) so I'm not sure that I have written anything worthwhile so far.
Here's what I get from the encoded JSON (trimmed b/c data is massive so formatting might not be exact). I don't have any control over formatting and structure of the JSON.
var configurations = {
"lens_types":{
"25":{
"1":1,
"2":2,
"4":4,
"3":3}},
"lenses":{
"25":{
"1":{
"2":2,
"4":4,
"5":5,
"6":6,
"9":9,
"13":13},
"2":{
"4":4,
"5":5,
"6":6,
"13":13}}}
var siblings = {
"25":{
"1":{
"2":1744,
"4":1745,
"5":1747},
"6":1749,
"9":1752,
"13":1761},
"2":{
"4":1746,
"5":1748,
"6":1750,
"13":1762},
"4":{
"1":1753,
"3":1756,
"8":1759},
"3":{
"2":1754,
"3":1755,
"8":1757,
"9":1758,
"12":1760}}}
This is the generic structure of the product form:
<form method="post" action="" name="product_details">
<div id="frame_style">
<input type="radio" name="frame_style" value="1" />
<input type="radio" name="frame_style" value="3" />
<input type="radio" name="frame_style" value="11" />
<input type="radio" name="frame_style" value="24" />
<input type="radio" name="frame_style" value="25" />
<input type="radio" name="frame_style" value="27" />
<input type="radio" name="frame_style" value="2" />
<input type="radio" name="frame_style" value="8" />
<input type="radio" name="frame_style" value="45" />
<input type="radio" name="frame_style" value="77" />
<input type="radio" name="frame_style" value="89" />
<input type="radio" name="frame_style" value="13" />
</div>
<div id="lens_type">
<input type="radio" name="lens_type" value="1" />
<input type="radio" name="lens_type" value="2" />
<input type="radio" name="lens_type" value="3" />
<input type="radio" name="lens_type" value="4" />
</div>
<div id="lens_style">
<input type="radio" name="lens_style" value="1" />
<input type="radio" name="lens_style" value="2" />
<input type="radio" name="lens_style" value="3" />
<input type="radio" name="lens_style" value="4" />
<input type="radio" name="lens_style" value="5" />
<input type="radio" name="lens_style" value="8" />
<input type="radio" name="lens_style" value="9" />
<input type="radio" name="lens_style" value="12" />
</div>
</form>
Any ideas? Thanks!!
Edit
Here's the full object for both:
var configurations = {"lens_types":{"25":{"1":1,"2":2,"4":4,"3":3},"1":{"1":1,"2":2,"4":4,"3":3},"15":{"1":1,"2":2,"3":3},"26":{"1":1,"2":2,"3":3},"24":{"1":1,"2":2,"4":4,"3":3},"27":{"1":1,"2":2,"4":4,"3":3},"11":{"1":1,"2":2,"4":4,"3":3},"3":{"1":1,"2":2,"4":4,"3":3}}, "lenses":{"25":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"1":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"15":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"3":{"2":2,"3":3,"8":8,"9":9}},"26":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"3":{"2":2,"3":3,"8":8,"9":9}},"24":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"27":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"11":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"3":{"1":{"2":2,"4":4,"5":5,"9":9},"2":{"4":4,"5":5,"6":6},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}}}}
var siblings = {"25":{"1":{"2":1744,"4":1745,"5":1747,"6":1749,"9":1752,"13":1761},"2":{"4":1746,"5":1748,"6":1750,"13":1762},"4":{"1":1753,"3":1756,"8":1759},"3":{"2":1754,"3":1755,"8":1757,"9":1758,"12":1760}},"1":{"1":{"2":1769,"4":1770,"5":1772,"6":1774,"9":1777,"13":1786},"2":{"4":1771,"5":1773,"6":1775,"13":1787},"4":{"1":1778,"3":1781,"8":1784},"3":{"2":1779,"3":1780,"8":1782,"9":1783,"12":1785}},"15":{"1":{"2":1794,"4":1795,"5":1797,"6":1799,"9":1802,"13":1807},"2":{"4":1796,"5":1798,"6":1800,"13":1808},"3":{"2":1803,"3":1804,"8":1805,"9":1806}},"26":{"1":{"2":1809,"4":1810,"5":1812,"6":1814,"9":1817,"13":1822},"2":{"4":1811,"5":1813,"6":1815,"13":1823},"3":{"2":1818,"3":1819,"8":1820,"9":1821}},"24":{"1":{"2":1824,"4":1825,"5":1827,"6":1829,"9":1832,"13":1841},"2":{"4":1826,"5":1828,"6":1830,"13":1842},"4":{"1":1833,"3":1836,"8":1839},"3":{"2":1834,"3":1835,"8":1837,"9":1838,"12":1840}},"27":{"1":{"2":1843,"4":1844,"5":1846,"6":1848,"9":1851,"13":1860},"2":{"4":1845,"5":1847,"6":1849,"13":1861},"4":{"1":1852,"3":1855,"8":1858},"3":{"2":1853,"3":1854,"8":1856,"9":1857,"12":1859}},"11":{"1":{"2":1862,"4":1863,"5":1865,"6":1867,"9":1870,"13":1879},"2":{"4":1864,"5":1866,"6":1868,"13":1880},"4":{"1":1871,"3":1874,"8":1877},"3":{"2":1872,"3":1873,"8":1875,"9":1876,"12":1878}},"3":{"1":{"2":1881,"4":1882,"5":1884,"9":1888},"2":{"4":1883,"5":1885,"6":1886},"4":{"1":1889,"3":1892,"8":1895},"3":{"2":1890,"3":1891,"8":1893,"9":1894,"12":1896}}}
You could do something like:
$('#frame_style input:radio').click(function(){
var val = $(this).val();
for ( var ind in configurations['lenses'][val]){
var input = '<input type="radio" name="lens_type" value="'+ind+'" >'+ind;
$('#lens_type').append(input);
}
});
$('#lens_type input:radio').live('click', function(){
var frame = $('#frame_style input:radio:checked').val();
var val = $(this).val();
for ( var ind in configurations['lenses'][frame][val]){
var input = '<input type="radio" name="lens_style" value="'+ind+'" >'+ind;
$('#lens_style').append(input);
}
});
$('#lens_style input:radio').live('click', function(){
var frame = $('#frame_style input:radio:checked').val();
var type = $('#lens_type input:radio:checked').val();
var style = $(this).val()
alert('Sku is:'+siblings[frame][type][style]);
});
the idea is to create the radios after the user select the first level. Of course this is very basic, you can try this fiddle: http://jsfiddle.net/LL3SM/ and choos 25, 1, 2 you will get an alert with the sku