JavaScript list chooser + htlm form + php array?

lila · Jul 23, 2005

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 · Jul 24, 2005

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 · Jul 24, 2005

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 · Jul 24, 2005

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

J.

leatherback · Jul 24, 2005

btw: Did you have a look atthis page .

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

J.

LoganK · Jul 24, 2005

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 · Jul 24, 2005

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 · Jul 24, 2005

Allright. We'll wait here till you get back

lila · Jul 24, 2005

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 · Jul 24, 2005

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 · Jul 24, 2005

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 · Jul 24, 2005

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.

J

lila · Jul 24, 2005

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 · Jul 24, 2005

Hi,

The first is easy:

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

LoganK · Jul 24, 2005

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 · Jul 24, 2005

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.

J.

LoganK · Jul 24, 2005

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 · Jul 24, 2005

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

J.

lila · Jul 24, 2005

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

lila · Jul 24, 2005

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.

JavaScript list chooser + htlm form + php array?

Llila

LLoganK

Llila

Lleatherback

Lleatherback

LLoganK

Llila

LLoganK

Llila

LLoganK

Llila

Lleatherback

Llila

Lleatherback

LLoganK

Lleatherback

LLoganK

Lleatherback

Llila

Llila