Search code examples
phpjqueryformsdrop-down-menuselected

jQuery Dropdown Menu + PHP - keeping selection

I'm not very experienced at JS (PHP is my strong side) so I need your help about something.

I have a script with 2 drop down menus that shows hidden content. I'm using this example Change content based on select dropdown id in jquery

When I execute a PHP script, it checks for errors and if there are some it will return the user to the form. The problem with this is that it will not show the hidden content. I can set some sort of PHP vars and put them in the input like $selected_one = 'selected="selected"' and the dropdown menus will have the right selection, but the jQuery function does not work like that. I think it puts some sort of class that shows and hides the content.

I can't quite put my finger on what's going on, so I need your help. Can any body give me a hint how to fix this?

Here's some code to make things visual

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style>
.list_publish, .list_news, option_value {
     display: none;   
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<body>
<?php
$selected_news = '';
$selected_review = '';
$selected_news_text = '';
$selected_news_video = '';

if(isset($_POST['submit_news_text'])){

    $selected_news = 'selected="selected"';
    $selected_news_text = 'selected="selected"';

    $news_title = $_POST['news_title'];

    // Checks blank forms and return error
    if(empty($news_title)) {
        $error_message = 'This field must not be empty!';
        $proceed = false;
    } else {
        $proceed = true;
    }
}

if($proceed){
    // do stuff
    echo 'do stuff';
} else {
?>
<form method="post" action="<?php $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">
    <select class="change_publish" name="publish_type" id="publish_type" style="width: 238px;">
      <option value="publish_type" data-title="choose">Publishing...</option>
      <option value="publish_news" data-title="news" <?php echo $selected_news ?>>Publish News</option>
      <option value="publish_review" data-title="review" <?php echo $selected_review ?>>Publish Review</option>
    </select>
    <div class="list_publish publish_type"> 
    </div>
    <div class="list_publish publish_news"> 
        <select class="change_news" name="news_type" id="news_type" style="width: 238px;">
          <option value="news_type" selected="selected" data-title="choose">News Type</option>
          <option value="news_text" data-title="text" <?php echo $selected_news_text; ?>>Text</option>
          <option value="news_video" data-title="video"<?php echo $selected_news_video; ?>>Video</option>
        </select>
        <div class="list_news news_type">
        </div>
        <div class="list_news news_text">
            <input name="news_title" type="text" id="news_title">
            <input name="submit_news_text" type="submit" value="Publish" id="submit_news_text" />
        </div>
        <div class="list_news news_video">
            > This function is not available at the moment.
        </div>
    </div>
    <div class="list_publish publish_review">
        > This function is not available at the moment.
    </div>
</form>
<?php
    echo $error_message;
}
?>
<script>
// дропдаун меню
$('.change_publish').change(function(){
    var selected = $(this).find(':selected');
    $('.optionvalue').fadeOut(function(){
         $('.optionvalue').html(selected.html()).fadeIn()
             .attr('class', 'optionvalue '+selected.val());   
    });
    var count = $('.list_publish').length;
    $('.list_publish').slideUp(function(){
        if(!--count) {
           $('.'+selected.val()).slideDown();
        }       
    });
});
$('.change_news').change(function(){
    var selected = $(this).find(':selected');
    $('.optionvalue').fadeOut(function(){
         $('.optionvalue').html(selected.html()).fadeIn()
             .attr('class', 'optionvalue '+selected.val());   
    });
    var count = $('.list_news').length;
    $('.list_news').slideUp(function(){
        if(!--count) {
           $('.'+selected.val()).slideDown();
        }       
    });
});
</script>
</body>
</html>

And here's a demo http://www.demirevdesign.com/public/form.php

Solution

  • Trigger the change event on document load, like here:

    <script>
// дропдаун меню
$('.change_publish').change(function(){
    var selected = $(this).find(':selected');
    $('.optionvalue').fadeOut(function(){
         $('.optionvalue').html(selected.html()).fadeIn()
             .attr('class', 'optionvalue '+selected.val());   
    });
    var count = $('.list_publish').length;
    $('.list_publish').slideUp(function(){
        if(!--count) {
           $('.'+selected.val()).slideDown();
        }       
    });
}).change(); // HERE THE CHANGE

$('.change_news').change(function(){
    var selected = $(this).find(':selected');
    $('.optionvalue').fadeOut(function(){
         $('.optionvalue').html(selected.html()).fadeIn()
             .attr('class', 'optionvalue '+selected.val());   
    });
    var count = $('.list_news').length;
    $('.list_news').slideUp(function(){
        if(!--count) {
           $('.'+selected.val()).slideDown();
        }       
    });
}).change(); // HERE THE CHANGE
</script>