Hi there,

I have a peculiar problem with an input field which is of type password and which uses the Safari specific attribute called placeholder.

The issue I am having is the password input field is displaying "..." rather than "PIN". It's as if the text "PIN" is the actual password entered in.

This issue only occurs when I am hiding and then showing the form on the page. If the form is not hidden, the field is ok.

Would anyone know how I can get around this peculiar problem?

I have the following html page which has two forms. Each form is within a specific div.

<div id="content">
<div align="center" class="paired buttons">
<input type="button" name="view_type" value="Form A" class="left active" onclick="switchTo('form_a')" />
<input type="button" name="view_type" value="Form B" id="fflyer_btn" class="right" onclick="switchTo('form_b')" />
</div>
<div id="form_a">
<form styleClass="layout" action="/dyn/checkmytripWktMobile" method="post">
<input type="text" id="bookingRef" name="bookingRef" class="firstinput" size="6" maxlength="6" placeholder="Booking Ref" title="Booking Reference" />
<input type="text" id="surname" name="surname" class="nextinput" size="18" maxlength="37" placeholder="Last Name" title="Last Name" />
<div class="buttonlayout">
<html-el:submit property="login" value="Find Bookings" styleClass="subbutton" />
</div>
</form>
</div>
<div id="form_b" style="visibility:hidden;">
<form id="login" class="layout" name="FFLoginForm" method="post" action="blah">
<div>
<input type="text" id="login_ffNumber" name="login_ffNumber" class="firstinput" size="18" maxlength="10" placeholder="Number" title="Number" />
<input type="text" id="login_surname" name="login_surname" class="nextinput" size="18" maxlength="37" placeholder="Last Name" title="Last Name" />
<input type="password" id="login_pin" name="login_pin" class="nextinput" size="18" maxlength="4" placeholder="PIN" title="PIN" />
</div>
<div class="buttonlayout">
<html-el:submit property="login" value="Login" styleClass="subbutton" />
</div>
</form>
</div>
</div>


When clicking on the paired button, I call the "switchTo" javascript function to hide one div and then show the other div:

//This is the public method for the paired button. This will toggle the state of the buttons
function switchTo(divId) {

//Get the styling for the divId
var styleSheet = getStyleObject(divId);

if (styleSheet) {

//First, hide everything
hideAll();

//Change the visibility for the divId
changeObjectVisibility(divId, "visible");

//We now need to change the state of the button
changeObjectActivity(divId, "view_type");

}
else {
alert ("Sorry, this only works in browsers that supports Dynamic HTML.")
}
}

//get the styling for the specific objectId
function getStyleObject(objectId) {

if (document.getElementById && document.getElementById(objectId)) {

return document.getElementById(objectId).style;
}
else if (document.all && document.all(objectId)) {

return document.all(objectId).style;
}
else if (document.layers && document.layers[objectId]) {

return document.latyers[objectId];
}
else {
return false;
}
}

//Toggles whether to make the element visible or not
function changeObjectVisibility(objectId, newVisibility) {

//First get the object's stylesheet'
var styleObject = getStyleObject(objectId);

if (styleObject) {

styleObject.visibility = newVisibility;

}
else {
return false;
}
}

//Toggles the state of the paired button
function changeObjectActivity(objectId, elementName) {

//First get the button element
var buttonElementObject = document.getElementsByName(elementName);

if (buttonElementObject) {

//Check to see which div was made visible
if (objectId == "qf_fflyer") {

buttonElementObject[0].className = "left";
buttonElementObject[1].className = "right active";
}
else {

buttonElementObject[0].className = "left active";
buttonElementObject[1].className = "right";
}

return true;
}
else {

return false;
}
}

//Initially hide all the div's
function hideAll() {

changeObjectVisibility("qf_fflyer", "hidden");
changeObjectVisibility("qf_bookingref", "hidden");
}


//this function runs when the page is loaded, put all your other onload stuff in here too.
function init() {
replaceChecks();
}

function replaceChecks() {

//get all the input fields on the page
inputs = document.getElementsByTagName('input');

//cycle trough the input fields
for(var i=0; i < inputs.length; i++) {

//check if the input is a checkbox
if(inputs[i].getAttribute('type') == 'checkbox') {

//create a new image
var img = document.createElement('img');

//check if the checkbox is checked
if(inputs[i].checked) {
img.src = imgTrue;
} else {
img.src = imgFalse;
}

//set image ID and onclick action
img.id = 'checkImage'+i;
//set image
img.onclick = new Function('checkChange('+i+')');
//place image in front of the checkbox
inputs[i].parentNode.insertBefore(img, inputs[i]);

//hide the checkbox
inputs[i].style.display='none';
}
}
}

//change the checkbox status and the replacement image
function checkChange(i) {

if(inputs[i].checked) {
inputs[i].checked = '';
document.getElementById('checkImage'+i).src=imgFal se;
} else {
inputs[i].checked = 'checked';
document.getElementById('checkImage'+i).src=imgTru e;
}
}

//This is for error messages. Have to put error messages into a hidden field and then perform an alert
function alertUser(objId) {
var msgField = document.getElementById(objId);
alert(msgField.value);
}


Thank you for your help in advance.