0

I need to make "readonly" a text field by place javascript code inside external JS file. I can't modify html directly because the page is located on remote server..but I can interact by adding code in external JS who is located on my own host.

The html is this:

<form id="newunitform" class="left" action="page.php" style="width:600px" method="post">
<fieldset>
<ul>
<li>
<label for="add">
<input type="text" value="" name="add">
<input type="hidden" value="" name="remove">
<input type="hidden" value="105" name="resource_id">
<input type="hidden" value="" name="editid">
</li>
</ul>
<label for="submit"> </label>
<input class="button" type="submit" value="Add name" name="submit">
</fieldset>
</form>

I tried several combination such this:

document.getElementByName('add').readOnly=true;

or this:

var add = document.getElementByName('add');
add.readOnly = true;

or this:

document.getElementById('newunitform');
document.getElementByName('add').readOnly=true;

but none work.

Jan Turoň
  • 31,451
  • 23
  • 125
  • 169
dotcom22
  • 249
  • 1
  • 7
  • 19
  • 3
    It's actually `getElementsByName`. Notice the **`s`**. It returns multiple elements. You need to loop through and set the `readOnly` property. – gen_Eric May 09 '13 at 19:48
  • Damn you right, I did not noticed the "s"...however I tested all solution proposed but none work. – dotcom22 May 09 '13 at 20:10

4 Answers4

0

As Rocket Hazmat suggests in the comment to your question, you should use

document.getElementsByName('add')[0].readOnly=true;
Jan Turoň
  • 31,451
  • 23
  • 125
  • 169
0
document.getElementsByName('name')

returns an array. You need to use brackets or .item() to point to your element. I suggest you using this one, in my opinion it is a better solution:

var newUnitForm = document.getElementById('newunitform');
newUnitForm.add.readOnly = true; //or newUnitForm['add'], it's the same
Niccolò Campolungo
  • 11,824
  • 4
  • 32
  • 39
  • I tested also this but don't work.. – dotcom22 May 09 '13 at 20:11
  • http://jsfiddle.net/Cm5yk/ Just look at this, as you can see it works. Please explain better your problem so that we can help you. – Niccolò Campolungo May 09 '13 at 20:14
  • I tested your code but don't work too..even if I seen this work well on Jsfiddle... This is strange because I use without problem some other code for apply "readonly" other" field" (but those fields have an ID so I always used document.getElementById). Maybe I'm restricted in how to use JS in for specific case... I presume I must see with the provider of remote software... – dotcom22 May 09 '13 at 20:23
  • Maybe is necessary to include "input" or "text" somewhere in the code? – dotcom22 May 09 '13 at 20:25
  • That's strange, in my opinion you should have some syntax errors in your code, otherwise it's fault of your browser. Which is yours? – Niccolò Campolungo May 09 '13 at 20:26
  • FF20... Mmmm I don't know..Maybe the problem is the method allowed to me for interact using this external JS file. In fact all others fields where I can make modification without problem are not located on the same page of the field I try to modify. – dotcom22 May 09 '13 at 20:31
  • Does firebug log something about this? You should try to use breakpoints(idk if they are also in firebug, but I think so) to understand your code – Niccolò Campolungo May 09 '13 at 20:37
  • The form code I published in my question was extracted with Firebug. Normally at least one solution provided should work..so I suppose is really something about the remote software who impeach me to interact. I will ask their developers. In any case many thank for your help. cheers – dotcom22 May 09 '13 at 20:47
0

If you know there is only one element named "add", you can try something like this:

var elem = document.getElementsByName("add")[0];
elem.setAttribute("readonly", "true");   // or elem.readOnly = true;

If you know there is only one element named "add" inside the "newunitform" form, use LightStyle's suggestion:

var elem = document.getElementById("newunitform").add;
elem.setAttribute("readonly", "true");   // or elem.readOnly = true;

In any case, make sure the snippet is executed after the element in question has been rendered (e.g. you could place it in body's onload method.

gkalpak
  • 47,844
  • 8
  • 105
  • 118
  • I'm not sure this element is the only one who is named "add" however I tried and this don't work... – dotcom22 May 09 '13 at 20:11
  • Have you checked that the element is already rendered ? Add `alert(elem);` at the end and see what happens. – gkalpak May 09 '13 at 20:55
0

That's true -- it's either getElementById (single element) or getElementsByName which access all the elements in the DOM that have the name you're looking for.

Once you change Element to Elements you should be able to set the readOnly attribute.

You could also try, document.getElementByNames('someElement').disabled = true; but be careful if there are multiple elements with the same name.

Also -- because syntax like this has tripped me up any number of times, if a function doesn't work as expected, I'll make sure I'm getting the object I think I'm getting by alerting some aspect of the element.

e.g. alert(document.getElementsByName('someElement').length) or alert(document.getElementsByName('someElement').name)

Good luck

sothatswhereitgoes
  • 23
  • 5