JavaScript list chooser + htlm form + php array?

lila

How can I modify a 'list chooser' script for my form options sleected from a php array?

I have a form (HTML/PHP) with an options menu of about 70 items. It would be super to use a list chooser to jump to the correct place and save scrolling and errors. I have copied a couple of complete 'list chooser' scripts from JavaScript sites, but they use "type=text" and list options in the <body>. I need to fit this to my "select" and WHILE...($row=mysql_fetch_array($query1)) code.

Can anybody help? I have no experience with JavaScript. Can I just change the form attributes in the <body>, where the original has <type="text"> and a list of option values, and put in the php? Or do I have to change the script in <head> as well?

LoganK

I'm confused...do you want the page to jump to a specific value in the list when it loads, or have links that make the select list jump to a specific value?

lila

I want the user to get the form for submitting genus & species (which you know only too well by now) and type "p" in the options field, which moves the list chooser til the "P" section; "h" which leaves only options beginning with "Ph", "a" which jumps (probably) to "Phaseolus". I know the form will jump to the initial letter anyway, but it would be much easier if the user could keep on typing and narrow it down even more.

The 2 JavaScripts I've found/been offered do this (which is common for interactive fields on-line, but new territory for me) but I can't see how to modify them so instead of including all the options in the code, I use the php WHILE array. An example from one of the scripts:

<select onkeyup="sel(event,this)">
  <option selected>--select--</option> 
  <option>aaa</option> 
  <option>aba</option>

"List chooser" is what the original JS script bank called this function...
Shall I send a complete JS code? I'm sure it's simple but can't figure it out from scratch.

leatherback

Hi Lila,

If what you say is understood correctly by me.. You cannot do this.

The PhP code is processed on the server BEFORE the user sees anytrhing on his screen. So by the time the javascript kicks in, te selects have been done already.

As for sending the complete javascript.. Although most people will have a quick look at a small snippet.. The discussion here in general is PhP, not javascript. And yes. They are fairly different..

leatherback

btw: Did you have a look atthis page .

The script seems to do what you want, client-side, and has some explanation?

LoganK

I agree with leatherback's article. I've read it before, and it could be adapted to your problem quite nicely. And (unfortunately) there's no need to use my namesake, AJAX. 🙁

And yes, I think we all know those genus and species all too well by now 🙂

lila

That looks really useful, thanks so much! I will try it and hope it resolves the problem. I hadn't realized that about the server side script processing before the other. But I understand why it wouldn't work.

LoganK

Allright. We'll wait here till you get back 😃

lila

