Forums

Dear all,

I have multi-page form,

1st form only contain dropdown. And second form contains 3 texbox with id; text5, text6, and text7.
I want to hide and show textbox conditionally. I put js code on page2 event before html render

jQuery(document).ready(function (jQ) {
  jQ('#dropdown').change(function () {
    var opt;
    opt = jQ(this).val();
    if (val == 1) {
      jQ('#form-row-text5').show();
      jQ('#form-row-text6').hide();
      jQ('#form-row-text7').hide();
    } else {
      jQ('#form-row-text5').hide();
      jQ('#form-row-text6').show();
      jQ('#form-row-text7').show();
    }
  });
});

This code was do nothing, with no error. Maybe I miss something?

Thank you

Thank you for this post http://www.chronoengine.com/forums/posts/f5/t88290.html with little customize 😀

jQuery(function($) {

var var_name;
var_name = <?php echo $form->data['dropdown']; ?>;

//alert(var_name);

if (var_name == 1){
document.getElementById('form-row-text5').style.display = 'block';
document.getElementById('form-row-text6').style.display = 'none';
document.getElementById('form-row-text7').style.display = 'block';
//dropdown_div = $('form-row-text5');
//dropdown_div.setStyle('display', 'none');
//document.getElementById("dropdown").style.display = 'none'; 
}

else{
	//dropdown_div = $('form-row-text5');
    //dropdown_div.setStyle('display', 'block');
document.getElementById('form-row-text5').style.display = 'none';
document.getElementById('form-row-text6').style.display = 'block';
document.getElementById('form-row-text7').style.display = 'none'; 
}

})