Radio Button Getting Value - javascript

I have some html like this
<form id="reportform" method='post'>
<input type='hidden' id='qid' name='qid' value="<?php echo $id ?>" />
<span><input type="radio" id="reporttp" name="reporttp" value="spam" /> spam</span>
<span><input type="radio" id="reporttp" name="reporttp" value="attack" /> attacking</span>
<span><input type="radio" id="reporttp" name="reporttp" value="nonsense" /> nonsense</span>
<span><input type="radio" id="reporttp" name="reporttp" value="other" /> other</span
<input type="image" name='Submit' value='Submit' src="../Images/buttons/reportButton.png"/>
</form>
when i try to read the value in $('#reportform').submit(function() {
i read it as $(reportttp).attr("value"). And then i did some posting (which works fine). The problem is I always get "spam" postedf to me even though i select the other radio boxes. If i switch the first and second radio button around, ill get "attacking".... Could you tell me what is wrong?

You cannot have multiple elements with the same id
I assume you want to read the checked radio button's value? Is so, give them all unique ids, then do:
$("input[type='radio']:checked", "#reportform").val();
This will grab all radio buttons inside of you reportform, grab the checked one, then retrieve its value.

My guess is that your names and ids for each radio button are identical, causing the browser to make weird decisions arbitrarily.

In addition to Adam's answer, this is also invalid:
$(reportttp).attr("value")
should be
$('input[name="reportttp"]').val()
and I hereby retract my statement cause Adam updated his answer to a much better one.
and get rid of the duplicate id's

You should be able to do $('#reportttp').val() to get the selected value.

Related

removeAttribute deletes "disabled" but not "checked"

There are two lines from my js code:
document.getElementsByName('group')[0].removeAttribute('disabled');
document.getElementsByName('group')[0].removeAttribute('checked');
First string works good but second one makes nothing. I want to follow html5 style so setting false value for checked isn't my choice.
And by the way I look for method to set empty attrs. Methods from other topics like .setAttribute(attr_name,""); do exactly what they are: create attr with empty string value but not just attr. What should I do?
checked is a property, you should treat it as such:
document.getElementsByName('group')[0].checked = false;
I show that your code works. here is the jsfiddle.
Show us your checkbox group.
You will see that when run, the first, aka [0] disabled is removed while the input with value='2' still is disabled.
https://jsfiddle.net/Esko/m7o0z0gc/
<input name="group" type="checkbox" checked="checked" disabled='disabled' value='1' />
<input name="group" type="checkbox" checked="checked" disabled='disabled' value='2' />
<input name="group" type="checkbox" checked="checked" value='3' />

How to select a input with name and value

I need to select a radio input with name and value in jquery
In this example how you select element with name SiblingSex and value female
<form action="">
<input type="radio" name="SiblingSex" value="male">Male<br>
<input type="radio" name="SiblingSex" value="female">Female
<input type="radio" name="ParentSex" value="male">Male<br>
<input type="radio" name="ParentSex" value="female">Female
</form>
i need some thing like
$('input[name="SiblingSex"]' /*GENDER SELECTOR */)
You can add another attribute selector with this:
$('input[name="SiblingSex"][value="female"]').val();
the above line would give you values every time whether it is checked or not.
so if you only want to have the value when it is checked too then add :checked
$('input[name="SiblingSex"][value="female"]:checked').val();
Just have a look on the Demo on my JS Fiddle Code
Shows the two scenario:
1) when you want the value without selecting radio button.
2) when you want value after selecting radio button.
or may be the thing that you want is here::
JS Fiddle Demo

onchange select radio isn't checked

<input type="radio" name="radiobutton" id="1_1 value="1. Жетоны" "/>
<select id="1_1" onchange="document.GetElementById(this.id).checked=true;">
How come when I change option of select, radio isn't checked?
Thanks for carefuly!
But there is something else wrong, because it does not work too:
<input type="radio" name="radiobutton" id="1_1" value="1. Жетоны" "/>
<select name="1_1" onchange="document.GetElementById(this.name).checked=true;">
Thanks to shashi!
There are two things wrong:
- Your input tag is invalid HTML - it's missing a closing double-quote on the id attribute's value, and you have an out-of-place double-quote at the end of the tag.
- It looks like you're trying to use the same id for both the input and select tag. You can't do that; their ids must be different.
Replace,
document.GetElementById(this.id) with document.getElementById(this.id);
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById
Element IDs must be unique in a page, however element names can be repeated. Also, form controls must have a name to be successful (i.e. be submitted to the server).
So you can fix the problem by using references to form controls (and fixing the markup):
<form>
<input type="radio" name="radiobutton" id="1_1" value="1.blah">
<select name="whatever" id="1_1" onchange="this.form.radiobutton.checked=true;">
<option>0
<option>1
</select>
<input type="reset">
</form>
Note that you need a reset button, otherwise it's impossible to uncheck the radio button without reloading the page (or the user running a script).

radio button return false onclick

I have this form here and want each radio buttons not to be able to be checked. I dont want disabled because if one happens to be selected I still want that value to be submitted to the database. This is just a basic example.
When I click on one of them it checks, then does not allow me to click the other one.
I want both buttons not to be able to be checked.
<form action="here.php" method="post">
<input onclick="return false" type="radio" name="firstone" value="Yes" /> Yes
<input onclick="return false" type="radio" name="firstone" value="No" /> No
<input type="submit" />
</form>
Does anyone know how to fix this? I dont want to use javascript.
Rather than trying to prevent clicking on radio buttons. You should use a hidden element to contain the values to send with your form.
The only reason I can imagine you want to have them disabled, but not 'disabled' is because they look ugly when they're disabled.
How about you just change the CSS on the page?
:disabled CSS selector

Jquery to Make 2 Sets of Radio Buttons Mirror Eachother

I am trying to setup two sets of radio buttons that will function simultaneously. In other words whenever Male is checked on the top, I would like Male at the bottom to be automatically checked. (and vice versa) If user scrolls down and clicks female then the one at the top should be checked. No matter which radio the user clicks both radio sets should always have the same value checked. Please advise on the most practical way to accomplish this. My main focus is Javascript or Jquery but I have spent several hours trying to come up with something to no avail. Please advise. Thanks! :)
<div class="top">
<input type="radio" name="sex" value="Male" /> Male<br />
<input type="radio" name="sex" value="Female" checked="checked" /> Female<br />
</div>
<div>Random Content</div>
<div class="bottom">
<input type="radio" name="sex2" value="Male" /> Male<br />
<input type="radio" name="sex2" value="Female" checked="checked" /> Female<br />
</div>
Attach to the change event and selecting all other radio buttons which have the same beginning of the name and are of equal value but which are not the current one.
$("input[name^='sex']").change(function(){
var $otherRadioButtons = $("input[name^='sex'][value='" + this.value + "']").not(this);
$otherRadioButtons.prop('checked', $(this).prop('checked'));
});
The above is not using any clever caching of the selectors which you can add yourself.
Basically, whenever a radio button changes it's checked value the code will select all other radio buttons with the same value (male/female) which also start with the same name (sex????) and set their checked property to the same value as the current one.
I hope this makes sense. See a working demo below.
DEMO - Changing radio buttons in a set.
Edit
I just noticed.. I am using jquery 1.3.2 and upgrading isnt an option
at the moment. You don't happen to have a 1.3.2 alternative do you?
For jQuery version 1.3.2 use the attr method instead of the prop method:
$("input[name^='sex']").change(function(){
var $otherRadioButtons = $("input[name^='sex'][value='" + this.value + "']").not(this);
$otherRadioButtons.attr('checked', $(this).attr('checked'));
});
DEMO - Changing radio buttons in a set using jQuery 1.3.2.
Just add an onclick listener to both sets. Like this:
document.getElementById("male1").onclick=clickMale;
document.getElementById("male2").onclick=clickMale;
document.getElementById("female1").onclick=clickFemale;
document.getElementById("female2").onclick=clickFemale;
function clickMale(){
document.getElementById("male1").checked=true;
document.getElementById("male2").checked=true;
}
function clickFemale(){
document.getElementById("female1").checked=true;
document.getElementById("female2").checked=true;
}
And add IDs to the radio buttons ("male1", "male2", "female1", "female2")
Since you mentioned it, Zove's answer in jQuery would be something like this, if you prefer:
$("#male1").click(clickMale);
$("#male2").click(clickMale);
$("#female1").click(clickFemale);
$("#female2").click(clickFemale);
function clickMale(){
$("#male1").attr('checked', true);
$("#male1").attr('checked', true);
}
function clickFemale(){
$("#female1").attr('checked', true);
$("#female2").attr('checked', true);
}
You don't need jQuery for something this simple, but if you're using it elsewhere, it's best to be consistent.
It might make sense, to share a class for both male / female inputs, e.g. 'js-male' or 'js-female'). This saves some code. for instance you could do:
$('.js-male').change(function() {
$('.js-male').attr('checked', $(this).attr('checked'));
});
$('.js-female').change(function() {
$('.js-female').attr('checked', $(this).attr('checked'));
});
There might be more elegant ways to deal with the whole situation so. Do you really want the inputs to have different names ('male', 'male2'), which means that your server receives two different params? If you give both radio button groups the same names, only the value of the last one will be sent to the server, anyway, if you mirror the radio buttons anyway, this doesn't really matter.
Demo
Just change the location of your jQuery source and this will work right out of the box.
<html>
<head>
<script src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#male1, #male2").live("click", function(){
$("#male1").attr("checked", $("#male2").attr("checked"));
$("#male2").attr("checked", $("#male1").attr("checked"));
});
$("#female1, #female2").live("click", function(){
$("#female1").attr("checked", $("#female2").attr("checked"));
$("#female2").attr("checked", $("#female1").attr("checked"));
});
});
</script>
</head>
<body>
<div class="top">
<input id="male1" type="radio" name="sex" value="Male" /> Male<br />
<input id="female1" type="radio" name="sex" value="Female" checked="checked" /> Female<br />
</div>
<div>Random Content</div>
<div class="bottom">
<input id="male2" type="radio" name="sex2" value="Male" /> Male<br />
<input id="female2" type="radio" name="sex2" value="Female" checked="checked" /> Female<br />
</div>
</body>
</html>

Categories