.focus() not KEEPING focus???

[thorshammer]

My form Submit button has an onClick="myFocus()" call, which looks like:
<code>
theFocus = document.getElementById('warning');
theFocus.tabIndex = 'auto';
theFocus.style.background = 'red';
theFocus.focus();
</code>

It works - briefly. Right after clicking Submit (top of form no longer visible when Submit reached), the focus goes to the target element and turns red - but only while the page is still working on reloading. Then the focus is placed back at the top of the page. Has me stumped.

NOTE: the ".tabIndex = 'auto' was a suggestion here in another (inderectly related) thread. Wasn't working before I added that, still doesn't.

[Thirusha]

where is your form submitting to, it could be that when the form submits, the element is no longer on the page or not in the same place as it is before it is submitted there it is being set to the top of the page.

could u include your entire code please

[YanivC]

well whats happening is your code sets the focus so it monetarily sets the focus but then the page submits... so it no longer has the focus.

if you add a return false; it will stop the page from submitting.
What are you trying to achieve?

[thorshammer]

Thanks Thirusha. The challenge is that it's a fairly large chunk of code - owing to the form complexity, and the fact it includes on-page validation. For starters, I'll display the most relevant parts - starting with the form validator:

<div id="formdiv" style="width:100%;margin-top:-100px;height:930px;padding-top:55px;position:relative">
<?php
require_once "formvalidator.php";
$show_form=true;
if(isset($_POST['Submit']))
{
	$name = $_POST['aName'];
	$mail = $_POST['aMail'];
	$company = $_POST['aCompany'];
...etc.

    $validator = new FormValidator();
    $validator->addValidation("aName","req","Please provide Name;");
    $validator->addValidation("aMail","email","Valid Email format required;");
    $validator->addValidation("aMail","req","Please provide Email;");
    if($validator->ValidateForm())
    {
        //echo "<h2>Validation Success!</h2>";
        $show_form=false;
	send_email($name,$mail,$company,$city,$phone,$personality,$adjectives,$url,$visual,$content,$handles);
    }
    else
    {
        //echo "<B>Validation Errors:</B>";
		echo"<div id=error style=position:absolute;top:400px;left:0px;width:200px;text-align:center;border-width:2px;border-style:solid;border-color:red;padding:2px>";
		echo "<strong>** missing Info:<br></strong>";
        $error_hash = $validator->GetErrors();
        foreach($error_hash as $inpname => $inp_err)
        {
            echo "$inp_err\n<br>";
        } 
		echo"</div>"; 
    }
}

if(true == $show_form)
{
?>

And the Form itself (abridged, here):

<form id="form1" action="" enctype="multipart/form-data" method="post" onSubmit="" accept-charset='UTF-8' style="width:584px;margin:0px" >
	<div id="contactLeft" style="float:left;width:250px;height:196px;padding:0px 0px 4px 0px;border:2px solid #8b7201">
...etc.

		<div style="float: left; width: 178px; line-height: 10pt; margin:0px; padding:0px">
		<?php 
		if (!isset($name)) { $name = ""; }
		if (!isset($mail)) { $mail = ""; }
		if (!isset($company)) { $company = ""; }
		if (!isset($city)) { $city = ""; }
		if (!isset($phone)) { $phone = ""; }
		if (!isset($personality)) { $personality = ""; }
		if (!isset($adjectives)) { $adjectives = ""; }
		if (!isset($url)) { $url = ""; }
		if (!isset($visual)) { $visual = ""; }
		if (!isset($content)) { $content = ""; }
		if (!isset($handles)) { $handles = ""; }
		echo"<input class=fb id=aName name=aName type=text tabindex=1 value=$name ><br>"; 
		echo"<input class=fb name=aMail type=text tabindex=2 value=$mail ><br>";
		echo"<input class=fb name=aCompany type=text tabindex=3 value=$company ><br>";
		echo"<input class=fb name=aCity type=text tabindex=4 value=$city ><br>";
		echo"<input class=fb name=aPhone type=text tabindex=5 value=$phone >";
		?>
	</div>
...etc.
	<input class=fb type="submit" name="Submit" value="Send to ASGARD FORGE" tabindex="8" onSubmit="myFocus()" style="width:300px;height:24px" >
	</div>
</form>

And then the "myFocus()" function:

<script type="text/javascript">
    function myFocus() {
        theFocus = document.getElementById('aName');
        theFocus.tabIndex = 'auto';
        theFocus.style.background = 'red';
        theFocus.focus();
}
</script>

And - finally - the almost overlooked detail that all of this is inserted inside a page node of a Drupal website - with PHP coding enabled of course. Here's the page:
http://www.asgardforge.com/web-design/web-design-company/get-started

[Thirusha]

i don't think the onsubmit function is being performed as it is on the button, and if your button is of type submit it will submit the form immediately, have you tried placing the onsubmit function on the form?
another question, after the form submits, the page that it submits to, does it have the field you are sending the focus to?

[thorshammer]

Thanks Thirusha and YanivC.

Now that I have a better handle on the FOCUS issue, I realize that it's probably irrelevant at the FORM level. Reason is that the page's contents around the FORM tag is being built with PHP - in this order:
(1) it invokes the VALIDATOR script (external);
(2) it tests whether $POST has content yet (in other words, is this original page load, or reload after someone has clicked SUBMIT);
(3) if no $POST content, it builds the form with empty fields;
OR
(3) if $POST has contents, it validates required fields;
(4) if all valid, it invokes the send_mail function and ON THE SAME PAGE (lower down) provides the user message "thank you..." etc.
OR
(4) if validation errors occur, it provides error messages and then rebuilds the form with previous user-data retained.

So no matter what the form does - and it DOES successfully put the focus where I point to in myFocus() - this is just temporary because the PHP code in charge does some more things thereafter, and thus the set focus is lost.

Obviously a job for AJAX, but I'm not there yet. Short of that, I need a different strategy on how to get the PHP code to point the focus appropriately after doing the validating. In other words, somewhere in that first block of code above, that's wrapped in a DIV tag. Help?

[vsmash]

Okay Thor, you need to separate your process. Javascript validation happens client-side BEFORE form is submitted, and php validation happens server-side AFTER form is submitted (before the page is rendered).

If your php validation returns failure, you will have to set the focus within the php such as:

echo("<script language=javascript>window.onload=myFocus();</script>");

if you want the javascript validation to prevent the form being posted:
HTML

<form name=foo onSubmit="return validatethisform()">

JAVASCRIPT

function validatethisform(){
 var valid=true;
// insert your validation rules here
//example
if(document.thisformname.somefield.value+''==''){valid=false;}
// then return the valid value
if(valid==true){
return true;
}else{myFocus(); return false;}
}

[thorshammer]

When I finally figured out the focus issue lay in the PHP Validator script, using vsmash's excellent code suggestion I placed calls to myFocus() at lines 21 and 33 in that first block of code I listed above (Validator script):

<?php
//...
   //echo "<h2>Validation Success!</h2>";        
   $show_form=false;	
   send_email($name,$mail,$company,$city,$phone,$personality,$adjectives,$url,$visual,$content,$handles);
    echo("<script language=javascript> window.onload=myFocus(2); </script>");
//...
?>

Focus now goes to the "error" div or the "thankyou" div depending on whether the Form validates. Works like a charm. It's here if anyone wants to see it in action: http://www.asgardforge.com/web-design/web-design-company/get-started

I still look forward to learning the magic of AJAX, and seeing validations appear inline as each field is addressed. But until then, this will do!!

Thanks all.