Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

input box on form losing focus 1

Status
Not open for further replies.
richcleverley

richcleverley

MIS
Jul 28, 2005
358
FR
Hi all,

Hope someone can help on this one.

I have a form which has dynamically populated dropdowns (one depends on the choise in the previous). There is also an input box that needs to be filled in before submission.

Now, the problem is that in Firefox I can't get the input box to keeps it's focus. In IE everything is fine but when I click in the box in FF the focus switched back to the dropdown bow above.

Here is the code (it has some php stuff and javascript calls in there to control the second input box).

Code: 
<form action="villasearch.php" method="post" name="proprent" id="proprent" onsubmit="YY_checkform('proprent','Bedrooms','#q','1','Number of Bedrooms must be selected');return document.MM_returnValue">
      <label> <br />
        <span class="formspacing">
          <?
		  echo "<select name='country' onchange=\"reload(this.form)\" class=\"formelements\"><option value='' >Country?</option>";
while($noticia2 = mysql_fetch_array($quer2)) { 
if($noticia2['cid']==@$country){echo "<option selected value='$noticia2[cid]'>$noticia2[country_name]</option>"."<BR>";}
else{echo  "<option value='$noticia2[cid]'>$noticia2[country_name]</option>";}
}
echo "</select>";
?>
          </span><br />
        <br />
        </label>
      <label>
        <?
		  echo "<select name='region' class=\"formelements\"><option value=''>Region?</option>";
while($noticia = mysql_fetch_array($quer)) { 
echo  "<option value='$noticia[rid]'>$noticia[region_name]</option>";
}
echo "</select>";
?>
        <br />
        <br />
        <input name="beds" class="formelements" id="beds" onFocus="if(this.value=='Bedrooms?')this.value='';" value="Bedrooms?"/>
          
        </label>
      <br />
      <br />
      <div align="right">
        <label>
          <input type="submit" name="Submit" value="Submit" />
          </label>
      </div>
    </form>

Anyone know why this might be happening.

Thanks,


Richard
 
Sort by date Sort by votes
Sure Dan,

Here is the client side form code

Code: 
<form action="villasearch.php" method="post" name="proprent" id="proprent" onsubmit="YY_checkform('proprent','Bedrooms','#q','1','Number of Bedrooms must be selected');return document.MM_returnValue">
      <label> <br />
        <span class="formspacing">

          <select name='country' onchange="reload(this.form)" class="formelements"><option value='' >Country?</option><option value='1'>Australia</option><option selected value='14'>England</option><BR></select>          </span><br />
        <br />
        </label>
      <label>
        <select name='region' class="formelements"><option value=''>Region?</option><option value='52'>Norfolk</option><option value='58'>Yorkshire</option></select>        <br />

        <br />
        <input name="beds" class="formelements" id="beds" onFocus="if(this.value=='Bedrooms?')this.value='';" value="Bedrooms?"/>
          
        </label>
      <br />
      <br />
      <div align="right">
        <label>
          <input type="submit" name="Submit" value="Submit" />
          </label>

      </div>
    </form>

and the javascript (both the validate and the reload code for the dropdowns)

