5

I am trying to use the innerHTML method on an input tag and all i get back is a blank string. Here is the code i am useing.

javascript

function setName(ID){
    document.getElementById('searchtitle').innerHTML = "Enter " + ID.innerHTML;
}

HTML

<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)">Last Name</input><br/>
<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)">Phone Number</input><br/>

<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>

What is supposed to happen is depending on which radio button I pick the label for the input box should change. I can make the label.innerHTML=radio.value but the values are named for my php code and not formated nicely(ie. phonenumber vs. Phone Number) this is why I am trying to use the innerHTML of the radio button.

Any help I could get would be greatly appriciated.

Improve this question
0

5 Answers 5

Reset to default
5

you should embed input inside of label tag. input tag should closed by />. It's semantic HTML. When you do this clicking on label activate the input. InnerHTML only works for label then. It will return you label value.

<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name
    <input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />
</label>

JavaScript:

console.log(document.getElementById('searchtitle').innerHTML); // returns 'Enter Last Name'
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

If you want the value of an input tag, you want to use .value.

Improve this answer

2 Comments

I don't think he is trying to get the value of the tag, but rather the label of the input. That is, clicking the radio buttons should change his search title to "Enter Last Name" or "Enter Phone Number". Using the value would give you "Enter lastname" and "Enter phonenumber".
If I use .value I get phonenumber or name which are the values I set. I am trying to get access to text between <input> and </input>
1

First, add labels around your inputs. Second, use getName(this.parentNode). Finally, call innerText instead of innerHtml.

<html>
<head>
<script>
function setName(el){
    document.getElementById('searchtitle').innerHTML = "Enter " + el.innerText;
}
</script>
</head>
<body>
<label><input type="radio" name="searchtype" value="name" onclick="setName(this.parentNode)"/>Last 

Name</label><br/>
<label><input type="radio" name="searchtype" value="phonenumber" onclick="setName(this.parentNode)"/>Phone 

Number</label><br/>

<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>
</body>
</html>
Improve this answer

7 Comments

the issue is that he's trying to get the innerHTML of an INPUT, when he really wants the value.
No, I think he really wants the innerHTML of the INPUT, because he wants the text in his searchtitle to match the labels of his radio buttons.
nice that works. I still wish I knew why the innerHTML does not work but oh well I can do it by setting the id.
Actually, this still doesn't solve the issue, because the goal is to get the this. You would want to get this's parent.
Ok, label + this.parentNode + innerText. I think theoretically Input does not have innerHtml or innerText and that the browser makes it into <label><input/>Label</label> internally.
|
1

Complete edit.

Ok, I figured out what you were looking for. First off, you've got to fix your HTML (don't put text inside of an input... and don't next an input inside of a label). 

<label for="test">Last Name</label>
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)" />
<br/>
<label for="test2">Phone Number</label>
<input type="radio" id="test2" name="searchtype" value="phonenumber" onclick="setName(this)" />
<br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label>
<br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />

JavaScript (in Jquery, for brevity):

function setName(elem)
{
    $('#searchtitle').html('Enter ' + $('label[for="'+elem.id+'"]').html());
}
Improve this answer

5 Comments

ID is a variable equal to the radio button object, It is passed throught the use of the word "this". I could have use setName('Last Name') and then getElementById(ID).
Yes, sorry. I noticed this already and edited the code itself, but forgot to edit the annotation.
Ok, I now know what you're looking for (I think), and have updated my answer accordingly.
I see I put text into <input> instead of <label>. I wonder if I could call setName(this.previousSibling) and get the innerHTML of the <label>? (or something like that I think theres a method for previous sibling)
No... What this code does is fetch the HTML of the label whos FOR attribute is equal to the input's ID (this is how labels work). Since the FOR attribute is generally unique to the control it is linked to, this makes a nice solution for an attribute selector. From there, it concatenates it with a string and drops it into the HTML of your named label (searchtitle).
0

You have closed the Input tag improperly with </input> this should be

<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)"/>Last Name<br/>

<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)"/>Phone Number<br/>
Improve this answer

3 Comments

This is XHTML format-- no longer standard in HTML5, I believe?
I did not know that. maybe that is my problem. Maybe <input> does not have an innerHTML. I will have to look into that.
No, it shouldn't matter, your browser should parse it either way (backwards compatible), but it won't solve your problem. I think you are correct, that input does not have innerHTML. Which also means you can remove those </input> tags in your code.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.