Odd html behaivor

See attached html. This is an ordinary form, everything works fine.

I am the developer, I use Firefox. When I test, Firefox remembers all the fields (from prior tests) except the phone number field. If I double click there it lists an odd assortment of choices, none of which are phone numbers.

When I click submit, it asks me if I want it to remember the password for the phone number.

Huh?

Why does it do that? Seems I must have something set up in an odd way.

Thanks
ru_apply.htm
Richard KortsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ess KayEntrapenuerCommented:
it goes by the name of the field,  not by the text next to it
0
Richard KortsAuthor Commented:
esskayb2d,

Sorry, I have no clue what that means.
0
Tom BeckCommented:
It could be misbehaving because of invalid markup, i.e. no space between the class attribute values and the style attribute, missing </div> near the end.

Try this version of your html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lakos Sizing Tool - Registered User Application</title>
<link rel="stylesheet" href="W3.css">
<script type="text/javascript">
var ac = "";
function chk_vals() {
	if (document.st.fname.value == "") {
		alert("First Name required.");
		return false;
	}	
	if (document.st.lname.value == "") {
		alert("Last Name required.");
		return false;
	}
	if (document.st.email.value == "") {
		alert("Email required.");
		return false;
	}
	if (document.st.affil.value == "") {
		alert("Affiliation required.");
		return false;
	}
	if (document.st.phone.value == "") {
		alert("Phone Number required.");
		return false;
	}
	return true;
}
</script>
<body style="font-size:22px">

<div class="w3-container w3-dkblue">
  <h1><img src="images/logo.jpg">&nbsp;Apply for Registered User</h1>
  <p></p>
</div>
<form method="post" name="st" action="send_apply.php" onSubmit = "return chk_vals();">
<div class="w3-row-padding" style="padding-top: 20px;">
	<div class="w3-twothird" style="font-size:16px">All fields are required.</div>
</div>

<div class="w3-row-padding">
	<div class="w3-third lable-align">First Name</div>
	<div class="w3-third" style="padding-top: 10px;"><input type="text" name="fname" /></div>
</div>

<div class="w3-row-padding">
	<div class="w3-third lable-align">Last Name</div>
	<div class="w3-third" style="padding-top: 10px;"><input type="text" name="lname" /></div>
</div>

<div class="w3-row-padding">
	<div class="w3-third lable-align">Email Address:</div>
	<div class="w3-third" style="padding-top: 10px;"><input type="text" name="email" size="50" /></div>
</div>

<div class="w3-row-padding">
	<div class="w3-third lable-align">Affiliation:</div>
	<div class="w3-third" style="padding-top: 10px;"><input type="text" name="affil" size="50" /></div>
</div>

<div class="w3-row-padding">
	<div class="w3-third lable-align">Telephone:</div>
	<div class="w3-third" style="padding-top: 10px;"><input type="text" name="phone"></div>
</div>

<div class="w3-row-padding">
	<div class="w3-twothird" style="font-size:16px">Enter your desired password. Passwords must be 7 or more characters in length and contain at least one upper case letter, one lower case letter and one numeral. If you leave the password blank, a random password will be generated and made available to you.</div>
</div>

<div class="w3-row-padding">
	<div class="w3-third lable-align">Password:</div>
	<div class="w3-third" style="padding-top: 10px;"><input type="password" name="pwd" /></div>
</div>
	
<div class="w3-row-padding" style="padding-top: 30px;">
	<div class="w3-third"><input type="submit" value="Submit" /></div>
</div>
</form>
</body>
</html>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Richard KortsAuthor Commented:
Tom,

Did it with yours, same result.

FYI, I saw those style & class butted up against each other, it didn't seem to matter, that was unintentional.

My only issues is the message FireFox gives about saving the password with the phone number. How does it get that?

Thanks
0
Ess KayEntrapenuerCommented:
Right click on the page, and hit View-Source

You will see the code that makes up the page

