Forums

I am creating a form with 2 select elements, 2 inputs and a div as shown in the attached image.

When the value of the first select (network) is changed, the 2nd select (data-bundle) populates with new values. And when an option in the 2nd select is chosen, the 2 inputs get populated with the price.

I have successfully done all this via their respective event tabs. However, I have 2 issues:

[list=]1. I can't get the div on the right(number 2 in the screenshot) to populate with anything. I need it to populate with the correct network image when the very first select (network) is chosen.

2. The form is a multipage form, but it doesn't persist the dynamically set data on page reload, or when the user tries to go back from the confirmation page (page 2). Only the very first select persists.[/list]

Thanks in advance for your help.

**Bump**

Hi mitey,

I think that both cases here need Custom JavaScript.

You'll need a function to run and load the image - I think you can fire this from the Events tab function option.

You also need to run some JavaScript to re-set the drop-down values when you re-load the form with existing values. Unfortunately ChronoForms isn't yet clever enough to do this automatically :-(

Bob

Thanks for your feedback GreyHead.

Unfortunately, I don't know enough of javascript to do as you have said. Do you mind helping out?

Thanks.

Hi mitey,

I don't really have time here to write your code for you.

if you post the details of the input ids you are using and where the image name/url is then I'll try to do something for you.

Bob

Hello, to make things faster, this is the barebones version of the necessary areas of the form:

<select id="network" name="network">
	<option value="n1">Network One</option>
	<option value="n2">Network Two</option>
	<option value="n3">Network Three</option>
</select>

<select id="data-bundle" name="data-bundle">
	<option value="b1">Bundle One</option>
	<option value="b2">Bundle Two</option>
	<option value="b3">Bundle Three</option>
</select>

<input id="price" placeholder="-Please select a bundle -"name="price" />

<input id="total" placeholder="-Please select a bundle -"name="total" />

All the above work perfectly fine except for losing the values dynamically generated on page reload.

The other part of the form is the image that is loaded when the 'network' select is changed. And this is the code for that:

<div id="network-img-container">
	<img src="images/n1.png" id="network-img" />
</div>

I have not been able to get this to reflect change as required though. And I also want this to be persisted on page reload.


Many thanks.

**Bump**

**Bump**