Geek Answers Handbook

Using innerHTML with <input>

I am trying to use the innerHTML method in an input tag, and all I will return is an empty string. Here is the code I'm using.

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 should happen depends on which switch I select for the label for the input field needs to change. I can do label.innerHTML = radio.value, but the values ​​are named for my php code and are not beautifully formed (e.g. phonenumber vs. Phone Number), so I am trying to use innerHTML of this switch.

Any help I could get would be greatly appreciated.

+5
source share
5 answers

input label. />. HTML. , . InnerHTML . .

<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'
+5

, .value.

+1

.

, , . -, HTML ( ... ).

<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 ( JQuery ):

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

. -, getName (this.parentNode). , innerText 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>
+1

Input tag </input>

<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/>
0
source

More articles:


All Articles