The textboxed (with the phone for example) is called and INPUT, you can to CTRL+F or Find on page - and type INPUT, until you locate the textarea, or textbox

Example ot textbox

Above is a screenshot of what Im typing, with the code that makes the webpage
You will notice the following:

<textarea name="body" class="textInputArea" id="questionCommentAdd-postCommentForm-body"></textarea>


if you look closely, it says ID="questionCommentAdd-postCommentForm-body"
I am assuming that if you look at the source code for the webpage you are talking about, you will find that the ID of the PHONEFIELD is named something simple

if this name has been used on other webpages where you have filled out information,
all of those passt enteries will show up on the suggestions box



Why dont you look at the source, and post the name of the INPUT here
0
Tom BeckCommented:
@esskb2d,
The name of the phone input is "phone". No need for Richard to post it here, he already provided that in his original question. See attachment.

@Richard,
I have no logical explanation for why the page would ask if you want to remember the password for a phone field. I use Firefox for testing and for nothing else. I use other browsers for everyday stuff. I do it that way because it's easier to clear the entire cache on one browser than to clear specific entries in a browser I use for normal surfing. Plus I like Firebug for testing.

You say you tried my markup. Did you clear the cache first? Does the page you are currently testing have clean valid markup? If you look at the view source in Firefox you should not see any red markup. Invalid markup can result in odd behavior.
0
Ess KayEntrapenuerCommented:
Great, didnt see that


You will want to change the INPUT type

change this
<div class="w3-row-padding">
<div class="w3-third lable-align">Telephone:</div>
<div class="w3-third"style="padding-top: 10px;"><input type="text" name="phone"></div>

Open in new window


to this:
<div class="w3-row-padding">
<div class="w3-third lable-align">Telephone:</div>
<div class="w3-third"style="padding-top: 10px;"><input type="tel" name="phone"></div>

Open in new window




also, I would suggest changing the field name from Phone to something like usrtel
0
Chris StanyonWebDevCommented:
When I click submit, it asks me if I want it to remember the password for the phone number.

Your browser assumes that an input field that comes before a PASSWORD field must be a USERNAME field. When you submit your form, Firefox assumes that your PHONE field is meant to be a username, and it therefore asks if you want to save it.

Apparently it's a feature - but it is an odd one!

Test it - move your email field so that it comes before the password field, and it'll ask if you want to save that!!
0
Dave BaldwinFixer of ProblemsCommented:
I think you are misinterpreting the request to save the password.  With a blank password and phone fields, it does not ask to save the password so I don't believe it is related to the phone number field.

With my PHP test page, your form does generate the correct POST values.
0
Richard KortsAuthor Commented:
To all,

The whole thing works perfectly on the server side (php, as Dave indicated). The form process properly, etc.

My concern is the odd message about saving the password using the phone number.

As usual, I don't care myself, I'm thinking about the general public.

Also, I was unaware there was an input type "tel" in HTML.

@Chris Stanyon - I'll try what you suggest. That seems an odd rule (in FireFox). Why would the sequence of fields on a form be of any consequence? In fact, that seems nuts to me.
0
Dave BaldwinFixer of ProblemsCommented:
My concern is the odd message about saving the password using the phone number.
But that is Not what is happening.  If there is nothing in the password field, that message does not appear so it is Not about the phone number field.
0
Chris StanyonWebDevCommented:
If you submit a form with a value in a password field, Firefox will ask if you want to save the username and password for the site. It can't just save a password on it's own, so it makes an educated guess as to what it thinks is the username - it bases this guess on the field that appears just before the password field - in your code it's the phone field.

It's not specifically the phone field - it's whatever field is previous to the password field. Change the order of your fields and you'll see exactly what I mean.

If the password field is empty, then it won't ask you to save the details.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
The reason your telephone is not autocompleting is (I think) it precedes a password field and FF is assuming that it is a username field.

If you insert another field between phone and password - you should see it remember the phone settings and the new field will now try and autofill a username.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.