Page 1 of 2

Create simple multiple option list which displays predefined

Posted: Thu Sep 17, 2009 8:01 am
by ianpow
Hi, I am new to php so please forgive in advance my basic request!

I have a project for work where I need to provide a list of around 20 items, which when selected (must be able to select multiple options) will display a corresponding piece of text, either on the same page or in a new window.

ie. list would contain apples, pears, oranges, bannanas. If apples and oranges where seleced then when the user hits SUBMIT, the text would display "an apple a day keeps the doctor away" and "Oranges taste nice with vodka". The text would either be contained in the same code or in a seperate .txt, .xml file etc.

The aim is to develop a simple tool for sales people where they select a range of defined customer needs and the tool returns a corresponding list of our products "value statements" with perhaps a link under each piece of text to take them to further product info.

Any help would be greatly appreciated as my deadline is looming fast and I am in a blackhole on this! ;-)

Re: Create simple multiple option list which displays predefined

Posted: Thu Sep 17, 2009 9:47 am
by jackpf
Hmm....you haven't really asked a specific question...so I'll just point you to this ;)

http://www.tizag.com/phpT/forms.php

Re: Create simple multiple option list which displays predefined

Posted: Fri Sep 18, 2009 5:55 am
by ianpow
Hi jackpf,

I need the form to allow me to select multiple options i.e. paint and brushes, rather than paint or brushes. All I need to do after that is return a piece of text for each selected option i.e. User selects paint and brushes from the drop down and the next page displays 2 lines of text, one relating to paint and one relating to brushes.

i.e. User selects paint and brushes and the next screen shows

PAINT: Our paint is made from led free materials
BRUSHES: All our brushes are made from 100% horse hair

This would need to work for up to 20 selected items

In the tizag example it only allows for a single item to be selected and returns the same text for each item with the inclusion of the item name and the quantity.

I need a complete code for the form and the php part -

Many thanks for taking time to help out with this.

Ian

Re: Create simple multiple option list which displays predefined

Posted: Fri Sep 18, 2009 7:13 am
by Ollie Saunders
Try running this example:

Code: Select all

<?php if (!empty($_GET)) { var_dump($_GET); } ?>
<form method="GET" action="?">
  <select multiple="multiple" size="3" name="fruit">
    <option value="1">Apple</option>
    <option value="2">Orange</option>
    <option value="3">Grapefruit</option>
    <option value="4">Plum</option>
    <option value="5">Raspberry</option>
  </select>
  <input type="submit" name="submit" />
</form>

Re: Create simple multiple option list which displays predefined

Posted: Fri Sep 18, 2009 7:19 am
by jackpf
Ooooooh I see :)

Yeah, if you have a <select> box, if you put <select multiple="multiple">, if you hold CTRL, you can select multiple options.

I'm sure of the semantics...(I can't test since I'm at school), but I think you have to postfix the select's name with two square brackets "[]", PHP will put the selected elements into an array.

It's something like that anyway. You can then use a foreach() loop to display the text for each selected option.

Just have a play really. If you can't figure it out, post back and I'll have a go tonight :)

EDIT
Yeah, like Ollie Saunders' example :) didn't see that lol

Re: Create simple multiple option list which displays predefined

Posted: Fri Sep 18, 2009 7:56 am
by Ollie Saunders
I'm sure of the semantics...(I can't test since I'm at school), but I think you have to postfix the select's name with two square brackets "[]", PHP will put the selected elements into an array.
You'd only need to do that if you have more than one multiple select field with the same name; basically never, for multiple selects.

Re: Create simple multiple option list which displays predefined

Posted: Fri Sep 18, 2009 9:30 am
by jackpf
Oh right, I couldn't remember.

Nice one :roll:

Re: Create simple multiple option list which displays predefined

Posted: Fri Sep 18, 2009 10:10 am
by ianpow
Thanks for this guys, so now I am struggling with the foreach part. I went through the tutorial but am still lost. Where do I include the foreach arrray, before, after, inside the form tags? I found something close to what I am lookign for in Javascript (below). It doesnt quite work but maybe gives a base to work from. You select an option and it populates the adjacent text box with the option chosen (would still need to change this to populate with different text). It lets you select multiple options but only sends the first one to the box, bit of a bug.

