Form Help - moved from the wrong board to here

[delvin]

Ok 1st off thank you for all the help so far with this problem. 1st posted on Dynamic Drive scripts help in error.

Ok the code you have given me to use

<img src="image1.jpg" onclick="document.getElementById('imgcode').value='GSA01';"/>
<img src="image2.jpg" onclick="document.getElementById('imgcode').value='GSA02';"/>
<!-- ... more images ... -->
<form action="pagey.cgi">
<select id="imgcode">
<option value="GSA01">First image</option>
<option value="GSA02">Second image</option>
<!-- ... more options ... -->
</select>
</form>

1st Can i just clarify something for myself to get around my inherrent dumbness the image src="image1.jpg" I assume that should be the full src of the image so as example should read
<image src="../../Images/Dogs/Hounds/afghan 1.jpg" onclick="document.getElementById('imgcode').value='AFG01';"/>

Now, for my specific questions.
1.On the page where the form is found is it possible that when you select this particular selection box either by clicking in it or tabbing in from the previous box, that it will automatically take you to the page where people start to select the image from. There will be several pages of images for form fillers to navigate in order to make their final choice of image

2. Do i have to make the images dynamic in some way so they are clickable

3. There are lots of forms for the people to chose if they complete them or not including others that will use image selection, some from the same range of images; so how does the program determine which selection box in which form it needs to place the imgcode value or does some more code need to be added to the above.

Many many thanks for all your help

[Twey]

Of course, it should be the source of the image. Obviously I didn't know what this was at the time of writing so I used "image1.jpg" as an example.

1.On the page where the form is found is it possible that when you select this particular selection box either by clicking in it or tabbing in from the previous box, that it will automatically take you to the page where people start to select the image from. There will be several pages of images for form fillers to navigate in order to make their final choice of image

It is possible, but I don't recommend it. If you have many pictures, to save time (though it will be a slow-loading page!) I recommend you use something like the DD Switch Content Script on a single page, so as to avoid many forms. Also, the user will probably be surprised and rather annoyed if they try to select something from a list and find themselves suddenly dumped into another page.

2. Do i have to make the images dynamic in some way so they are clickable

No, all you need to make something clickable is the onclick= event handler, which I included. On a side note, this will give no indication to the user that it does anything, so you might want to add somewhere "click the image to select it" or something along hose lines.

3. There are lots of forms for the people to chose if they complete them or not including others that will use image selection, some from the same range of images; so how does the program determine which selection box in which form it needs to place the imgcode value or does some more code need to be added to the above.

I may have misunderstood you here, but the above code uses the <select> element with an ID of "imgcode." There should only be one of these. If you want different forms as well, and they are on the same page, you should change the ID of imgcode and replace it in the scripts accordingly.

[delvin]

OK, Here is the full details of the problem i have, I was a bit concerned about going into details but on advice from Twey I am posting in full here for everyone to try and work on / help with. Any advice will be very gratefully received.

My mum embroiders designs for clubs and people onto things like towels and stuff. After many years of doing commission work and dog shows and things she has asked me to set her up a website so she can take things online. I didnt want to go into to many details on the forum because I didnt want to appear as if i was trying to advertise a business - I'm not, its purely a case of trying to help out my mum.

Basically, when people find the item they want in the catalogue they have selection boxes for size, colour and the one i have yet to put on for the motif they want on the item and this is where i am having the problem. I thought of just giving them a button to browse the motif library and then they could make a note of the motif code, return to the item and then the selection box could either be a text box or a roll over selection menu allowing them to navigate to the motif they wanted, but thought either of these would be cumbersome and not user friendly, hence my thoughts on being able to select the image directly and the correct code then being input into the correct selection box on the correct item. i dont know if this could be done with cookies or what.

Basically my knowledge of html, java and so on is limited. This is the 1st time i have tried to set up a serious website.

if it helps the url to the website is http://www.quite-contrary.co.uk and the start of the motifs selection can be found on http://www.quite-contrary.co.uk/motifslink

I really hope you will be able to help me solve this problem and many many thanks in advance for any further advice you might be able to offer.

Tim

[delvin]

Hi

Just a thought i had, I remember someone saying that you could run selections of a database. Would this be a way to solve this problem ie a rollover list of the motifs available and if you click on the item it takes you to the page showing the motif, if you like it then click and it returns you to the form with the selected code inserted in the form selection box.

If this would work then does anyone have any idea how I would do this.

Many Thanks

[delvin]

Can anyone at all - teachers, professors admin, students think of a way around this?

I know it should be able to be done. I just dont know how

All help will be very very much appreciated

[mwinter]

I really hope you will be able to help me solve this problem and many many thanks in advance for any further advice you might be able to offer.

I'm really not clear about what the 'problem' is. You seem to want to provide a method for users to conveniently choose from a large set of items (so a select element is out of the question) so they can form an order. If this is the case, then it would need to be integrated into whatever order management system you seem to have planned (unless you want the user to do it manually), and now we're looking at a full-blown system. I don't know how comfortable I would be participating in that - finance-related systems make me somewhat nervous, considering the responsibility involved. For what it's worth (and I do feel like I'm stating the obvious), it seems to me you'd need to partition the process, and deal with the various stages independently.

A user starts by choosing an item of clothing and the relative information (colour, size, etc.). This selection is then committed to storage pending completion of the rest of the order. The user should be able to go back and edit the information, but other than that it's left alone for the time being.

The next step is choosing the motif, and you could permit this in various ways. Perhaps the most obvious would be to take the route used by other online retailers: show a list of general categories alongside popular or random selections. The categories can be presented as galleries (don't make them too large), and might end with scale photos of a specific motif.

Once the user has selected the design, it's added to rest of the order. You can now proceed with the typical order process (confirm/edit order, continue browsing/checkout, etc.).


On a separate note, you really need to edit your images, and either drastically reduce those animations or dump them altogether. 300KB GIFs are not good for a commercial site, and my rather capable machine has trouble rendering in Firefox. You should never make the browser shrink images - not only do they all to a terrible job (they use pixel resizing techniques for speed), but you're making the user download data that's going to be lost during the resize anyway.

Mike

[delvin]

Many thanks Mike. Will keep working at it and see how it comes along