😕 I think I'm jinxed. Or maybe just too dumb to do this. I'm really depressed. 🙁
I tried the script (assume it's the revised one, apparently there were corrections) and I'm almost positive it worked one time thru - but ever since, the page has opened in my browser with an error, nothing works, and my editor claims there are 2 errors, one missing ";" on line 16, and "sel is not defined" on line 80 (presumably like php, not the real lines starting from 1, so I have NO IDEA where to look).

I pasted directly from the script, and used the street names in the original, no funny business with php arrays. Maybe I can contact the author and get help?

LoganK

Possibly...but I don't think he'd be to happy 🙂 They're kind of busy to be dealing with people who have problems with their scripts - that's why they have that EULA saying that they are not responsible for blah blah blah and etc.

If you post the JS code, we might be able to help.

lila

I can, but leatherback advised against sending long JavaScripts, are you sure it's OK?
And if you have a sec, could you let me know if what I replied to your last question about my ghosts was what you needed? I noticed you hadn't replied to it. Which was one reason I asked it it was hopeless.

leatherback

Hey Lila,

Don't worrie. Nobody is going to bite your head of for posting a script. I just placed that, because it often results in an somewhat ignored post. But since there is now 2 people looking activily at what else comes up.. Let's have a look at the script...

But javascript.. It is a bit tricky sometimes. I have found that often a matter of a linebreak on the wrong location can already break the script..

Good to start on the script alone, without any PhP included, so you know it is a working start.

lila

Okeydoke, thanks. 🙂 This is direct from Chris's posting, not all the tags are there (head etc.). I left out all the explanations, I know you have the link.

<body onLoad="fillit(sel,entry)">
<div>Enter the first three letters of a street and select a match from the menu.</div>
<form><label>
Street
<input type="text" name="Street" id="entry" onKeyUp="findIt(sel,this)"><br>
  <select id="sel">
        <option value="s0001">Adams</option>
        <option value="s0002">Alder</option>
        <option value="s0003">Banner</option>
        <option value="s0004">Birchtree</option>
        <option value="s0005">Brook</option>
        <option value="s0007">Cooper</option>
<!--and so on and so forth-->
  </select></label>
</form>
</body>
</html>

var list = null;;
function fillit(sel,fld)
{
        var field = document.getElementByid(fld);
        var selobj = document.getElementById(sel);
        if(!list)
        {
                ar len = selobj.options.length;
                field.value = "";
                list = new Array();
                for(var i = 0;i < len;i++)
                {
                        list[i] = new Object();
                        list[i]["text"] = selobj.options[i].text;
                        list[i]["value"] = selobj.options[i].value;
                }
        }
        else
        {
            var op = document.createElement("option");
            var tmp = null;
            for(var i = 0;i < list.length;i++)
           {
                tmp = op.cloneNode(true);
                tmp.appendChild(document.createTextNode(list[i]["text"]));
                tmp.setAttribute("value",list[i]["value"]);
                selobj.appendChild(tmp)/*;*/
           }
        }
}
{
        var selobj = document.getElementById(sel);
        var d = document.getElementById("display");
        var len = list.length;
        if(field.value.length > 2)
        {
                if(!list)
                {
                        fillit(sel,field);
                }
                var op = document.createElement("option");
                selobj.options.length = 1
                var reg = new RegExp(field.value,"i");
                var tmp = null;
                var count = 0;
                var msg = "";
                for(var i = 0;i < len;i++)
                {
                        if(reg.test(list[i].text))
                        {
                                d.childNodes[0].nodeValue = msg;
                                tmp = op.cloneNode(true);
                                tmp.setAttribute("value",list[i].value);
                                tmp.appendChild(document.createTextNode(list[i].text));
                                selobj.appendChild(tmp);
                        }
                } 
        }
        else if(list && len > selobj.options.length)
        {
                selobj.selectedIndex = 0;
                fillit(sel,field);
        }
}

leatherback

Hi,

The first is easy:

in fillit:
line:
ar len = selobj.options.length;
should be:
var len = selobj.options.length;

LoganK

lila wrote:
I can, but leatherback advised against sending long JavaScripts, are you sure it's OK?
And if you have a sec, could you let me know if what I replied to your last question about my ghosts was what you needed? I noticed you hadn't replied to it. Which was one reason I asked it it was hopeless.

Forgot that leatherback says that...sometimes with everything else going on in my life, it's easy to forget previous things on a board 😃 I'll take a look back at the ghosts and post in that forum with some more info, if I can get any.

leatherback

Hi Lila,

Trie to find the second error. But ... No succes. It has to do with referencing to specific fieldnames, and the proper use of quotes. I hope that Logan will notice you already posted the javascript, even before logan told you to forget about muy posts. I am sure he is then capable of helping you out.

You should place the script between the <head></head> tags of your page, and include:

// scripts here

//-->
</script>

Around the script, for compatilibity.

LoganK

You made it sound like I was the bad guy, telling her to forget your post! 😃

Lila - are you getting the error when the page loads, and by chance are you using IE?

leatherback

Lila:

here is how I had it in the final stage. Perhaps it helps.. Time for me to get some work done on my project too...

Logan: The error is onload initially, and is caused by :

a typo in a var declaration (See earlier post)
Referencing to fieldnames when initializing scripts

As for you being the bad guy.. You did tell her to ignore my posts. And this IS a PHP forum mainly. so you decide.. 😃

lila

His bark is worse... etc. so now I've posted the JavaScript and he's found the first problem.

lila

1) I do have the head & script tags leatherback mentioned, they're just not in the original, copied here.
2) yes, IE6 and yes, it happens when the page loads.
3) I fixed the "ar", hope Logan can find something about referencing to filednames.