javascript, HTML Form: Click button to insert NULL
Question
Here is code I am using, which can run in the textarea field, but cannot run in the input field. How can I modify the code in order can run in the input field??
<head> <script type="text/javascript"> function insertText(elemID, text) { var elem = document.getElementById(elemID); elem.innerHTML = text; } </script> </head> <form> <textarea id="txt1" name="passport_no" rows="1" style="width: 100px" required="required"></textarea> <input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt1', 'NULL');"> <br><br> <textarea id="txt2" name="hkid_no" rows="1" style="width: 100px" required="required"></textarea> <input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt2', 'NULL');"> </form>
I tried to modify into input field as below, but it cannot run.
<form> <input id="txt1" name="passport_no" style="width: 100px" required="required"> <input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt1', 'NULL');"> <br><br> <input id="txt2" name="hkid_no" style="width: 100px" required="required"> <input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt2', 'NULL');"> </form>
3 answers
solution1
0 ACCPTED 2016-05-08 07:07:13
Substitute .value for .innerHTML to set value property of <input> element
value
The initial value of the control.
<script type="text/javascript"> function insertText(elemID, text) { var elem = document.getElementById(elemID); elem.value = text; } </script> <form> <input id="txt1" name="passport_no" style="width: 100px" required="required"> <input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt1', 'NULL');"> <br> <br> <input id="txt2" name="hkid_no" style="width: 100px" required="required"> <input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt2', 'NULL');"> </form>
solution2
0 2016-05-08 07:17:30
try by also setting the value for the elem :
<html>
<head>
<script type="text/javascript">
function insertText(elemID, text)
{
var elem = document.getElementById(elemID);
elem.innerHTML = text;
elem.value = text;
}
</script>
</head>
<form>
<textarea id="txt1" name="passport_no" rows="1" style="width: 100px" required="required"></textarea>
<input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt1', 'NULL');">
<br><br>
<textarea id="txt2" name="hkid_no" rows="1" style="width: 100px" required="required"></textarea>
<input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt2', 'NULL');">
</form>
</html>
solution3
0 2016-05-08 07:20:06
First you need to check, is it a Input Tag or Textarea. If it is a textarea, you can use innerHTML function but if it is a Input tag then you need to use .value function.
Happy Coding!
Rz
function insertText(elemID, text) { var elem = document.getElementById(elemID); console.log(elem.getAttribute("type")); // check elem is input or Text area if (elem.tagName == "INPUT" && elem.getAttribute("type") == "text") { elem.value = text; } if (elem.tagName == "TEXTAREA") { elem.innerHTML = text; } }
<form> <input type="text" id="txt1" /> <input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt1', 'NULL');"> <br><br> <textarea id="txt2" name="hkid_no" rows="2" col="3" style="width: 100px" required="required"></textarea> <input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt2', 'NULL');"> </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.