Hi to all guys,
I'm new on this forum and in ChronoForms using.
I am currently trying to display a radio button fields (2 group of radio) dependent on the users selection in the previous drop down list.
I read other posts in this forum but I don't understand what I have to do.
I have this dropdown list:
When user chooses these value ("2013, DEC 23-30", "2013, DEC 30-JAN 06", "2014, JAN 6-13", "2014, APR 14-21", "2014, APR 21-28"), I would that page shows automatically a radio button field; otherwise, when user chooses the other values, page'd show automatically another radio button field.
How can I do it?
Considering my lack of experience with Chronoforms, can you explain the solution as if I were a child? 🤣
Thank you!!!
I'm new on this forum and in ChronoForms using.
I am currently trying to display a radio button fields (2 group of radio) dependent on the users selection in the previous drop down list.
I read other posts in this forum but I don't understand what I have to do.
I have this dropdown list:
<select size="1" class=" validate['required']" title="" name="date_txt">
<option value="">choose a date</option>
<option value="2013, NOV 18-25">2013, NOV 18-25</option>
<option value="2013, NOV 25-DEC 2">2013, NOV 25-DEC 2</option>
<option value="2013, DEC 2-9">2013, DEC 2-9</option>
<option value="2013, DEC 9-16">2013, DEC 9-16</option>
<option value="2013, DEC 16-23">2013, DEC 16-23</option>
<option value="2013, DEC 23-30">2013, DEC 23-30</option>
<option value="2013, DEC 30-JAN 06">2013, DEC 30-JAN 06</option>
<option value="2014, JAN 6-13">2014, JAN 6-13</option>
<option value="2014, JAN 13-20">2014, JAN 13-20</option>
<option value="2014, JAN 20-27">2014, JAN 20-27</option>
<option value="2014, JAN 27-FEB 3">2014, JAN 27-FEB 3</option>
<option value="2014, FEB 3-10">2014, FEB 3-10</option>
<option value="2014, FEB 10-17">2014, FEB 10-17</option>
<option value="2014, FEB 17-24">2014, FEB 17-24</option>
<option value="2014, FEB 24-MAR 3">2014, FEB 24-MAR 3</option>
<option value="2014, MAR 3-10">2014, MAR 3-10</option>
<option value="2014, MAR 10-17">2014, MAR 10-17</option>
<option value="2014, MAR 17-24">2014, MAR 17-24</option>
<option value="2014, MAR 24-31">2014, MAR 24-31</option>
<option value="2014, MAR 31-APR 7">2014, MAR 31-APR 7</option>
<option value="2014, APR 7-14">2014, APR 7-14</option>
<option value="2014, APR 14-21">2014, APR 14-21</option>
<option value="2014, APR 21-28">2014, APR 21-28</option>
<option value="2014, APR 28-MAY 5">2014, APR 28-MAY 5</option>
<option value="2014, MAY 5-12">2014, MAY 5-12</option>
</select>When user chooses these value ("2013, DEC 23-30", "2013, DEC 30-JAN 06", "2014, JAN 6-13", "2014, APR 14-21", "2014, APR 21-28"), I would that page shows automatically a radio button field; otherwise, when user chooses the other values, page'd show automatically another radio button field.
How can I do it?
Considering my lack of experience with Chronoforms, can you explain the solution as if I were a child? 🤣
Thank you!!!
Updating in progress...
For now, I created form code as this:
I'm tryng to create JS code to achieve my target...it's too hard for now, if you have some advice for me...you're welcome!🙂
For now, I created form code as this:
<div class="ccms_form_element cfdiv_select" id="date_txt1_container_div" style="">
<label>* Available Retreats</label>
<select size="1" class=" validate['required']" title="" name="date_txt">
<option value="">choose a date</option>
<option value="2013, NOV 18-25">2013, NOV 18-25</option>
<option value="2013, NOV 25-DEC 2">2013, NOV 25-DEC 2</option>
<option value="2013, DEC 2-9">2013, DEC 2-9</option>
<option value="2013, DEC 9-16">2013, DEC 9-16</option>
<option value="2013, DEC 16-23">2013, DEC 16-23</option>
<option value="2013, DEC 23-30">2013, DEC 23-30</option>
<option value="2013, DEC 30-JAN 06">2013, DEC 30-JAN 06</option>
<option value="2014, JAN 6-13">2014, JAN 6-13</option>
<option value="2014, JAN 13-20">2014, JAN 13-20</option>
<option value="2014, JAN 20-27">2014, JAN 20-27</option>
<option value="2014, JAN 27-FEB 3">2014, JAN 27-FEB 3</option>
<option value="2014, FEB 3-10">2014, FEB 3-10</option>
<option value="2014, FEB 10-17">2014, FEB 10-17</option>
<option value="2014, FEB 17-24">2014, FEB 17-24</option>
<option value="2014, FEB 24-MAR 3">2014, FEB 24-MAR 3</option>
<option value="2014, MAR 3-10">2014, MAR 3-10</option>
<option value="2014, MAR 10-17">2014, MAR 10-17</option>
<option value="2014, MAR 17-24">2014, MAR 17-24</option>
<option value="2014, MAR 24-31">2014, MAR 24-31</option>
<option value="2014, MAR 31-APR 7">2014, MAR 31-APR 7</option>
<option value="2014, APR 7-14">2014, APR 7-14</option>
<option value="2014, APR 14-21">2014, APR 14-21</option>
<option value="2014, APR 21-28">2014, APR 21-28</option>
<option value="2014, APR 28-MAY 5">2014, APR 28-MAY 5</option>
<option value="2014, MAY 5-12">2014, MAY 5-12</option>
</select>
<div class="clear"></div>
<div id="error-message-date_txt"></div>
</div>
<div class="ccms_form_element cfdiv_radio label_over radios_over" id="allyear_radio1_container_div" style="">
<label>* All Year Packages:</label>
<input type="hidden" name="allyear_radio" value="" alt="ghost" />
<div style="float:left; clear:none;">
<div>
<input type="radio" name="allyear_radio" id="allyear_radio_0" title="" value="Shared No Discount" class="validate['required']" />
<label for="allyear_radio_0">Shared USD 2180.00</label>
</div>
<div>
<input type="radio" name="allyear_radio" id="allyear_radio_1" title="" value="Private No Discount" class="validate['required']" />
<label for="allyear_radio_1">Private USD 2510,00</label>
</div>
<div>
<input type="radio" name="allyear_radio" id="allyear_radio_2" title="" value="Shared Discount" class="validate['required']" />
<label for="allyear_radio_2">Shared USD 2030,00</label>
</div>
<div>
<input type="radio" name="allyear_radio" id="allyear_radio_3" title="" value="Private Discount" class="validate['required']" />
<label for="allyear_radio_3">Private USD 2360,00</label>
</div>
</div>
<div class="clear"></div>
<div id="error-message-allyear_radio"></div>
</div>
<div class="ccms_form_element cfdiv_radio label_over radios_over" id="christeaster_radio1_container_div" style="">
<label>* Christmas/Easter Packages:</label>
<input type="hidden" name="christeaster_radio" value="" alt="ghost" />
<div style="float:left; clear:none;">
<div>
<input type="radio" name="christeaster_radio" id="christeaster_radio_0" title="" value="Shared" class="validate['required']" />
<label for="christeaster_radio_0">Shared USD 2340,00</label>
</div>
<div>
<input type="radio" name="christeaster_radio" id="christeaster_radio_1" title="" value="Private" class="validate['required']" />
<label for="christeaster_radio_1">Private USD 2940,00</label>
</div>
</div>
<div class="clear"></div>
<div id="error-message-christeaster_radio"></div>
</div>
I'm tryng to create JS code to achieve my target...it's too hard for now, if you have some advice for me...you're welcome!🙂
Hi,
i followed the instruction in this post http://www.chronoengine.com/forums.html?cont=posts&f=2&t=87667, and I tried to change my code:
the new form code is this (I write only select and radio button group):
this is JS code for hide/show radio button:
Then I added this code in onLoad event...it doesn't work: when page is loaded, the radio button groups are hide, but it doesn't show nothing when i select any value in dropdown.
Why? Can you help me? Thank you
i followed the instruction in this post http://www.chronoengine.com/forums.html?cont=posts&f=2&t=87667, and I tried to change my code:
the new form code is this (I write only select and radio button group):
<div class="ccms_form_element cfdiv_select" style="">
<label>* Available Retreats</label>
<select size="1" class=" validate['required']" title="" name="recipe" id="recipe">
<option value="">choose a date</option>
<option value="2013, NOV 18-25" data-serial="">2013, NOV 18-25</option>
<option value="2013, NOV 25-DEC 2" data-serial="">2013, NOV 25-DEC 2</option>
<option value="2013, DEC 2-9" data-serial="">2013, DEC 2-9</option>
<option value="2013, DEC 9-16" data-serial="">2013, DEC 9-16</option>
<option value="2013, DEC 16-23" data-serial="1">2013, DEC 16-23</option>
<option value="2013, DEC 23-30" data-serial="1">2013, DEC 23-30</option>
<option value="2013, DEC 30-JAN 06" data-serial="1">2013, DEC 30-JAN 06</option>
<option value="2014, JAN 6-13" data-serial="">2014, JAN 6-13</option>
<option value="2014, JAN 13-20" data-serial="">2014, JAN 13-20</option>
<option value="2014, JAN 20-27" data-serial="">2014, JAN 20-27</option>
<option value="2014, JAN 27-FEB 3" data-serial="">2014, JAN 27-FEB 3</option>
<option value="2014, FEB 3-10" data-serial="">2014, FEB 3-10</option>
<option value="2014, FEB 10-17" data-serial="">2014, FEB 10-17</option>
<option value="2014, FEB 17-24" data-serial="">2014, FEB 17-24</option>
<option value="2014, FEB 24-MAR 3" data-serial="">2014, FEB 24-MAR 3</option>
<option value="2014, MAR 3-10" data-serial="">2014, MAR 3-10</option>
<option value="2014, MAR 10-17" data-serial="">2014, MAR 10-17</option>
<option value="2014, MAR 17-24" data-serial="">2014, MAR 17-24</option>
<option value="2014, MAR 24-31" data-serial="">2014, MAR 24-31</option>
<option value="2014, MAR 31-APR 7" data-serial="">2014, MAR 31-APR 7</option>
<option value="2014, APR 7-14" data-serial="">2014, APR 7-14</option>
<option value="2014, APR 14-21" data-serial="1">2014, APR 14-21</option>
<option value="2014, APR 21-28" data-serial="1">2014, APR 21-28</option>
<option value="2014, APR 28-MAY 5" data-serial="">2014, APR 28-MAY 5</option>
<option value="2014, MAY 5-12" data-serial="">2014, MAY 5-12</option>
</select>
<div class="clear"></div>
<div id="error-message-date_txt"></div>
</div>
<div class="ccms_form_element cfdiv_radio label_over radios_over" id="allyear_radio1_container_div" style="">
<label>* All Year Packages:</label><input type="hidden" name="allyear_radio" value="" alt="ghost" />
<div style="float:left; clear:none;">
<div>
<input type="radio" name="allyear_radio" id="allyear_radio_0" title="" value="Shared No Discount" class="validate['required']" />
<label for="allyear_radio_0">Shared Package - USD 2180.00</label>
</div>
<div>
<input type="radio" name="allyear_radio" id="allyear_radio_1" title="" value="Private No Discount" class="validate['required']" />
<label for="allyear_radio_1">Private Package - USD 2510,00</label>
</div>
<div>
<input type="radio" name="allyear_radio" id="allyear_radio_2" title="" value="Shared Discount" class="validate['required']" />
<label for="allyear_radio_2">Shared Package 15% off - USD 2030,00</label>
</div>
<div>
<input type="radio" name="allyear_radio" id="allyear_radio_3" title="" value="Private Discount" class="validate['required']" />
<label for="allyear_radio_3">Private Package 15% off - USD 2360,00</label>
</div>
</div>
<div class="clear"></div>
<div id="error-message-allyear_radio"></div>
</div>
<div class="ccms_form_element cfdiv_radio label_over radios_over" id="christeaster_radio1_container_div" style="">
<label>* Christmas/Easter Packages:</label>
<input type="hidden" name="christeaster_radio" value="" alt="ghost" />
<div style="float:left; clear:none;">
<div>
<input type="radio" name="christeaster_radio" id="christeaster_radio_0" title="" value="Shared" class="validate['required']" />
<label for="christeaster_radio_0">Shared Package - USD 2340,00</label>
</div>
<div>
<input type="radio" name="christeaster_radio" id="christeaster_radio_1" title="" value="Private" class="validate['required']" />
<label for="christeaster_radio_1">Private Package - USD 2940,00</label>
</div>
</div>
<div class="clear"></div>
<div id="error-message-christeaster_radio"></div>
</div>this is JS code for hide/show radio button:
window.addEvent('domready', function() {
$('allyear_radio1_container_div').hide();
$('christeaster_radio1_container_div').hide();
$('recipe').addEvent('change', function() {
var opt;
opt = this.getSelected().getProperty('data-serial').toString();
if ( opt.length >0 ) {
$('christeaster_radio1_container_div').show();
} else {
$('allyear_radio1_container_div').show();
}
});
});
Then I added this code in onLoad event...it doesn't work: when page is loaded, the radio button groups are hide, but it doesn't show nothing when i select any value in dropdown.
Why? Can you help me? Thank you
Hi belli,
Please post a link to the form so I can take a quick look. The code looks OK but it's much easier to see errors on the page.
Bob
Please post a link to the form so I can take a quick look. The code looks OK but it's much easier to see errors on the page.
Bob
Hi Bob,
thank you for reply.
I solved all problems and now it works well!
I changed form code:
CODICE JS:
:)
thank you for reply.
I solved all problems and now it works well!
I changed form code:
<div class="clear"></div><div id="error-message-package_txt"></div></div><div class="ccms_form_element cfdiv_select" id="date_txt1_container_div" style=""><label>* Available Retreats</label><select size="1" id="recipe" class=" validate['required']" title="" name="recipe">
<option value="" >choose a date</option>
<option value="2013, NOV 18-25" data-serial="">2013, NOV 18-25</option>
<option value="2013, NOV 25-DEC 2" data-serial="">2013, NOV 25-DEC 2</option>
<option value="2013, DEC 2-9" data-serial="">2013, DEC 2-9</option>
<option value="2013, DEC 9-16" data-serial="">2013, DEC 9-16</option>
<option value="2013, DEC 16-23" data-serial="11111">2013, DEC 16-23</option>
<option value="2013, DEC 23-30" data-serial="11111">2013, DEC 23-30</option>
<option value="2013, DEC 30-JAN 06" data-serial="11111">2013, DEC 30-JAN 06</option>
<option value="2014, JAN 6-13" data-serial="">2014, JAN 6-13</option>
<option value="2014, JAN 13-20" data-serial="">2014, JAN 13-20</option>
<option value="2014, JAN 20-27" data-serial="">2014, JAN 20-27</option>
<option value="2014, JAN 27-FEB 3" data-serial="">2014, JAN 27-FEB 3</option>
<option value="2014, FEB 3-10" data-serial="">2014, FEB 3-10</option>
<option value="2014, FEB 10-17" data-serial="">2014, FEB 10-17</option>
<option value="2014, FEB 17-24" data-serial="">2014, FEB 17-24</option>
<option value="2014, FEB 24-MAR 3" data-serial="">2014, FEB 24-MAR 3</option>
<option value="2014, MAR 3-10" data-serial="">2014, MAR 3-10</option>
<option value="2014, MAR 10-17" data-serial="">2014, MAR 10-17</option>
<option value="2014, MAR 17-24" data-serial="">2014, MAR 17-24</option>
<option value="2014, MAR 24-31" data-serial="">2014, MAR 24-31</option>
<option value="2014, MAR 31-APR 7" data-serial="">2014, MAR 31-APR 7</option>
<option value="2014, APR 7-14" data-serial="">2014, APR 7-14</option>
<option value="2014, APR 14-21" data-serial="11111">2014, APR 14-21</option>
<option value="2014, APR 21-28" data-serial="11111">2014, APR 21-28</option>
<option value="2014, APR 28-MAY 5" data-serial="">2014, APR 28-MAY 5</option>
<option value="2014, MAY 5-12" data-serial="">2014, MAY 5-12</option>
</select>
<div class="clear"></div><div id="error-message-date_txt"></div></div><div class="ccms_form_element cfdiv_radio label_over radios_over" id="allyear_radio1_container_div" style=""><label>* All Year Packages:</label><input type="hidden" name="allyear_radio" value="" alt="ghost" />
<div style="float:left; clear:none;"><div><input type="radio" name="allyear_radio" id="allyear_radio_0" title="" value="Shared No Discount" class="validate['required']" />
<label for="allyear_radio_0">Shared Package - USD 2180.00</label>
</div><div><input type="radio" name="allyear_radio" id="allyear_radio_1" title="" value="Private No Discount" class="validate['required']" />
<label for="allyear_radio_1">Private Package - USD 2510,00</label>
</div><div><input type="radio" name="allyear_radio" id="allyear_radio_2" title="" value="Shared Discount" class="validate['required']" />
<label for="allyear_radio_2">Shared Package 15% off - USD 2030,00</label>
</div><div><input type="radio" name="allyear_radio" id="allyear_radio_3" title="" value="Private Discount" class="validate['required']" />
<label for="allyear_radio_3">Private Package 15% off - USD 2360,00</label>
</div></div><div class="clear"></div><div id="error-message-allyear_radio"></div></div><div class="ccms_form_element cfdiv_radio label_over radios_over" id="christeaster_radio1_container_div" style=""><label>* Christmas/Easter Packages:</label><input type="hidden" name="christeaster_radio" value="" alt="ghost" />
<div style="float:left; clear:none;"><div><input type="radio" name="christeaster_radio" id="christeaster_radio_0" title="" value="Shared" class="validate['required']" />
<label for="christeaster_radio_0">Shared Package - USD 2340,00</label>
</div><div><input type="radio" name="christeaster_radio" id="christeaster_radio_1" title="" value="Private" class="validate['required']" />
<label for="christeaster_radio_1">Private Package - USD 2940,00</label>
</div></div><div class="clear"></div><div id="error-message-christeaster_radio"></div></div>
CODICE JS:
window.addEvent('domready', function() {
$('allyear_radio1_container_div').hide();
$('christeaster_radio1_container_div').hide();
$('recipe').addEvent('change', function() {
var opt;
opt = this.getSelected().getProperty('data-serial').toString();
if ( opt.length > 0 ) {
$('allyear_radio1_container_div').hide();
$('christeaster_radio1_container_div').show();
} else {
$('christeaster_radio1_container_div').hide();
$('allyear_radio1_container_div').show();
}
});
});
:)
I have one problem in confirmation mail: the selected value in dropdown is not displayed, but I see {date_txt}.
How can i solve this?
Thanks
How can i solve this?
Thanks
Hi belli,
In the HTML you posted here the name of the drop-down is 'recipe', not 'date_txt'. Is that the problem?
Bob
In the HTML you posted here the name of the drop-down is 'recipe', not 'date_txt'. Is that the problem?
Bob
This topic is locked and no more replies can be posted.
