Very simple thing: on my form, I'm toggling among three divs on select option. Using this SO thread and so the JSFiddle to this. Just a simple jQuery change function. So, I'm not mentioning them again. I'm using the same form for inserting and editing data. Here I presented two divs of code what I'm with in a dummy form with minimized code:
<form>
<select name="choice_type" id="choice_type">
<option value="">Select One</option>
<option value="type1"
<?php
if ( isset($_POST['choice_type']) && $_POST['choice_type'] != '' ) {
echo ( $_POST['choice_type'] == 'type1' ? 'selected="selected"' : 'disabled="disabled"' );
} elseif( isset( $query_with_id ) && !empty($query_with_id[0]->choice_type) ) {
echo ( $query_with_id[0]->choice_type == 'type1' ? 'selected="selected"' : 'disabled="disabled"' );
} else {
echo '';
}
?>
>Type 1</option>
<option value="type2"
<?php
if ( isset($_POST['choice_type']) && $_POST['choice_type'] != '' ) {
echo ( $_POST['choice_type'] == 'type2' ? 'selected="selected"' : 'disabled="disabled"' );
} elseif( isset( $query_with_id ) && !empty($query_with_id[0]->choice_type) ) {
echo ( $query_with_id[0]->choice_type == 'type2' ? 'selected="selected"' : 'disabled="disabled"' );
} else {
echo '';
}
?>
>Type 2</option>
</select>
<input type="submit" name="publish" id="publish" value="Publish"/>
</form>
<div id="type1" class="togglediv hide-me">Type1</div>
<div id="type2" class="togglediv hide-me">Type2</div>
Please note: $query_with_id is my db query, I'm using when I'm using the form for updating data.
Scenario
The scenario is: I'm taking user choice first to load related div. And I don't want any collision among these three types. I put a checker for the mandatory fields before inserting or updating data (those are irrelevant for my problem so I skipped them here). Suppose I choose Type1 on the select box and the div for Type1 loads, where I forget to put some texts, and clicked the submit button, the form will reload with an error - "Mandatory fields are empty". Just now as the value of $_POST['choice_type'] == 'type1', so I want the dropdown to be selected on "Type1" option and "Type2" and "Type3" to be disabled="disabled". And with the code I presented here does the same for me. So that in the middle I can't switch the type. That's what exactly I's wanting.
PROBLEM
Now the problem is, what my JS is:
$(function() {
$('#choice_type').change(function(){
$('.togglediv').hide();
$('#' + $(this).val()).show();
});
});
with change() it did load the respective div only when I's selecting an option (that triggers a change to jQuery). As the form comes back with a selected option it doesn't load the respective div because no such change being triggered. As the other two options are now disabled according to my scenario, if I choose the "Select One" option and then choose again the "Type1" option it triggers a change to the JS and loads the div.
Question
So, how can the same JS be helpful with some simple tweaking that loads the respective div on change as well as on load or something...?
Any help would be greatly appreciated.
EDIT
With this solution in mind, I changed my jQuery into:
$(function() {
$('#choice_type').change(function(){
$('.togglediv').hide();
$('#' + $(this).val()).show();
}).focus(function(){
$('.togglediv').hide();
$('#' + $(this).val()).show();
});
});
It did a nearly good thing to my query, but it till needs to put a click on the select property. Not exactly what I's looking for.
