How to insert text into a form with JavaScript

Question

I'm trying to create a simple extension for personal use. It's partially from laziness, and partially from an urge to learn. I've never made extensions before, but I've been looking at the documentation. Now I just need to write the code. What I'm trying to do, is when the browser loads a certain page, to insert text into a specific form. The form is as follows

<div id="set_tags" class="advanced_option"> 
   <label for="post_tags" class="inline_input_label" id="post_tags_label"
       onclick="Element.remove($(this))" 
       style="left:8px; right:auto; text-align:left">tags</label> 
   <input id="post_tags" name="post[tags]" type="text"/> 
 </div>

I haven't worked much with javascript, so is there a way to add the text "Music" to this when the page is loaded?

James Black · Accepted Answer · 2010-11-07 21:00:32Z

1

You can use the onload function to start your function. http://javascript.about.com/library/blonload.htm

Since you are new to javascript you may want to get familiar with unobtrusive javascript (http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html) which I find is a better way to write javascript, as you can then easily comment out javascript and see how it works when that is disabled. But, it would be easier to learn this in the beginning.

To get the input tag you can use document.getElementById() which would be something like:

var elem = document.getElementById('post_tags');

Then, to add text to this field there should be a value property in your input definition above, and you would just do:

elem.value = "Music";

answered Nov 7, 2010 at 21:00

James Black

41.9k10 gold badges92 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thejh · Accepted Answer · 2010-11-07 20:59:51Z

0

document.getElementById("post_tags_label").appendChild(
    document.createTextNode("Music"));

I'm assuming that you want to put it at the end of the element post_tags_label.

answered Nov 7, 2010 at 20:59

thejh

45.7k18 gold badges100 silver badges109 bronze badges

2 Comments

Tommy Over a year ago

This looks like it should work, but the problem is the onclick function that removes anything within post_tags_label. Could I put it in the input area "post_tags" instead?

thejh Over a year ago

@Tommy: Yes. But afaik it doesn't delete the content but the whole element.

Robusto · Accepted Answer · 2010-11-07 20:59:59Z

0

This is really easy to do if you use GreaseMonkey. It's perfect for personal changes you want to make to web pages, etc.

answered Nov 7, 2010 at 20:59

Robusto

32k8 gold badges59 silver badges79 bronze badges

3 Comments

James Black Over a year ago

I don't think this really answers the question though. You may want to show an example of how you could use GreaseMonkey to do this, and then you are limited on browser support, I believe.

Robusto Over a year ago

@James Black: He did say "laziness" was an issue for him, which militates against the effort it would take to learn to write extensions. As for its limitation to supported browsers, he also said it is for "personal use." And as for the GreaseMonkey script needed to accomplish the task, it's one line: document.getElementById('post_tags').value = "Music"; He can find out about GreaseMonkey at outgoing.mozilla.org/v1/…, where he can read the tutorial.

James Black Over a year ago

The javascript code would work on a web page as well as GreaseMonkey, but just pointing out a technology with no context may be of limited help, that was all.

Collectives™ on Stack Overflow

How to insert text into a form with JavaScript

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related