tabindex stopped working in form

[rewind]

I had tabindex values set in my form fields so users could tab from one field to another, and they worked fine prior to me adding php into the form. Now that I've inserted php, the tabindexes don't work at all. How do I get them working again?

[Ashley_Sheridan]

Well, without seeing any actual code, that's hard to say. I would guess though that the PHP you added has broken the layout of your HTML making it invalid, thus leaving the browser to best guess what it is you actually intended.

[rewind]

Sorry, here's the form code:

	 	<form id="form" enctype="multipart/form-data" name="form" method="post" action="index.php">
			<?php 
				function spamcheck($field) 
				{	
					$field=htmlspecialchars($field);
					$field=filter_var($field, FILTER_SANITIZE_EMAIL);
					if(filter_var($field, FILTER_VALIDATE_EMAIL))
					{
					    return TRUE;
					}
					else
					{
					    return FALSE;
					}
				}
				if (isset($_REQUEST['email']))
				{
					$mailcheck = spamcheck($_REQUEST['email']);
					if ($mailcheck==TRUE)
					{ 
					    $email = $_REQUEST['email'] ;
					    $message = _REQUEST['message'];
					    $name = htmlspecialchars($_REQUEST['name']);
					    mail("[e-mail]", "Subject: WebSite query", $message, "From: $email" );
					    echo "<h2>Message sent. Thank you.</h2>";
					    $txtmsg="Another one?";
					    $check=0;
					}
				}
				else
				{
					echo "<h1>Email now</h1>";
					$txtmsg="Message";
					$email="[e-mail]";
					$name="Enter your name";
					$check=1;
				}

		?>				
		<br/><br/>
		<label for="name">Name</label>  
		<input type="text" id="name" name="name" 
		<?php if ($check) 
		{ 
			echo "value=\"\"";
			echo "placeholder=\"$name\"";
			echo "autofocus=\"autofocus\"";
		} 
		else echo "value=\"$name\""; 
		?> 
		 required="required"  />  
		<label for="email">Email Address</label>  
		<input type="email" id="email" name="email" 
		<?php if ($check) 
		{ 
			echo "value=\"\"";
			echo "placeholder=\"$email\"";
			echo "autofocus=\"autofocus\"";
		} 
		else echo "value=\"$email\""; 
		?> 
required="required" tabindex="2" />
			<label for="webSite">Website</label>  

			<input type="url" id="webSite" name="webSite" value="" placeholder="http://" tabindex="3" /> 			
	       		<textarea id="message" name="message" placeholder="<?php echo $txtmsg; ?>" required="required" tabindex="4" ></textarea> 
			<button type="submit">Send</button>
		</form>
	</div> 

Everything in the form works as it should, except for the tabindexes.

[Ashley_Sheridan]

I would say everything is not working as it should, that code has a few problems. For example, you're missing the $ on this line:

$message = _REQUEST['message'];

The main problem though is that you haven't checked the HTML produced by your PHP code. If you had, you'd notice that you left no space between the attributes output by PHP. The browser will just ignore all the attributes now, because it thinks they're part of one single attribute. Change the echo statements to include a space directly after the opening quote.

Also, you have a lot of redundant true/false values in your code. For example, you can change the spamcheck function to this and it will work the same:

function spamcheck($field) 
{	
	$field=htmlspecialchars($field);
	$field=filter_var($field, FILTER_SANITIZE_EMAIL);
	return filter_var($field, FILTER_VALIDATE_EMAIL);
}

