current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite

I'm making a Greasemonkey script for someone to change the display of some of the fields their CRM(Zoho) created because they don't have access to change the rendered HTML.

This should be easy, BUT Zoho decided that creating proper HTML was too big a pain in the ass, I guess, and their HTML contains things like this:

<input type="text" maxlength="50" style="width: 100%;" class="textField" id="property(Phone)" name="property(Phone)"/>

The ID's contain spaces and parentheses, which aren't valid in ID attributes, and is preventing me from using either document.getElementById() to select them or from using jQuery to select them.

Does anyone have any ideas for how I could grab that element? Obviously I could grab it via its index in its parent element, or by traversing the DOM, but both of those would mean that if the order of the fields changed, the Greasemonkey script would stop working correctly because it would then be targeting the wrong elements.

share|improve this question
up vote 1 down vote accepted

You can escape the spaces and parentheses using backslashes:

$('#property\\(Phone\\)').val('jQuery selected property(Phone)!');
$('#ab\\ cd\\ ef').val('jQuery selected ab cd ef!');
share|improve this answer
up vote 1 down vote

What browser is this for? Firefox, I assume, since you mention GreaseMonkey. But document.getElementById("property(Phone)") seems to work just fine in Firefox 3.5.

share|improve this answer
up vote 1 down vote

You can escape the brackets like this:

$("#property\\(Phone\\)")
share|improve this answer
    
You beat me by a minute, but you forgot the '#' at the start of your selector. :) – Annabelle Jan 7 '10 at 18:28
    
fixed it, thanks! – Chetan Sastry Jan 7 '10 at 18:30
up vote 0 down vote

JQuery probably can't find it using #id syntax, but could probably find it using tagName[id=value] syntax... try it, and good luck. See the jQuery doc.

share|improve this answer
up vote 0 down vote

You could always do a document.getElementsByTagName('input'), then browse the results and match it with it's attributes (like it's type and name, class...). Not very efficient but the only way I know that will work with any order (since the id is invalid)...

var inputs = document.getElementsByTagName('input');
if (inputs)
    for (var i = 0; i < inputs.length; i++)
        if (inputs[i].type == 'text' && inputs[i].name == 'SearchValue')
            return inputs[i];

I'm pretty sure JQuery (or any other good framework) have an equivalent to this snippet...

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.