I have the following block in my HTML
<div class="selection">
<p><input name="custrecord_npsdtl_decision" id="custrecord_npsdtl_decision" type="radio" value="I am solely responsible for the decision">I am solely responsible for the decision </p>
<p><input name="custrecord_npsdtl_decision" id="custrecord_npsdtl_decision" type="radio" value="I am partially responsible for or influence the decision">I am partially responsible for or influence the decision </p>
<p><input name="custrecord_npsdtl_decision" id="custrecord_npsdtl_decision" type="radio" value="I am not involved in the decision">I am not involved in the decision </p>
<p><input name="custrecord_npsdtl_decision" id="custrecord_npsdtl_decision" type="radio" value="Don't know">Don't know </p>
</div>
And a function to check form-progression, based on the option selected, with the following snippet:
var decisionmaker = $('#custrecord_npsdtl_decision:checked').val();
if (decisionmaker == elements['customlist_nps_decision'][2] || decisionmaker == elements['customlist_nps_decision'][3]) {
redirect();
}
This works as expected in Chrome, Firefox but was not working in Internet Explorer(8). Doing some inspection I found that
$('#custrecord_npsdtl_decision:checked')
returns an object, as expected, but calling val() on the object returns undefined.
I am absolutely bewildered. How do I get the selected option from the radio list in IE?
ID's must be unique. I'm very surprised that this is working at all in Chrome and Firefox.
Remove the id attributes and select by name.
$('input[name="custrecord_npsdtl_decision"]:checked').val();
you shouldnt use the same ID for each radio button and you can use the name selector to get the group selection
$('input[name=custrecord_npsdtl_decision]:checked').val();
Related
I am pulling my hair out. I have a form on my webpage and some javascript that is pulling the values from the form and I am taking various actions based on the input.
When troubleshooting, The value is being returned as undefined.
JS
var days = document.forms["meal-radio"].elements["days"].value;
HTML
<form class= "meal-table" id="meal-radio" onsubmit="return false">
<div class ="meal-plan-choice row" id="Meals4">
...................................................................
<fieldset id="days">
<div class="width40">
<input type="radio" id="radio08" name="days" value="Five"/>
<label for="radio08"><span class="radiospan"></span>5 Days</label>
</div>
<div class="width40">
<input type="radio" id="radio09" name="days" value="Seven"/>
<label for="radio09"><span class="radiospan"></span>7 Days</label>
</div>
</fieldset> <!-- end style fieldset-->
..............................................................
</div></form>
This is not working only in IE, works fine in Chrome and Firefox
Being that you tagged jquery in your question, I'm going to assume you're willing to accept jQuery answers.
You could use this, which works in all browsers:
var days = $("#days input[type='radio']:checked").val()
With pure javascript:
// Get the form
var form = document.getElementById('meal-radio');
// Which is selected?
var currentSelected = form.querySelector('input[name="days"]:checked').value;
// Alert the value
alert( currentSelected ); // temp-alert
jsfiddle:
https://jsfiddle.net/atr46c9r/1/
Do note that in order to get the current selected radio it needs to actually have it's property set to :checked else there will/could be some issues in certain browsers.
I have a form where I set the value of an input type="radio" pair using Javascript. However, I've noticed that Chrome handles it differently from Firefox and IE, and, although I can work around it, I would like to know -- why is this happening?
Here's example code (or see this jsfiddle: http://jsfiddle.net/ps46opy3/1/)
<form name="form1" method="post">
<input type="radio" name="xyzzy" value="yes"/> Yes
<input type="radio" name="xyzzy" value="no"/> No
</form>
<script type="text/javascript">
document.form1.xyzzy.value='yes';
</script>
In Chrome this will set the value AND check the radio for "yes", which is what I want. However in Firefox/IE it sets the value, but does not "check" the radio. In that case, when the form is submitted, the value is not actually POSTed.
I can fix this problem by adding document.form1.xyzzy[0].checked=true, but it seems a bit redundant to me that you'd have to set BOTH the value AND checked properties, which should go hand-in-hand.
Is this a bug in Firefox/IE, or a feature in Chrome, or...?
I'm an embedded programmer.
I'm developing a web GUI, and having a problem - web browser compatibility.
The code is executing normally in Chrome, but not in Internet Explore.
After Internet Explorer 8, must to execute to code.
I think it is a Web Standard problem. Perhaps my HTML knowledge is very poor.
function validateForm() {
var x = document.forms["form_dl_rf_set"]["DL_RF_2000_id"].value;
if (x == 1) {
var y = document.forms["form_dl_rf_set"]["DL_RF_2000_num"].value;
if (!y) {
alert("error ");
return false;
}
}
}
<form name="form_dl_rf_set" action="dl_rf_set.cgi" method=post onsubmit="return validateForm()">
<input type="radio" id="DL_RF_2000" name="DL_RF_2000_id" value="0"checked="checked">
<label for="DL_RF_2000">変更しない<label>
<td>
<input type="radio" id="DL_RF_2000" name="DL_RF_2000_id" value="1">
<label for="DL_RF_2000"> <input type="number" id="DL_RF_2000" name="DL_RF_2000_num" min="-10.0" max="2.0" step="0.5" size="4" value=-1.0> dB</label>
Function description - check for blank.
This is a comment, not an answer, since it's impossible to determine the issue from the OP. Hopefully it will help toward finding the issue so that an answer can be provided.
The posted code is incomplete, there is no submit button or way to submit the form. Adding a submit button fixes that, but perhaps not in a way that is consistent with the actual code.
In the validateForm function, there is:
var x = document.forms["form_dl_rf_set"]["DL_RF_2000_id"].value;
There are multiple controls in the form with a name of 'DL_RF_2000_id', therefore the expression:
document.forms["form_dl_rf_set"]["DL_RF_2000_id"]
will return a NodeList of those elements. NodeLists don't have a value property, so x will be undefined. Then there is:
if (x == 1)
which will always be false, so the function returns undefined and the form is submitted. This will happen in all browsers, not just IE.
There are several issues I see, the first of which is IDs need to be unique ...
Try ...
<form name="form_dl_rf_set" action="dl_rf_set.cgi" method=post onsubmit="return validateForm()">
<input type="radio" id="DL_RF_2000_id" name="DL_RF_2000_id1" value="0" checked="checked" />
<label for="DL_RF_2000">変更しない</label>
<input type="radio" id="DL_RF_2000_id2" name="DL_RF_2000_id2" value="1" />
<label for="DL_RF_2000"> </label>
<input type="number" id="DL_RF_2000_num" name="DL_RF_2000_num" min="-10.0" max="2.0" step="0.5" size="4" value="-1.0"> dB
I also cleaned up some close tag issues (and dropped the <td> tag since it didn't seem to need to be there.
Note that ALL the tags now have unique IDs which can now be referenced cleanly.
UPDATE:
One other issue I see is the repeated use of the names. This has also been adjusted in the code above.
Also, there was a value with no quotes.
I've worked on this for quite some time now, and am stumped. I'm hoping someone has some direction for me. First the code:
The jQuery:
$("#paperwork").bind("onFail", function(e, errors) {
if (e.originalEvent.type == 'submit') {
$.each(errors, function() {
var input = this.input;
input.parent().css({color: 'red'}).change(function() {
input.parent().css({color: '#444'});
});
});
}
});
And a sampling of the HTML:
<input id="group_1" required="required" type="radio" name="attending" value="Yes" />Yes
<input id="group_1" type="radio" name="attending" value="No" />No
<input id="group_1" type="radio" name="attending" value="Not Provided" />Not Provided
<input id="group_1" class="single_text_input" type="text" name="primary_referral" />
<input id="group_1" class="single_text_input" type="text" name="secondary_referral" />
<span class="group_1">Referrals</span>
There are several sections that look much like the above. Each with a corresponding <span> (e.g. "2", "3", etc...) What I'm trying to accomplish is this:
When the validator runs, the .parent() element of each input turns red. That is working. When the user makes a change to the input, the .parent() element returns to its original color. That is also working.
In addition to this, I would like to turn each input section's corresponding <span> red (text or background). Then, when all the inputs within that section are changed, the corresponding <span> is returned to its original appearance. One issue (at least for me) is that the div containing the inputs and the corresponding <span> do not seem to be related to each other, whether by .parent(), .child(), or .closest.
One issue (at least for me) is that the div containing the inputs and
the corresponding do not seem to be related to each other,
whether by .parent(), .child(), or .closest.
Check if that is true by trying to reach the span in a live console like the Google Chrome Inspector's one.
Just set a class common to those divs, so you can select them later by that class.
Wondering how to approach this... Best to look at the picture to visualize the, hopeful, UI for a form for choosing options in a list. Users need to be able to make a first choice and a second choice for each option. One and only one can be selected in each column, and for that matter, each row.
At first I thought, naturally, 2 radio button groups might work...but not sure how? Perhaps hidden radio_buttons whose values are manipulated via Javascript/JQuery in a click event on each div? Event should also check/handle "collisions" when user tries to select same option for both choices.
Or, would this perhaps be better with two hidden collection_selects...or even simpler, just two hidden text_fields...which javascript can populate with the ID of the selected option?
Or maybe I'm overlooking something more obvious.
I'm new(ish) to javascripting with Rails so looking for advice/validation.
Thanks.
I think something like this is what your looking for:
HTML:
<form>
<p class="exclusiveSelection">
Selection One
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<p class="exclusiveSelection">
Selection Two
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<p class="exclusiveSelection">
Selection Three
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<input type="button" id="submitForm" value="Submit">
</form>
JavaScript:
$(function() {
$(".exclusiveSelection input[type='radio']").click(function() {
$exclusiveSelection = $(this).parent();
$('input[type='radio']', $exclusiveSelection).attr('checked', false);
$(this).attr('checked', true);
});
});
It ensures that the values are unique across column and row and works with jQuery 1.2.6 - 1.7.1. There is also a JSFiddle example.
If you need help adapting this for Rails let me know, however it should be straight forward.