asked on

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

Ess Kay

it goes by the name of the field, not by the text next to it

Richard Korts

ASKER

esskayb2d,

Sorry, I have no clue what that means.

Tom Beck

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

Richard Korts

ASKER

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

Ess Kay

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

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

Tom Beck

@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.

Ess Kay

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

SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Dave Baldwin

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.

Richard Korts

ASKER

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.

Dave Baldwin

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.

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial