CODEWITHSUNDEEP
javascripthtmlforms
PhilD
PhilD

Reputation: 277

replacing text in two different forms, how to reach text in a nested label through its div

I have a setup, where input values get sent to replace the option text in a select list. that's working fine. thing is, i want that same text to also replace the text in a different place in the doc as well- the additional text i want to change is inside a label in a form plugin and i cant put an i.d in the label tag. so my questions is what vanilla javascript do i need to reach the text and replace it with the text from the first input?

the markup thats working ok:

<input class="charInput" id="name1" type="text" onKeyUp="change1(this)" >

...many of these. targeting:

<select id="select1">
<option id="char_name1" value="1">1st</option> ...</select>

(equivalent number of options...) with

 <script>function change1(eet){
 document.getElementById("char_" + eet.id).text = 
 document.getElementById(eet.id).value;}</script>

i would like to replace what in the follow markup:

<div id="frm_field_53_container" class="frm_form_field form-field frm_top_container">
<label class="frm_primary_label" for="field_inputactor1">
TEXT TO REPLACE
<span class="frm_required"></span>
</label></div>

cant add an id to the lable, and the frm_primary_label class is used many times so i cant target the specific text through it (need to go through the div id). any help on the proper markup would be appreciated.

Upvotes: 0

Views: 69

Answers (2)

Mike Shi
Mike Shi

Reputation: 474

If there is only 1 element under the div, you can just use getElementsByTagName so you could possibly have a code snippet something like this:

var fieldContainer = document.getElementById("frm_field_53_container");
var label = fieldContainer.getElementsByTagName("label");
label[0].innerHTML = document.getElementById(eet.id).value;

Upvotes: 1

Mike Robinet
Mike Robinet

Reputation: 843

I'm not entirely clear on what you want, but I think document.querySelector is what you're looking for:

document.querySelector("#frm_field_53_container label").text = 'new text';

Browser support: http://caniuse.com/queryselector

Upvotes: 1

Related Questions