CMS Made Simple Forums

Posted: **Tue Jul 23, 2019 11:59 pm**

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.

Posted: **Sat Jul 27, 2019 1:26 am**

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...

Posted: **Tue Jul 30, 2019 2:03 am**

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).

Posted: **Tue Jul 30, 2019 2:20 am**

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.

Posted: **Wed Jul 31, 2019 10:55 pm**

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.

Posted: **Thu Aug 01, 2019 4:39 am**

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.

CMS Made Simple Forums

Field errors when customizing the form builder

Field errors when customizing the form builder

Re: Field errors when customizing the form builder

Re: Field errors when customizing the form builder

Re: Field errors when customizing the form builder

Re: Field errors when customizing the form builder

Re: Field errors when customizing the form builder