JavaScript: Referring to a Button With Spaces in the Name

September 14, 2007 at 11:52 pm 4 comments

Dang.  This afternoon, on a short timeframe, I had to override the behavior of an HTML form button.  I couldn’t change the button itself (it was generated by compiled code that I did not have access to), but luckily, I already knew how to programmatically change the onClick event via JavaScript

I pulled up the HTML code and discovered the button name had spaces in it.  How am I supposed to refer to THAT?!?

<input type=”Button” name=”Click On Me” value=”Click On Me” onClick=”window.open(‘http://tgaw.wordpress.com&#8217;, ‘Bottom’);”>

Ordinarily, I would have some harsh criticism for the fool who named that button…  but I think I am said fool.  I think this might be my handiwork from 2001.  :)

I knew it was destined for failure but, proving I am still a fool in 2007, I did try:

document.MyForm.Click On Me.onclick = function () {alert(‘Hi’);};

Yeah, did not work.  Did a quick Google search, found nothing of value the first two pages, so I went with the elements object which proved to be much more space-friendly.

var btn = document.MyForm.elements[‘Click On Me’];
btn.onclick = function() {alert(‘hi’);};

This may not be the only solution.  It may not be the best solution (discussion welcome).  And I did not test it in anything other than the specific version of Internet Explorer I needed.  But it did the trick.  Also, I did not get heckled by JavaScript, so that’s a positive sign.

Anyway, that’s how I managed to refer to a button that had spaces in the name. 

About these ads

Entry filed under: JavaScript, Web Development. Tags: .

Wichita’s Troll links for 2007-09-15

4 Comments Add your own

  • 1. Scott  |  September 17, 2007 at 9:18 am

    You may have seen javascript like this on some pages.
    document.forms[0].elements[0].value

    Well you can also use that to pass in a string instead of a number.
    document.MyForm.elements['Click On Me'].onclick = function () {alert('Hi');};
    Or
    document.forms['MyForm'].elements['Click On Me'].onclick = function () {alert('Hi');};

    Reply
  • 2. Scott  |  September 17, 2007 at 9:24 am

    You pretty much had it right. You just didn’t have to break it up for it to work.

    Reply
  • 3. Clint  |  September 18, 2007 at 11:46 am

    though I think breaking it up makes it much more readable and thus better…

    Reply
  • 4. Chriggy  |  September 18, 2007 at 6:33 pm

    Gonna have to agree with Clint on this one. Readability is better than compactness.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Flickr Photos

Ornament on Smithsonian 3D Site

Ornament on White House Web Site

library_of_congress_library

Ornament on Smithsonian 3D Site

Ornament on White House Web Site

More Photos

3D Printed Products

Tweets


Follow

Get every new post delivered to your Inbox.

Join 69 other followers

%d bloggers like this: