Page 1 of 2

Really easy question about forms

Posted: Mon Apr 12, 2004 5:47 pm
by Chris Corbyn
Hi,

Just wondering how you can get a page to respond to selections in a select (drop down) box in a form without even having to click the submit button but still send the form data when the button is eventually clicked?

I basically want the page with the form on it to dislpay different things when certain selections are made.

Thanks

Posted: Mon Apr 12, 2004 6:52 pm
by SilverMist
Like when a person goes to country, then canada, and when canada is clicked, a list of provinces appears?

Posted: Mon Apr 12, 2004 6:53 pm
by andre_c
That's done with javascript.

something like this:

Code: Select all

<script>
function update() {
  alert(document.form['test_form'].test.value);
}
<script>

<form name='test_form'>
    <select name='test' onchange='update()'>
        <option value='test1'>Test 1</option>
        <option value='test2'>Test 2</option>
    </select>
</form>
when the user changes the dropdown menu the javascript function update() is called. You have to define the function though.

Posted: Mon Apr 12, 2004 6:58 pm
by Chris Corbyn
Like when a person goes to country, then canada, and when canada is clicked, a list of provinces appears?
Kind of yeah, but not even as complicated as that.

Just to echo a word onto the page. For example, my form is for downloading polyphonic ringtones. But there are several formats available so there is a select box to choose the format.

All I want to do is to echo a word such as "Midi" or "SMAF" somewhere on the page when the selection is chosen.

I'll also be displaying the filesize but if I know how to make the page respond to actions on the form then I'll be able to sort that out anyway.

I used to have a separate page for each format but it was too confusing and a waste of server space so since I have every ringtone available in all formats I figured this method would be easier.

Posted: Mon Apr 12, 2004 7:00 pm
by andre_c
using the code above do:

Code: Select all

<script>
function update() {
  document.getElementById('selection').innerHTML= document.forms['test_form'].test.value;
}
</script>

<span id='selection'>None yet</span>

<form name='test_form'>
    <select name='test' onchange='update()'>
        <option value='test1'>Test 1</option>
        <option value='test2'>Test 2</option>
    </select>
</form>
Edited: changed form['test_form'] to forms['test_form']

Posted: Mon Apr 12, 2004 7:12 pm
by Chris Corbyn
I just tried that code in a little test page I made but it doesn't seem to work.

It just displays a page with "Not Yet" at the top and then below it is a select box with "Test 1" and "Test 2" but when either of them is selected nothing happens.

Am I just being a dunce or is this code not correct?

Thanks :-)

Posted: Mon Apr 12, 2004 7:18 pm
by andre_c
my bad, it shoud say forms['test_form'] instead of form['test_form']. I will edit the post.

Posted: Mon Apr 12, 2004 7:21 pm
by Chris Corbyn
You beauty!

If I could reach across the Atlantic to Salt Lake I'd shake your hand :-)

Clever stuff, works even better than I hoped.

Thanks

Posted: Mon Apr 12, 2004 7:22 pm
by andre_c
:D :D :D

Posted: Mon Apr 12, 2004 11:43 pm
by Chris Corbyn
The JavaScript idea was working very well until....

I needed to do more than just echo a string onto the page.

I needed to use the php function filesize(); to get a filesize and then somehow get JavaScript to print whatever this value was. It's virtually impossible I think.

Is there no other way of sending information about selections in a select box instantly using some kind of hidden submit in each option tag?

What's happening in other peoples scripts when the page seems to refresh for a moment with new info on the page?

Thanks

Posted: Tue Apr 13, 2004 7:47 am
by magicrobotmonkey
You could do it all before hand - that is, store filesizes in the DBase and use PHP to build two arrays, one with file name and one with file size. Use your update fxn to find the file name and display the corresponding file size. Its not pretty but it works.


Another option is to add a self redirect into your update and pass the selected file name then you can use php to look it up easily.

Posted: Tue Apr 13, 2004 9:40 am
by Chris Corbyn
Can you open php tags and jump into php mode just to echo some string into the script whilst you're inside your <script> tags???

That would solve everything. I dont see why it shouldn't work. I'll have a go..... actually on second thoughts, even if you can do that it may not work since I need if else statements depending upon user input on client side. Hmmmmm

Thanks

Posted: Tue Apr 13, 2004 9:47 am
by Chris Corbyn
Yes it would work if I could switch to php in the middle of my <script></script> tags because I would just make the if else statements in the JavaScript and change the php for each of these to suit.

Posted: Tue Apr 13, 2004 9:49 am
by magicrobotmonkey
yea of course you can do that! thats the beauty of it all

Posted: Tue Apr 13, 2004 9:52 am
by Chris Corbyn
I'm just checking it out on a little test page but the JavaScript seems to ignore the php. Here's the way I'm trying it below:

Code: Select all

<script> 
function update() &#123; 
  document.getElementById('selection').innerHTML= <?php echo "Somestring"; ?>; 
&#125; 
</script> 

<span id='selection'>None yet</span> 

<form name='test_form'> 
    <select name='test' onchange='update()'> 
        <option value='test1'>Test 1</option> 
        <option value='test2'>Test 2</option> 
    </select> 
</form>
Do I need to escape to php a little differently to the way I'm doing it?