Code: 
function YY_checkform() { //v4.71
//copyright (c)1998,2002 Yaromat.com
  var a=YY_checkform.arguments,oo=true,v='',s='',err=false,r,o,at,o1,t,i,j,ma,rx,cd,cm,cy,dte,at;
  for (i=1; i<a.length;i=i+4){
    if (a[i+1].charAt(0)=='#'){r=true; a[i+1]=a[i+1].substring(1);}else{r=false}
    o=MM_findObj(a[i].replace(/\[\d+\]/ig,""));
    o1=MM_findObj(a[i+1].replace(/\[\d+\]/ig,""));
    v=o.value;t=a[i+2];
    if (o.type=='text'||o.type=='password'||o.type=='hidden'){
      if (r&&v.length==0){err=true}
      if (v.length>0)
      if (t==1){ //fromto
        ma=a[i+1].split('_');if(isNaN(v)||v<ma[0]/1||v > ma[1]/1){err=true}
      } else if (t==2){
        rx=new RegExp("^[\\w\.=-]+@[\\w\\.-]+\\.[a-zA-Z]{2,4}$");if(!rx.test(v))err=true;
      } else if (t==3){ // date
        ma=a[i+1].split("#");at=v.match(ma[0]);
        if(at){
          cd=(at[ma[1]])?at[ma[1]]:1;cm=at[ma[2]]-1;cy=at[ma[3]];
          dte=new Date(cy,cm,cd);
          if(dte.getFullYear()!=cy||dte.getDate()!=cd||dte.getMonth()!=cm){err=true};
        }else{err=true}
      } else if (t==4){ // time
        ma=a[i+1].split("#");at=v.match(ma[0]);if(!at){err=true}
      } else if (t==5){ // check this 2
            if(o1.length)o1=o1[a[i+1].replace(/(.*\[)|(\].*)/ig,"")];
            if(!o1.checked){err=true}
      } else if (t==6){ // the same
            if(v!=MM_findObj(a[i+1]).value){err=true}
      }
    } else
    if (!o.type&&o.length>0&&o[0].type=='radio'){
          at = a[i].match(/(.*)\[(\d+)\].*/i);
          o2=(o.length>1)?o[at[2]]:o;
      if (t==1&&o2&&o2.checked&&o1&&o1.value.length/1==0){err=true}
      if (t==2){
        oo=false;
        for(j=0;j<o.length;j++){oo=oo||o[j].checked}
        if(!oo){s+='* '+a[i+3]+'\n'}
      }
    } else if (o.type=='checkbox'){
      if((t==1&&o.checked==false)||(t==2&&o.checked&&o1&&o1.value.length/1==0)){err=true}
    } else if (o.type=='select-one'||o.type=='select-multiple'){
      if(t==1&&o.selectedIndex/1==0){err=true}
    }else if (o.type=='textarea'){
      if(v.length<a[i+1]){err=true}
    }
    if (err){s+='* '+a[i+3]+'\n'; err=false}
  }
  if (s!=''){alert('You have not fully filled in the form.:\t\t\t\t\t\n\n'+s)}
  document.MM_returnValue = (s=='');
}
//-->


function reload(form){
var val=form.country.options[form.country.options.selectedIndex].value;
self.location='index.php?country=' + val ;

}

Think that's all, but it might be worth mentioning that I have two forms on this page (don't know if that makes a difference). The second form is viryually identical, it just looks at a different table to get the options and the reload javascript is replaced by
Code: 
function reloaded(form){
var val=form.country1.options[form.country1.options.selectedIndex].value;
self.location='index.php?country1=' + val ;

}
so that they both do as they should.

Thanks

Richard
 
Upvote 0 Downvote
sussed it out!

It was the label tag I had in. It was all messed up and relating virtually everything to the region box in the form.

I've stripped them out as I don't think I need them anywhere and the form is behaving itself now.

Richard
 
Upvote 0 Downvote
Good to see you got there. Have you thought about cutting down the validation function to just the bare essesntials? That looks like a generic "do-it-all" function, which you probably don't need.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hi Dan,

Thanks for that.
Yes, the javascript on the form for validation is pretty generic (it's from an extension I have on Dreamweaver). I'm pretty useless at Javascript so am using it, it also means that I can use the code on other forms that collect stuff like email addresses and dates too so I'm not sure if any of the stuff there can be cut out.

Of course, any tips on how to go through it are well recieved!

A star I think for getting me thinking.

Thanks again,

Richard
 
Upvote 0 Downvote
Aaah - if you use the code on other pages, then you should probably leave it as-is... After all - if it works, why change it!

If it was only on the one page, then you could cut it down considerably.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thanks Dan,

Yes it's is well and truly reused all over the place. This is a large rental/sales portal where people can advertise there properties etc. so there are lots of forms to be filled in that have to be validated. All kinds of different things, so it's probably best for me to leave it all in there.

Yet again you have been very helpful, I reckon I need to get the hang of Javascript soon, maybe over the summer when I am back in wet old blighty!!

Richard
 
Upvote 0 Downvote
I've stripped [label elements] out as I don't think I need them anywhere
Click to expand...
You don't need them, but they're nice to have for accessibility and usability purposes - assuming your form controls actually have labels, which yours apparently don't.

Used carefully, you can use them to build forms where all the layout is in the CSS, and you have no <br>s etc. in the markup. See
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
730
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
792
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
206
lmcate
lmcate
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
735
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
914
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top