Modify the text of my radio input button? - javascript

Your average radio button has a name and value, but also some text next to it, in this case "Change this text."
How can I change this in javascript? Or even alert it? AFAIK, it is NOT the .inner html.
HTML:
<input type="radio" name="radioOption1" value="Array 1"> Change this text
Javascript
var confirmIExist = document.getElementsByName("radioOption1");
alert(confirmIExist.innerHTML);
//alerts undefined
If it's not .innerHTML, what is it? if I grab the input object with either getElementByName or getElementById, what chunk after that represents the Alert text?

You could use alert(confirmIExist[0].nextSibling.textContent), but wouldn't it be better to place the text next to the radio button in a <label> and then get the inner html of that
<input type="radio" id="radioOption1" name="radioOption1" value="Array 1"><label for="radioOption1" id="r1option">Change this text</label>
...
var label = document.getElementById("r1option");
alert(label.innerHTML);

You cannot set inner html for a input element. instead wrap your text with a and give it a ID
<input type="radio" name="radioOption1" value="Array 1"> <label id="radioText">Change this text</label>

input is a self-closing element. It cannot have innerHTML
nextSibling will return the Node that follows the radio button.
document.getElementsByName('radioOption1')[0].nextSibling.nodeValue = 'Text changed';
jsFiddle Demo

confirmIExist[0].nextSibling.textContent="abc"

Related

How to change span text of a radio button

I need to change the text in the span tag next to a list of radiobuttons using Javascript.
I cant change the code that create the the below code.
Depending on a given condition, I need to modify the text of one of the radio button text.
I can disable a button using the index.
document.getElementsByName("estimate[id]")[0].disabled = true;
I can change all the span text values
var $label = $('input[type=radio]').next();
$label.text('Options');
But I cant find out how to change the text on one of the buttons.
<form action="/cart/set_estimate" accept-charset="UTF-8"
id="estimate_shipping_results" autocomplete="off"
method="post">
<dl id="estimates">
<dt><input type="radio" name="estimate[id]" value="170361"
checked="checked"/>
<span>Entrega Jueves-Viernes</span></dt>
<dd>$2.000</dd>
<dt><input type="radio" name="estimate[id]" value="170483"/>
<span>Entrega 48h hábiles</span></dt>
<dd>$3.500</dd>
</dl>
div class="estimate_shipping_buttons">
<input id="set_shipping_button" type="submit" value="Definir Envío"/>
</div>
</form>
I dont know if I understand your issue right, but to change the text of one span, next to the radio button, you can use:
document.getElementsByName("estimate[id]")[0].parentElement.querySelector('span').innerHTML = "text";

Targeting a span that is wrapped around a radio input

My problem is fairly simple. I'm using a template to do styling. The way the template handles form inputs is it wraps them in span tags. To select the radio button, you have to change the class of the span to "checked". Using checked="checked" or checked in the input does not work.
Example:
<label class="radio">
<div class="radio" id="uniformed-undefined">
<span class="checked">
<input type="radio" name="grow" value="slash">
</span>
</div>
How can I target that <span class="checked"> based on the input name "grow" and the value "slash" ?
I've looked into .before() but I'm not sure that's the correct answer.
jQuery multiple attribute selector
and jQuery parent
$("input[name='grow'][value='slash']").parent("span");
$("span.checked:has(input[name='grow'][value='slash'])")
JS Fiddle: http://jsfiddle.net/RgN7H/1

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

How to get the value of selected radio button in javascript/jquery

Here is the html part:
<input class="demo" radio-value="yes" name="Radios" id="sample1" value="" type="radio">
<input class="demo" radio-value="yes" name="Radios" id="sample2" value="" type="radio">
<input class="demo" radio-value="yes" name="Radios" id="sample3" value="" type="radio">
<input class="demo" radio-value="yes" name="Radios" id="sample4" value="" type="radio">
How can I know which radio button the user is selected and how can I know the value of selected radio button.
I want to get the "radio-value" of the selected button. Because, I will be using value for json input..
How can I do that??
First of all, all of your radio buttons have the same id - this is illegal and can cause unexpected behavior. Provided this is fixed, you can do something like this:
var selectedValue = $("input.demo:checked").val();
and for radio-value:
var selectedRadioValue = $("input.demo:checked").attr("radio-value");
Use :selected with class selector to get the selected radio button. You should give unique ids to html elements. Also the value of all the radio button is empty string you may need to assign some values to them
$('.demo:selected').val();
$('.demo:selected').val(); // class is demo
This would do the trick!
But you need to remove the id that is similar among all the elements. You should change their value such as sample1, sample2 etc. Then you can get the value, and the id.

get the value of input field of radio type in jquery

I have an input field like below
<input class="d_o" type="radio" value="super" name="old_or_new" checked="checked"> Get this value actually</input><br/>
I have to get the value of the input field i.e., Get this value actually, so tried the below jquery code
console.log($('.d_o').text());
But i am surprised that its returning nothing, and its working when tried to get the value like $('.d_o').val()
So how to get the text value from the above input field using jquery am i missing anything ?
The entirety of your <input> element is
<input class="d_o" type="radio" value="super" name="old_or_new" checked="checked">
The text that's after it, and the invalid html </input> are completely different nodes in the DOM tree. So val returns the value "super" as expected, but there's no text for text to return.
The .text() method cannot be used on form inputs or scripts
http://api.jquery.com/text/
Although I am not sure what approach jQuery follows on this : One explanation can be the "Content Model" specification of each HTMLElement .
Content model
A normative description of what content must be included as children and descendants of the element.
For example :
For Input type : http://www.w3.org/TR/html5/forms.html#the-input-element
Content model:Empty.
However for Title Element this is defined as
Content model : Text
http://www.w3.org/TR/html5/document-metadata.html#the-title-element
Eager to see the validations on this postulate :)
<input class="d_o" type="radio" value="super" name="old_or_new" checked="checked"> Get this value actually</input><br/>
This is not the correct way to handle the <input> tag. You should use :checked and .val() instead:
$(document).ready(function(){
$('#hey').on('click', function(event){
alert($('.check:checked').val());
});
});
<h2>Select old or new</h2><br>
<b>Old</b>:<br>
<input type="radio" class="check" name="old_or_new" value="old"><br>
<br>
<b>New</b>:<br>
<input type="radio" class="check" name="old_or_new" value="new"><br>
<br>
<input type="button" id="hey">
Check the fiddle: http://jsfiddle.net/MLWCK/

Categories