How to stop redirect to 404 page when I use jquery onchange function to select a value from a form field in wordpress

I’m developing a wordpress woocommerce website where I put a form where two drop down exists. where selecting a value from the first dropdown after page refresh it automatically goes the second dropdown respective to the value of the first dropdown value. then after submitting it goes to certain page. my code is given below

                    <ul><script>
$(function(){
    $("#parent_cat").change(function(){
        var val=$("#parent_cat").val();
        $("#first").click();
        //alert(val);
    });
});
</script>
                        <li><label>Category</label>

<?php global $val;?>
<form method="post">
<?php echo $val;?>
<select name="category_name" id="parent_cat">
<?php $val2='* Please Select *';?>
<?php if(isset($_POST['hidden'])){?>

<option value="<?php echo $val; ?>" id=""><?php echo $val; ?></option>
        <?php } else {?>
                  <option value="<?php echo $val; ?>"><?php echo $val2; ?></option>           
                   <?php } ?>         
<?php echo $post->id; ?><?php
            global $wpdb;
             $wp_posts = $wpdb->prefix . "posts";

            $rsults=$wpdb->get_results
("select post_title,guid,ID from ".$wp_posts." where post_status='publish' and post_type='page' and post_parent='0' and ID IN(8,32) "); 


    //echo  "select post_title from ".$wp_posts." where post_status='publish' and post_type='page' and post_parent='0' ";

                      global $post;
                      foreach($rsults as $post){
                      setup_postdata($post);
                      $id = get_the_ID();

                    ?>

                        <option value="<?php echo $id; ?>">
                            <?php the_title(); }?></option>                            

</select>
<input type="submit"name="sub" id="first" style="display:none;"/>
</form>
<script>
$(function(){
    var hid=$("#quot").val();
    $("#parent_cat").val(hid);
    $("#parent_cat").change(function(){
        var val=$("#parent_cat").val();
        $("#first").click();
        //alert(val);

        //$("#parent_cat > option[value=" + 32 + "]").prop("selected",true);
    });
});
</script>
                        </li>
                        <li><label>Type</label>
                        <form method="post">
        <select name="search_category" class="parent">
        <option value="" selected="selected">Select</option>

                            <?php if(isset($_POST['category_name']))
 $val=$_POST['category_name'];
 echo $val;
?>
                             <?php 

                             $rsults2=$wpdb->get_results("select ID,guid,post_title from ".$wp_posts." where post_status='publish' and post_type='page' and post_parent=".$val." "); 


                             if($rsults2){
                             ?>
                                 <?php
                                  foreach($rsults2 as $post_sub){
                                 ?><option value="<?php echo $post_sub->guid; ?>">
                                    <a href="<?php echo $post_sub->guid; ?>" title="<?php echo $post_sub->post_title; ?>">

                                         <?php echo $post_sub->post_title; ?></a></option>

                                  <?php   }  ?>

                         <?php  }  ?>

        </select>   
        <input type="text" value="<?php echo $val; ?>" id="quot" style="display:none;" name="hidden"/>
        <button id="red" name="reff">submnit</button>
        </form>

          <?php if(isset($_POST['search_category']))
$vall=$_POST['search_category'];
 echo $vall;
header('Location: '.$vall);

?>
 <script>
 $(function(){
        $(".parent").change(function(){
            var ref=$(".parent").val();
        });
});
 </script>         
                    </ul>

It’s working fine in all other pages instead of home page. when I select first value of the first dropdown it goes to 404 page. It’s built in wordpress and woocommerce and it’s home page is not the shop page. Any help would be appreciated. Thank you in advance.

Related posts