Likewise, if ($mailcheck==TRUE) is the same as if ($mailcheck) (although not the same as if ($mailcheck===TRUE) if you want to ensure it's definitely true and not just type cast to true).

[rewind]

Ashley Sheridan;11016597 wrote:

I would say everything is not working as it should, that code has a few problems. For example, you're missing the $ on this line:

$message = _REQUEST['message'];

The main problem though is that you haven't checked the HTML produced by your PHP code. If you had, you'd notice that you left no space between the attributes output by PHP. The browser will just ignore all the attributes now, because it thinks they're part of one single attribute. Change the echo statements to include a space directly after the opening quote.

Also, you have a lot of redundant true/false values in your code. For example, you can change the spamcheck function to this and it will work the same:

function spamcheck($field) 
{	
	$field=htmlspecialchars($field);
	$field=filter_var($field, FILTER_SANITIZE_EMAIL);
	return filter_var($field, FILTER_VALIDATE_EMAIL);
}

Likewise, if ($mailcheck==TRUE) is the same as if ($mailcheck) (although not the same as if ($mailcheck===TRUE) if you want to ensure it's definitely true and not just type cast to true).

hmm the $ got lost somewhere in copy and paste, it is there in my file. I've reduced the function code as you suggested, but I'm still a bit confused about what you said re: attributes. Do you mean there should be a space inserted between the double quotes?
So

echo "value=\"\" ";

instead of

echo "value=\"\"";

?

[rewind]

eh... can't edit. I re-read and saw your line now about adding a space after echo opening double quote - tried it, but no difference.

[Ashley_Sheridan]

Have you had a look at the HTML output like I suggested? That would show you that something is wrong. This is the change I suggested:

<?php if ($check) 
{ 
    echo " value=\"\"";
    echo " placeholder=\"$name\"";
    echo " autofocus=\"autofocus\"";
} 
else echo " value=\"$name\""; 
?>

[rewind]

I'm not sure what you mean by check the html output - do you mean view source in the browser after it's displayed? I've done that and it looks fine 😕
but now since I started fiddling with this section of code, whenever the page loads it opens in the middle of the page instead of at the top 🙁

[rewind]

argggh my bad, I was using 'inspect element' to check the code and it appeared fine. when I use view source, there is indeed something wrong.

[rewind]

Here is the code as it currently looks, after the changes:

	<div id="formstyle" >
	 	<form id="form" enctype="multipart/form-data" name="form" method="post" action= "index.php">
			<?php 
				function spamcheck($field) 
				{    

				    $field=htmlspecialchars($field);
				    $field=filter_var($field, FILTER_SANITIZE_EMAIL);
				    return filter_var($field, FILTER_VALIDATE_EMAIL);
				}
				if (isset($_REQUEST['email']))
				{
					$mailcheck = spamcheck($_REQUEST['email']);
					if ($mailcheck)
					{ 
					    $email = $_REQUEST['email'] ;
					    $message = $_REQUEST['message'];
					    $name = htmlspecialchars($_REQUEST['name']);
					    mail("[e-mail]", "Subject: WebSite query", $message, "From: $email" );
					    echo "<h2>Message sent. Thank you.</h2>";
					    $txtmsg="Another one?";
					    $check=0;
					}
				}
				else
				{
					echo "<h3>Email</h3>";
					$txtmsg="Message";
					$email="[e-mail]";
					$name="Enter your name";
					$check=1;
				}

		?>				
		<br/><br/>
		<label for="name">Name</label>  
		<input type="text" id="name" name="name" 
		<?php if ($check) 
		{ 
			echo " value=\"\"";
			echo " placeholder=\"$name\"";
			echo " autofocus=\"autofocus\"";
		} 
		else echo "value=\"$name\""; 
		?> 
		 required="required"  />  
		<label for="email">Email Address</label>  
		<input type="email" id="email" name="email" 
		<?php if ($check) 
		{ 
			echo " value=\"\"";
			echo " placeholder=\"$email\"";
		} 
		else echo " value=\"$email\""; 
		?> 
required="required" tabindex="2" />
			<label for="webSite">Website</label>  

			<input type="url" id="webSite" name="webSite" value="" placeholder="http://" tabindex="3" /> 			
	       		<textarea id="message" name="message" placeholder="<?php echo $txtmsg; ?>" required="required" tabindex="4" ></textarea> 
			<button type="submit">Send!</button>
		</form>
	</div> 

Tabindexes still don't work, and as I said the page now opens half way in. If I remove this form div, the page loads normally.

[rewind]

I've now figured out the page loading halfway is related to the header, which I'm busy animating. very strange! I've removed tabindexes from the form and it now works as I want, so I guess it's sorted.