We Keep Coding

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";

jQuery print variables in SPAN or P tags

I am trying to append a variable to an HTML SPAN tag or a P tag. I can show the variable in an INPUT tag with no problem. I am not sure why I am having an issue showing the variable in any other tags.
<script>
$(function()
{
$('.forecastedit'.click(function(e)
{
e.preventDefault();
$uid = $(this).attr('data-uid');
$service = $(this).attr('data-service');
$pol = $(this).attr('data-pol');
$('#uid').val($uid); // also tried $('.uid').val($uid);
$('#fcservice').val($service); // also tried $('#fcservice span').val($fcservice);
$('#fcpol').val($pol);
$('#forecastmodal').modal('show');
});
});
Here is the HTML that needs to be appended:
<div class="modal fade" id="forecastmodal">
<div class="modal-content">
// I have no problem getting the variables to print in the INPUT tags
<input type="text" class="form-control uid" id="uid" />
<input type="text" class="form-control fcservice" id="fcservice" />
<input type="text" class="form-control fcpol" id="fcpol" />
// These are the tags I would like to get the variable to print
<span class="uid" id="uid"></span>
<p class="service" id="service"></p> // P tag just for example
<span class="fcpol" id="fcpol"></span>
</div>
</div>
To reiterate, I want to be able to print out the JavaScript variables into SPAN tags or P tags rather than INPUT tags.

input, textarea etc. have the value attribute. Other tags like span, div etc. don't have that. You can use .text("my text") to insert the text into these elements
For more information:
jQuery add text to span within a div

There are several errors with your script
1) the click listener is wrongly applied
2) you should not use more than one #id per page
3) val() is meant to be used with form elements
Hope this fiddle helps you http://jsfiddle.net/nyum4pLa/

Modify the text of my radio input button?

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"

Select text (almost) next to an element

I need to wrap a radio button and the text next to it in a label, just to be more user-friendly.
I had a similar problem a few days ago, where I have a checkbox and immediately after I had a span element. And I could wrap both elements.
I have this HTML:
<span class="Attribute">
<input type="radio" name="vMONHRDREM" value="S">
<script type="text/javascript">gx.dom.setAttribute("vMONHRDREM","gxoch0","if(!(gx.evt.jsEvent(this))) return false;");</script>
Ativado
<input type="radio" name="vMONHRDREM" value="N">
<script type="text/javascript">gx.dom.setAttribute("vMONHRDREM","gxoch0","if(!(gx.evt.jsEvent(this))) return false;");</script>
Desativado
</span>
Unfortunately, I cannot change the HTML structure as I use a tool that generates the pages.
I'm trying to do something like this:
$("input[type=radio]").each(function(){
alert($(this).next().next().text());
});
But it's not working. It doesn't return anything. If I change to $(this).next().text() I get the script text.

$("input[type=radio]").each(function(){
var text = $(this).next().get(0).nextSibling.nodeValue;
});

Input elements don't have text content, what you have is rogue textnodes, and you'll need to target those together with the inputs, and then wrap them with label tags:
$('.Attribute input[type="radio"]').each(function() {
$(this).addBack()
.add($(this).next('script')[0].nextSibling)
.wrapAll('<label></label>');
});
FIDDLE

Retrieve textarea value within a div element in JQUERY

I have a few div elements where within each div tag, I have other form elements. For eg:
<div id="div1"><input type="text" name="answer" id="answer"></div>
<div id="div2"><textarea name="answer" id="answer">Some Value</textarea></div>
<div id="div3"><textarea name="answer" id="answer">Some Value</textarea></div>
How can I retrieve the textarea for div3 only. Here is what I have, but I am always only getting back the text area of div2
var divElement = dojo.byId('div3');
if ($('textarea', divElement).length > 0){
var text = $('textarea#answer').val();
}
Help!

var firstTextarea = $('#div3').find('textarea :first').val();

Try the following selector
var value = $('#div3 textarea').val();
alert(value);
Note: Your solution is using duplicate id values for the textarea and input tags. It's not legal to have multiple id`s and will lead you to pain down the road. It would be best to change your tags to have unique id's and then query that directly. For example
HTML:
<div id="div1"><input type="text" name="answer" id="answer1"></div>
<div id="div2"><textarea name="answer" id="answer2">Some Value</textarea></div>
<div id="div3"><textarea name="answer" id="answer3">Some Value</textarea></div>
Javascript
var value = $('#answer3').val();
alert(value);

well, you have assigned same ids to 3 elements, that is not a good practice. Every element should have unique id. In case you have assigned same id, you will always retrieve first element from your code.
If you want to retrieve div 3 textarea, use following selector :
$('#div3 textarea).val()