Reputation: 73

get the type from input tag in HTML using JavaScript

The application creates a temp HTML Page for Print Version. I can disable everything on the page so that user can not interact with the page..but that makes evrything grey in color and user is having problem with reading. SO i want to make everything to be readonly..

Here is my piece of code,

var x = 0;        
var element;
while (x < document.getElementsByTagName("input").length) {

  element =  document.getElementsByTagName("input")[x].type
  if (element = "BUTTON") {              
      document.getElementsByTagName("input")[x].onclick = null;
  }
  if (element = "TEXT") {
     document.getElementsByTagName("input")[x].readOnly = true;
  }
  if (element = "CHECKBOX") {
     document.getElementsByTagName("input")[x].disabled = true;
  }
  x++;     
}

if i remove the if block for checkbox it is working fine. but if i include the checkbox condition it is making everything disabled(even buttons and text)..when i debug i see all the if blocks are executing.. i do not understand why.

Can some one plz help me out in this regard?

Upvotes: 0

Answers (6)

AVSSM

Reputation: 73

Finally I made a workaround to this issue.

I converted all my elements(hyperlinks, dropdowns, text) to labels and displayed them in black color.

Upvotes: 0

ytran

Reputation: 120

I think the differential styling for disabled inputs is useful because it provides a visual feedback for the user.

This doesn't address your question directly but it may be a good alternative. You could apply styling to the disabled inputs to suit your preference, maybe something like this.

input[disabled=disabled] {
    background: rgba(255,0,0,0.05);
    border: dashed 1px rgba(255,0,0,0.1);    
    color: black;
    cursor: not-allowed;
}

Upvotes: 0

Yuriy Galanter

Reputation: 39807

If you simple want to disable everything on the page - a faster way to do it is place transparent DIV over page content with z-index of a higher value.

Something like this:

Hello: <input type="text"/> <br>
Check this: <input type="checkbox" />

<div style="position: absolute; z-index: 10; top:0; left;0; width:100%; height:100%" />

Demo: http://jsfiddle.net/j39Au/

Upvotes: 0