Entire form readonly? 1

gbaughma · May 23, 2006

Well, my project is coming along.... but here's my next simple question.

I have a very large form. The form can be filled in and submitted, or a parameter can be passed to the script which fills the elements in from a database.

Now I want to be able to print it, without giving the ability to edit it further.

So, (trying to re-use my code again), is there a way to make an entire web form READ ONLY, with either a javascript loop or perhaps even a CSS setting, so that the form can be loaded, filled with the values by javascript (got those two working), and then the entire form made readonly, so someone couldn't make modifications and print the modified form?

Thanks in advance!

Just my 2¢

"In order to start solving a problem, one must first identify its owner." --Me
--Greg

theniteowl · May 23, 2006

You can use DOM methods to get an array of every form element, loop through the elements and test the TYPE of each element and then set it's property.
The reason you need to check the type is because some fields have a readonly property and others do not and will have to use the disabled property.

Try out this function. I made this out of code I use for another purpose and have not tested.
Pass in the name of the form NOT wrapped in quotes.

Code:

function lockForm(objForm) {
  var elArr = objForm.elements;
  for(var i=0; i<elArr.length; i++) { 
    switch (elArr[i].type) {
      case 'radio': elArr[i].disabled = true; break;
      case 'checkbox': elArr[i].disabled = true; break;
      case 'select-one': elArr[i].disabled = true; break;
      case 'select-multiple': elArr[i].disabled = true; break;
      case 'text': elArr[i].readOnly = true; break;
      case 'textarea': elArr[i].readOnly = true; break;
      case 'button': elArr[i].disabled = true; break;
      case 'submit': elArr[i].disabled = true; break;
      case 'reset': elArr[i].disabled = true; break;
      default: elArr[i].disabled = true; break;
    }
  }
}

NOTE: The text and textarea fields are set readOnly rather than disabled. The disabled property is valid for both of them if you prefer to do it that way. Just remember that form fields that are set as disabled will NOT submit to the next page.

You could also set the button, submit and reset types to hidden if you do not want them to print.

It's hard to think outside the box when I'm trapped in a cubicle.

ggriffit · May 23, 2006

just loop through all the form elements and set them all to readonly or simply have another page where the data is displayed in plain text rather than form fields.

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005

http://www.greggriffiths.org/livelink/

theniteowl · May 23, 2006

Here is a complete test page with a variety of form elements. Use the Test button to call the function.

Code:

<html>
<title></title>
<head>
<script type="text/javascript">
function lockForm(objForm) {
  var elArr = objForm.elements;
  for(var i=0; i<elArr.length; i++) { 
    switch (elArr[i].type) {
      case 'radio': elArr[i].disabled = true; break;
      case 'checkbox': elArr[i].disabled = true; break;
      case 'select-one': elArr[i].disabled = true; break;
      case 'select-multiple': elArr[i].disabled = true; break;
      case 'text': elArr[i].readOnly = true; break;
      case 'textarea': elArr[i].readOnly = true; break;
      case 'button': elArr[i].disabled = true; break;
      case 'submit': elArr[i].disabled = true; break;
      case 'reset': elArr[i].disabled = true; break;
      default: elArr[i].disabled = true; break;
    }
  }
}
</script>
</head>
<body>
<form id="testform" method="post" action="testemail.asp" onsubmit="return formatform(testform)">
  <input name="company1" type="radio" value="1">List 1:<br>
  <input type="radio" name="company1" value="2">List 2:<br>
  <input type="checkbox" name="checkme">Check Me<br>
  <br>
  <select id="companylisting" name="companylisting" size="3" multiple>
    <option value="0">Select an option</option>
    <option value="1">Field 1</option>
    <option value="2">Field 2</option>
    <option value="3">Field 3</option>
    <option value="4">Field 4</option>
    <option value="5">Field 5</option>
    <option value="6">Field 6</option>
    <option value="7">Field 7</option>
    <option value="8">Field 8</option>
    <option value="9">Field 9</option>
    <option value="10">Field 10</option>
  </select>
  <br><br>
  <select id="companylist2" name="companylist2" size="5" style="color: red; font-weight: bold;">
    <option value="0">Select an option first</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select><br>
  <input value="Dummy" type="button" name="dummy"><br>
  <input type="text" name="text1" value="stuff" class="furnlink"><br><br>
  <textarea rows='10' name='FNO' cols='40'>Text info in here</textarea><br>
  <input type="submit" value="Submit">   <input type="reset" value="Clear"><br>
  <input type="button" value="Test" onclick="lockForm(testform);">
</form>
</body>
</html>

It's hard to think outside the box when I'm trapped in a cubicle.

gbaughma · May 23, 2006

theniteowl: Perfect. Just what I was looking for.

Just my 2¢

"In order to start solving a problem, one must first identify its owner." --Me
--Greg

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Entire form readonly? 1

gbaughma

IS-IT--Management

theniteowl

Programmer

ggriffit

Programmer

theniteowl

Programmer

gbaughma

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor