New To Mac-Forums?

Welcome to our community! Join the discussion today by registering your FREE account. If you have any problems with the registration process, please contact us!

Get your questions answered by community gurus Advice and insight from world-class Apple enthusiasts Exclusive access to members-only contests, giveaways and deals

Join today!

 
Start a Discussion
 

Mac-Forums Brief

Subscribe to Mac-Forums Brief to receive special offers from Mac-Forums partners and sponsors

Join the conversation RSS
Web Design and Hosting Creating sites, scripting, and hosting discussions.

Input field, placeholder and password type issue


Post Reply New Thread Subscribe

 
Thread Tools
ajlow

 
Member Since: Apr 15, 2009
Posts: 1
ajlow is on a distinguished road

ajlow is offline
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.
QUOTE Thanks

Post Reply New Thread Subscribe


« problem with navigation menu in my web page | Anyone Espresso Users? »
Thread Tools

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off
Forum Jump

All times are GMT -4. The time now is 07:20 AM.

Powered by vBulletin
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
X

Welcome to Mac-Forums.com

Create your username to jump into the discussion!

New members like you have made this community the ultimate source for your Mac since 2003!


(4 digit year)

Already a member?