I'd like to display the page title in a form input field using plain javascript.

I've tried this but it doesn't work. What am I doing wrong?

<input type="text" value="javascript:document.title;"/>

I'd like to display the page title in a form input field using plain javascript.

I've tried this but it doesn't work. What am I doing wrong?

<input type="text" value="javascript:document.title;"/>

Also, how can I check if the input field is actually there and do nothing if so. I'd like to do this check to avoid JS errors.

• javascript
• html
• forms

Share Improve this question Follow edited Dec 1, 2014 at 4:41 4thSpace asked Dec 1, 2014 at 4:35 4thSpace4thSpace 44.4k101101 gold badges307307 silver badges494494 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

No, it would not. value is never executed. Try this instead:

<title>title text here</title>

<!-- ... -->

<input type="text" id="titleinput">
<script>
  var theInput = document.getElementById('titleinput')
  if (theInput) {
    theInput.value = document.title;
  }
</script>

EDIT: Shown how to test for existence of the input, and removed the arcane way of finding title since there is a better way. Although, in this case, you might know that you've created the input field, and take it as granted that it is there (your program should make an error if it's not, just like it should make an error if you delete a line from the code itself. I would only have such a check on HTML that I do not control. It might be a personal choice though, I know I don't do enough defensive programming.

EDIT2: jasonscript has a point, but I thought it would confuse the OP even more. If you want a best-practices answer though, you'd do some variety of this, to avoid global variables:

(function(theInput) {
  if (theInput) {
    theInput.value = document.title;
  }
})(document.getElementById('titleinput'));

value attribute is a string, it wouldn't execute if you place some JS in it.

You would set its value with JS after the input is ready in DOM:

<input type="text" value="">
<script>
    document.querySelector('input').value = document.title;
</script>

Whereas querySelector will give you the first input element in the DOM.

Specificly, you can pass any css selectors to the method, e.g. ID selector in following code. Please note different parameter querySelector is using:

<input type="text" value="" id="titleInput">
<script>
    document.querySelector('#titleInput').value = document.title;
</script>

More on querySelector, visit selectors api spec.

This would work:

HTML:

<title>awesome site</title>



<input type="text" id="textinput" value=""/>

JAVASCRIPT:

<script>
var title = document.title;
var textinput = document.getElementById('textinput');
if (textinput) {
textinput.value = title;
}
</script>

---

or shorter:

<script>
document.getElementById('textinput').value = document.title;
</script>