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

Jefferson Reading Room and Silver Ornament

View While Nursing for November 9, 2014 - Watching All My #Ingress Portals Getting Captured.

Cthulhu Pumpkin - Original Concepts and Actual Product

Cthulhu Pumpkin - Dyson Removes Lid

Cthulhu Pumpkin - Dyson Smiles With It

More Photos

3D Printed Products

Tweets


Follow

Get every new post delivered to your Inbox.

Join 69 other followers

%d bloggers like this: