Combo Box Image Selector in hronoforms

Hello,

can anyone help me please. I need to input combo box image selector like in here: http://www.javascriptkit.com/script/cut174.shtml

How to do it in hronoforms?

I would be very thankful, because I realy need help here, I'v tried to solve this problem for a 3 weeks now.:S

Hi dezigner,

Put the script from Step1 into the JavaScript box on the Form HTML tab - but leave out the <script> tags

Put the script from Step 2 in the Form HTML box on the same tab - but leave out the <form> tags from the middle.

Make the changes to the script to add your image links.

In the JavaScript replace 'mygallery' each time it appears with the ChronoForms form name which will be something like 'ChronoContact_myformname'

Save the form and test it.

Bob

Thanks Bob, I'll try and let u know about, but there is a problem when I was trying to make same form like here: http://www.autobest.lt/lt/rezervacija/, how to put averyhing in two columns?

Hi dezigner,

Use a table to put things in two Or more) columns:

<table><tr>
<td>Column 1</td>
<td>Column 2</td>
</tr></table>

Bob

Hi bob.. well it didn't worked form me.. I put this code to Form HTML:

<select name="picture" size="1" onchange="showimage()">
 <option>Pasirinkite tipą</option>
 <option value="images/stories/logo.png">Test</option>
 <option value="images/stories/logo.png">test2</option>
 <option value="images/stories/logo.png">test3</option>
 </select>
 </p>
 </td>
 </tr>
 <tr></tr>
 </table></td>
 <td width="84"><img src="" name="pictures" width="20" height="20" id="pictures"/></td>
 </tr>
</table>
<table width=61% cellpadding=2 cellspacing=0 border=0>
 <tr><td width="13%"><strong>Paėmimas</strong></td>
 <td width="37%"><div align="left"></div></td>
 <td width="13%"><strong>Gražinimas</strong></td>
 </tr>
 <tr>
 <td>Data*</td>
 <td>
 <select name="metai" id="metai">
 <option value="2008">2008</option>
 <option value="2009">2009</option>
 <option value="2010">2010</option>
 <option value="2011">2011</option>
 <option value="2012">2012</option>
 </select>
 <select name="menuo" id="menuo">
 <option value="sausis">Sausis</option>
 <option value="vasaris">Vasaris</option>
 <option value="kovas">Kovas</option>
 <option value="balandis">Balandis</option>
 <option value="geguzis">Gegužis</option>
 <option value="birzelis">Birželis</option>
 <option value="liepa">Liepa</option>
 <option value="rugpjutis">Rugpjūtis</option>
 <option value="rugsejis">Rugsėjis</option>
 <option value="spalis">Spalis</option>
 <option value="lapkritis">Lapkritis</option>
 <option value="gruodis">Gruodis</option>
 </select>
 <select name="diena" id="diena">
 <option value="01">01</option>
. . .
 <option value="31">31</option>
 </select>
</td>
 <td>Data* </td>
 <td width="37%">
 <select name="metai3" id="metai3">
 <option value="2008">2008</option>
 <option value="2009">2009</option>
 <option value="2010">2010</option>
 <option value="2011">2011</option>
 <option value="2012">2012</option>
 </select>
 <select name="menuo3" id="menuo3">
 <option value="sausis">Sausis</option>
 <option value="vasaris">Vasaris</option>
 <option value="kovas">Kovas</option>
 <option value="balandis">Balandis</option>
 <option value="geguzis">Gegužis</option>
 <option value="birzelis">Birželis</option>
 <option value="liepa">Liepa</option>
 <option value="rugpjutis">Rugpjūtis</option>
 <option value="rugsejis">Rugsėjis</option>
 <option value="spalis">Spalis</option>
 <option value="lapkritis">Lapkritis</option>
 <option value="gruodis">Gruodis</option>
 </select>
 <select name="diena3" id="diena3">
 <option value="01">01</option>
. . .
 <option value="31">31</option>
 </select>
</td>
 </tr>
 <tr>
 <td>Laikas*</td>
 <td>
 <select name="paemimo_laikas" id="paemimo_laikas">
. . .
 <option value="10:00" selected=10:00</option>
. . .
 <option value="23:45" >23:45</option>
 </select>
 </label>
 </td>
 <td>Laikas*</td>
 <td>
 <label>
 <select name="atidavimo_laikas2" id="paemimo_laikas2">
 <option value="00:00" >00:00</option>
. . .
 <option value="10:00" selected="selected">10:00</option>
. . .
 <option value="23:45" >23:45</option>
 </select>
 </td>
 </tr>
 <tr>

 <td>Vieta*</td>
 <td>
 <input type="text" name="paemimo_vieta" id="paemimo_vieta" />
 </td>
 <td>Vieta*</td>
 <td>
 <input type="text" name="paemimo_vieta2" id="paemimo_vieta2" />
 </td>
 </tr>
 <tr>
 <td>Adresas*</td>

 <td>
 <label>
 <input type="text" name="paemimo_adresas" id="paemimo_adresas" />
 </label>
 </td>
 <td>Adresas*</td>
 <td>
 <input type="text" name="paemimo_adresas2" id="paemimo_adresas2" />
 </td>
 </tr>
 <input type="submit" name="siusti" id="siusti" value="Submit" />

and this to Form JavaScript:

function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.ChronoForm_form.picture.options[document.ChronoForm_form.picture.selectedIndex].value
}

how can i make this form work?

[[>> I simplified the HTML for clarity and removed some tags and options : Greyhead <<]]

Hi dezigner,

What's the problem with it?
The HTML is a mess with all kinds of tags missing. But apart from that it looks OK.
The form appears in two columns.

The JavaScript hasn't got the form name in it. See my earlier post:

In the JavaScript replace 'mygallery' each time it appears with
the ChronoForms form name which will be something like 'ChronoContact_myformname'

Bob

Hi Bob,

i'm working on html tags now, but dont really understand whats wrong in java script, where the name of JS shoud appear in script?

Sorry for stupid question...

Hi dezigner,

The code that needs to go in the JavaScript box is this

/*Combo Box Image Selector:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

function linkrotate(which){
var mylinks=new Array()
//add in more links if you want (ie:mylinks[3]=...)
mylinks[0]="http://www.abcnews.com"
mylinks[1]="http://www.cnn.com"
mylinks[2]="http://www.geocities.com"

window.location=mylinks[which]
}


function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}

(NB no script tags). But in here the form is identified as 'mygallery' in several places, for example document.mygallery.picture.

These need to be replaced with the name that ChronoForms gives your form which will be something like 'ChronoContact_myformname'

Bob