Field errors when customizing the form builder

[InvaderNat]

Having some issues customizing the form builder for my work site. Basically I have a contact form with fields that change an image based on which option is selected.

I have managed to get this working with a basic dropdown menu field (see the preview section to the right of the page below).
https://www.pacifichelmets.com/index.ph ... uest-quote

However I cannot seem to integrate this functionality with a working contact form (see "Shell Colour" field at left), as the "<select>" fields seem to be creating a double up; which obviously breaks the field. For reference I basically added the same code into the contact field's "JavaScript for field:" area via the "Advanced Settings" tab.

I'm not very good with javascript so my code is basically just a reworked version what I've been able to find online:

contact form

Code: Select all

<form method="" action="" name="myForm">
    <select name="switch" onchange="switchImage();">
        <option value="1">White</option>
        <option value="2">Red</option>
        <option value="3">Rescue Blue</option>
        <option value="4">Black</option>
        <option value="5">Fluorescent Lime</option>
        <option value="6">Helmet Orange</option>
        <option value="7">Daisy Yellow</option>
    </select>
</form>

image to switch

Code: Select all

<img src="img/structural/F15/F15-3-Shell-1.png" width="561" height="470" name="myImage" />

javascript

Code: Select all

{literal}
<__script__>
// This is the code to preload the images
var imageList = Array();
for (var i = 1; i <= 7; i++) {
    imageList[i] = new Image(70, 70);
    imageList[i].src = "img/structural/F15/F15-3-Shell-" + i + ".png";
}

function switchImage() {
    var selectedImage = document.myForm.switch.options[document.myForm.switch.selectedIndex].value;
    document.myImage.src = imageList[selectedImage].src;
}
</__script>
{/literal}

Would greatly appreciate it if someone could help solve this.

[Dr.CSS]

First, I would be using Products module for something like this...

Second, you are missing some html entities in the form which are making it not function properly I think...
<select class="cms_dropdown" name="m7cc2bfbrp__57"> <form method="" action="" name="myForm">
AND...
</form> <id="myForm">

I can see id="myForm"> on the page...

[InvaderNat]

From my understanding, products module is for eCommerce right? I don't need to sell anything however. Just to get various image layers to display on top of each other; thus 'building' a customized image of the product.

I know the code displays incorrectly at the moment (obviously), but I also know it does function in the way I need it to when outside of the form builder. It's the integration with form builder that I can't figure out (if this is possible at all).

[InvaderNat]

Not super familiar with CMSMS, but isn't the products module for eCommerce? I don't need to sell anything on the site I just need to display a unique image for each field option.

The coding does work on it's own (See the "<-- How it should work -->" section), I just can't figure out how to integrate it into the form builder.

[DIGI3]

I would suggest NOT integrating it into formbuilder. As long as everything has an ID, you can target it with js/jquery from outside the form. Put the script in your page template.

That said, you should be able to add the onchange="function" into the javascript area for the field, just don't try to put the whole script in there, that's not what it's for.

[InvaderNat]

Thanks for the reply, I'm getting the impression it would probably be easier to have the code outside of the form builder too. However how exactly would I target it using ID's?

My coding skills aren't great in this area, so any examples you could write to get me started would be great.