Question

I have an Placeholder Value input box that is set to display:none; on page load due to it being controlled jQuery and shows when the Placeholder dropdown box is selected to yes.

My issue is that I have used the Codeigniter Validation for the form and if I have an error on the form the page reloads the Placeholder dropdown box states yes but the Placeholder Value input box disappears.

Would my best bet be to create a callback_ function that basically states if yes is selected show the input box?

jQuery:

              $("#add_fields_placeholder").change(function()
    {
        if($(this).val() == "yes")
    {
        $('label[for="add_fields_placeholderValue"]').show();
        $("#add_fields_placeholderValue").show();
    }
    else
    {

        $('label[for="add_fields_placeholderValue"]').hide();
        $("#add_fields_placeholderValue").hide();
    }
        });

View:

<label for="add_fields_placeholder">Placeholder: </label>
<select name="add_fields_placeholder" id="add_fields_placeholder">
    <option value="">Please Select</option>
    <option value="yes" <?php echo set_select('add_fields_placeholder','yes', ( !empty($placeholderType) && $placeholderType == "yes" ? TRUE : FALSE ));?>>Yes</option>
    <option value="no" <?php echo set_select('add_fields_placeholder','no', ( !empty($placeholderType) && $placeholderType == "no" ? TRUE : FALSE ));?>>No</option>
</select>

<label for="add_fields_placeholderValue">Placeholder Text: </label>
<input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValue" value="<?php echo set_value('add_fields_placeholderValue'); ?>">

Controller Validation:

$this->form_validation->set_rules('add_fields_placeholder', 'Placeholder', 'trim|required|xss_clean|callback_dropdown_check');

$this->form_validation->set_rules('add_fields_placeholderValue', 'Placeholder Text','trim|xss_clean');

Answer 1

When the page loads, you will need to trigger the change of the add_fields_placeholder. Just make sure that the yes option is selected. The code will be something like:

function initChangeEvent() {
  $("#add_fields_placeholder").change(function() {
    if($(this).val() == "yes") {
        $('label[for="add_fields_placeholderValue"]').show();
        $("#add_fields_placeholderValue").show();
    } else {
        $('label[for="add_fields_placeholderValue"]').hide();
        $("#add_fields_placeholderValue").hide();
    }
  });
}

$(function(){
  initChangeEvent();
  $("#add_fields_placeholder").trigger('change');  
})