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(‘https://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. 

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

My 3 Color Chickadee Experiment on the MakerGear M2- Take 1.  My silver filament is a little translucent so I think I need to add some extra layers there.  Overall, pleased!  #3DPrinting

Now that I know how to do multicolor prints on our MakerGear M2, I'm plotting ways to make myself a chickadee (I'm thinking 3 colors - white, black and grey) #3DPrinting #3DModeling

Achievement Unlocked - A Two Color Print (I switched filaments at the end). #3DPrinting #VirginiaTech  P.S.  This test print free to a good home.  It'd make a good magnet.

Rowing at Fountainhead Regional Park

Rowing at Fountainhead Regional Park

More Photos

3D Printed Products

Tweets


Follow

Get every new post delivered to your Inbox.

Join 195 other followers

%d bloggers like this: