How can I fill in simple forms using bookmarklets? Trouble shooting my simple code

Good afternoon,

To save time at work, I am trying to use js autofill scripts. Bookmarklets seems to be the best way of doing this but the simple code I have doesn’t seem to work.

As a test page, I have been trying- http://gangstaname.com/names/gangsta#.Ymf-cujMJPa as it’s a simple site with just one form with an id.

I’ve created a bookmark and changed the code to

javascript:document.getElementById("NameGangstaForm").value = "Mark";

In theory from what I’ve read, upon clicking this it should change the field value from blank to ‘Mark’ but instead it blanks the whole page and inserts the new name in the top left corner.

Apologies for the page and my apparent lack of knowledge but any help would be greatly appreciated.

Answer

#NameGangstaForm is <form> you want to select <input> with element ID #NameName

javascript:document.querySelector("#NameName").value = "Mark";void(0);

it better to use querySelector() instead of getElementById() because in the future you can easy switch to jQuery or CSS