Unable to change the type of p:password using Javascript

[rajakrishnan r]

Scenario:I want to change the type of p:password dynamically using javascript when the user checks the p:selectBooleanCheckBox.

Javascript:

Code: Select all

function showPassword(ischecked){
  if(ischecked)
{
        document.getElementById("loginpage:password").type="text";
  }else{
      document.getElementById("loginpage:password").type="password";
  }
}

XHTML Page:

Code: Select all

<p:password id="password" value="#{userBean.password}" onchange="showPassword(this.checked)" />

HTML Rendered Output:

Code: Select all

<div id="loginpage:password" class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear txt_box"><input data-role="none" id="loginpage:password" name="loginpage:password" type="password" placeholder="Password" tabindex="3" autocomplete="off" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsPDhss3LcOZQAAAU5JREFUOMvdkzFLA0EQhd/bO7iIYmklaCUopLAQA6KNaawt9BeIgnUwLHPJRchfEBR7CyGWgiDY2SlIQBT/gDaCoGDudiy8SLwkBiwz1c7y+GZ25i0wnFEqlSZFZKGdi8iiiOR7aU32QkR2c7ncPcljAARAkgckb8IwrGf1fg/oJ8lRAHkR2VDVmOQ8AKjqY1bMHgCGYXhFchnAg6omJGcBXEZRtNoXYK2dMsaMt1qtD9/3p40x5yS9tHICYF1Vn0mOxXH8Uq/Xb389wff9PQDbQRB0t/QNOiPZ1h4B2MoO0fxnYz8dOOcOVbWhqq8kJzzPa3RAXZIkawCenHMjJN/+GiIqlcoFgKKq3pEMAMwAuCa5VK1W3SAfbAIopum+cy5KzwXn3M5AI6XVYlVt1mq1U8/zTlS1CeC9j2+6o1wuz1lrVzpWXLDWTg3pz/0CQnd2Jos49xUAAAAASUVORK5CYII=); background-attachment: scroll; cursor: auto; background-position: 100% 50%; background-repeat: no-repeat no-repeat;"><a href="#" class="ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all ui-input-clear-hidden"></a></div>

The id of div and the input element is same and hence the javascript is unable to change the type of input filed of type password.

How would i solve this problem or is there any alternative way to achieve this view password using p:selectBooleanCheckBox?