Having trouble with me on click

[theremotedr]

Here are 2 pages for example,
#1 http://www.theremotedoctor.co.uk/accaudi.html
#2 http://www.theremotedoctor.co.uk/facporsche.html

I am trying to self populate a form with a part number when the order button has been clicked.
The problem i am having is that i can only fetch one part number even if say 2,3 or 4 are available.

Example.
If you visit #1 link above you will see there is only 1 selectable item " Flip remote key pad"
When selected the image is then shown.
Click on Order & the form appears with the part number inserted Audi002

If you now visit #2 link above you will see there are 2 selectable items "Shell case 2 button & Shell case 3 button"
Do the same again in respect of viewing & order and no matter which you select you will see that only part number Porsche001 has been inserted.

This is the code that i have inserted but i do not know how to add/edit it for the second selectable item

<a href="http://form.jotformeu.com/form/50907214204344?partNumber=Porsche001" target="_new">

Thanks

[jscheuer1]

The main problem seems to be that btnOrder2 is not the button that is seen on the page and is clicked to summon the form. In my suggested solution (works in limited testing) I select the actual link/button. I also employ a shortcut - accessing the link's search property instead of its entire href in order to get the desired result.

Change:

        function replaceMainImage(imgSrc, partNumber) {

            $('#btnOrder2').attr('href', url + partNumber)
            $('#mainImage').attr('src', imgSrc)
            $('#mainImage').addClass('img-border');
        }

to:

	function replaceMainImage(imgSrc, partNumber) {

            $('#content a').get(0).search = 'partNumber=' + partNumber;
            $('#mainImage').attr('src', imgSrc);
            $('#mainImage').addClass('img-border');
        }

Using the entire href is probably fine if you still want to. The main issue is selecting and changing the correct a tag - the one that's actually used.

[theremotedr]

Now works perfect,thanks very much.
Maybe you can also advise an edit for this.
If no selection is made and you just click on order the form opens up and the part number section is blank.
Can you advise how to disable this happening,in respect of clicking the order button & maybe show "please make selection" etc

[jscheuer1]

That's easy, do two things. On the page with the parts change:

<!-- content area -->    
                <section id="content">                <img src="m-images/dr-logo.jpg" id="mainImage"  />
<a href="http://form.jotformeu.com/form/50907214204344?partNumber=Porsche001" target="_new">                <img src="m-images/order-button.jpg" width="287" height="92" alt="Order Button" class="border"/></a>
                <img src="m-images/info-button.jpg" alt="logo" width="287" height="92" class="border"></a>
                </section>
<!-- #end content area -->

to (remove red):

<!-- content area -->    
                <section id="content">                <img src="m-images/dr-logo.jpg" id="mainImage"  />
<a href="http://form.jotformeu.com/form/50907214204344" target="_new">                <img src="m-images/order-button.jpg" width="287" height="92" alt="Order Button" class="border"/></a>
                <img src="m-images/info-button.jpg" alt="logo" width="287" height="92" class="border"></a>
                </section>
<!-- #end content area -->

Then, on the form page, add the red:

        <div id="cid_9" class="form-input-wide jf-required">
          <select class="form-dropdown validate[required]" style="width:150px" id="input_9" name="q9_partNumber">
            <option value="">Please Select</option>
            <option value="Audi001"> Audi001 </option>
            <option value="Audi002"> Audi002 </option>
            <option value="Bmw001"> Bmw001 </option>
            <option value="Bmw0 . . .

[theremotedr]

Spot on,thanks