Daniel Robinson Daniel Robinson - 5 months ago 72
jQuery Question

Jquery toggle dropdown show hide div on page load

I have a function that when selecting a dropdown it hides of shows a div and works perfectly.

$('#allday').on('change', function () {
$("#mytimes").toggle(this.value == 'No');
});


When the user has selected this they go through to an edit page with the same field on it. Now if the value that was selected was a yes I want it to start with the div already hidden. If its a no I want it start with the div visable and still run the toggle in the correct manor. Here is my code on the edit page but its not working.

$('#allday').on('change', function () {
$("#mytimes").toggle(this.value == 'No');
});


if ($('#allday').val() == 'No')
{
$('#mytimes').show();
}
else if($('#allday').val() == 'Yes')
{
$('#mytimes').hide();
}


Here is my select field in php

Form::Select ("Available All Day", "allday", $allDayOpt, array('name'=>'allday', "autocomplete"=>"off"));
echo '<div id="mytimes">';
Form::Textbox("Start Time", "hourstime", array('name'=>'hourstime', 'data-format'=>"HH:mm" ,'data-template'=>"HH : mm"));
Form::Textbox("End Time", "houretime", array('name'=>'houretime', 'data-format'=>"HH:mm" ,'data-template'=>"HH : mm"));
echo '</div>';

Answer

If I understand right, you can maybe try something like

$("#mytimes").toggle(this.attr('value', 'no'));

and get the value with

if($('#allday').attr('value') == 'Yes'){ //do something }