Old bit of code from 2003 so I know there must be a better way to do it in PHP!

Code: Select all

 
<html>
<head>
</head>
<body>
<script>
 
my_arr = new Array();
 
function do_stuff(what) {
var val = what.my_drop.options[what.my_drop.selectedIndex].innerHTML;
what.my_txt.innerHTML += val;
my_arr[my_arr.length] = val;
}
 
</script>
 
<form>
 
<select multiple="multiple" name="my_drop">
<option value="1">Apple</option>
<option value="2">Pear</option>
<option value="3">Orange</option>
<option value="4">Bannana</option>
<option value="5">Kiwi</option>
<option value="6"></option>
</select>
 
<textarea name="my_txt" style="width: 500px; height: 300px;"></textarea>
 
<input type="button" value="Go" onclick="do_stuff(this.form);">
 
</form>
</body>
</html>
 

Re: Create simple multiple option list which displays predefined

Posted: Fri Sep 18, 2009 11:50 am
by jackpf
Hey...I'm at home now, so I decided to have a crack. I don't normally just "write code" for people...but I found your problem intriguing :)

So anyway, here's my attempt:

Code: Select all

<script>    var display = {        text: {            a: 'you selected a',            b: 'you selected b',            c: 'you selected c',        },        options: new Array(),        update: function()        {            var options = document.forms['formid'].selectName.options;                        this.options = new Array();                        for(var i = 0; i < options.length; i++)            {                if(options[i].selected)                {                    this.options[this.options.length] = this.text[options[i].value];                }            }                        var _display = document.getElementById('display');                        _display.innerHTML = null;                        for(i = 0; i < this.options.length; i++)            {                _display.innerHTML += this.options[i]+'<br />';            }        }    }</script> <form id="formid">    <select name="selectName" multiple="true">        <option value="a">a</option>        <option value="b">b</option>        <option value="c">c</option>    </select>        <input type="button" onclick="display.update();" value="blah" /></form> <div id="display"></div>
If you don't (and want to) know how it works I'd be happy to explain.

Regards,
Jack.

Re: Create simple multiple option list which displays predefined

Posted: Fri Sep 18, 2009 1:31 pm
by Ollie Saunders
jackpf's solution is done on the client-side. You could also do it on the server-side (requiring only a onchange="this.form.submit()" on the select field), if you wished.

Re: Create simple multiple option list which displays predefined

Posted: Fri Sep 18, 2009 2:11 pm
by jackpf
Javascript is better for this kind of thing imo :D

Re: Create simple multiple option list which displays predefined

Posted: Fri Sep 18, 2009 2:45 pm
by Ollie Saunders
JavaScript gives a better user experience, no doubt. But if you're not very confident with JavaScript you might not want to have to maintain JS code when you could do it in PHP. Also a PHP implementation is probably slightly simpler even if you are confident with JS. I value simplicity a lot.

Re: Create simple multiple option list which displays predefined

Posted: Fri Sep 18, 2009 3:22 pm
by Ollie Saunders
I thought I'd explain the difference between JS and PHP, as I wasn't sure OP really understood it. Here it is: -

PHP generates HTML on its way out to the browser. Once that HTML has been sent to the browser, you can't get it back or change it. The only way it can change is by having the browser request a new page (usually with a link follow or a form submission) so that the whole process begins again. JavaScript, on the other hand, can make changes to a page once it is sent but can't do the things PHP can on the server, such as querying a database or using files.

Re: Create simple multiple option list which displays predefined

Posted: Mon Sep 21, 2009 5:03 am
by ianpow
Jack, this is great! Thanks very much for taking the time to help out. I've played around with this and got it looking pretty cool on the page.

Only slight issue is that it runs great in Firefox but the submit button doesn't do anything in IE7 (the version all the users are locked down with in my office). Also tried IE8 and same story :-(

Any thoughts?

Re: Create simple multiple option list which displays predefined

Posted: Mon Sep 21, 2009 5:43 am
by jackpf
:x stupid IE. I only tested it in Firefox.

Umm...is there an error message? Like...do you get that little yellow thing in the bottom left corner when you click the button?