CODEWITHSUNDEEP
javascripthtmlforms
4thSpace
4thSpace

Reputation: 44310

How to display page title in form field?

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.

Upvotes: 0

Views: 2067

Answers (3)

Leo
Leo

Reputation: 13838

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.

Upvotes: 2

Amadan
Amadan

Reputation: 198324

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'));

Upvotes: 6

baao
baao

Reputation: 73231

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>

Upvotes: 1

Related Questions