title: Make readonly using getElementByName?
body: <p>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.</p>
  
  <p>The html is this:</p>
  
  <pre><code>&lt;form id="newunitform" class="left" action="page.php" style="width:600px" method="post"&gt;
  &lt;fieldset&gt;
  &lt;ul&gt;
  &lt;li&gt;
  &lt;label for="add"&gt;
  &lt;input type="text" value="" name="add"&gt;
  &lt;input type="hidden" value="" name="remove"&gt;
  &lt;input type="hidden" value="105" name="resource_id"&gt;
  &lt;input type="hidden" value="" name="editid"&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;label for="submit"&gt; &lt;/label&gt;
  &lt;input class="button" type="submit" value="Add name" name="submit"&gt;
  &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I tried several combination such this:</p>
  
  <pre><code>document.getElementByName('add').readOnly=true;
  </code></pre>
  
  <p>or this:</p>
  
  <pre><code>var add = document.getElementByName('add');
  add.readOnly = true;
  </code></pre>
  
  <p>or this:</p>
  
  <pre><code>document.getElementById('newunitform');
  document.getElementByName('add').readOnly=true;
  </code></pre>
  
  <p>but none work.</p>