CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Rien
Rien

Reputation: 458

Dynamic created <select> values remain after being dynamically removed

I have a HTML <select> and depending on your option choice it runs through a PHP script that populates another <select> box with <options>. With Jquery when either one triggers an .change() event it sends an Ajax POST to another PhP script with the <select> option its value.

This all functions, almost. When choosing an option from the first select box and then another from the second (newly populated one) it sends the correct POST value and everything is fine.

But when choosing a new option from the first select box, while an option in the second <select> tag is already selected it screw up. Choosing a new option in the first box clears the second one and repopulates with new values as it should. When the first select box option changes it sends data to a PHP script but it should send an empty POST of the second select box yet it sends it's old value while the select box is empty of options. Only when selecting an option once again it sends and empty post.

TL;DR: old value is send after select box options are altered, it should send an empty post since there are either no options available or it picks the first, which is always empty, option. It instead sends the old value that shouldn't even exist anymore.

This is how the second select box is populated:

if($_POST['id']){
    $id=$_POST['id'];
    $query = "SELECT b.id,b.data,b.display FROM data_parent a,data b WHERE b.id=a.did AND parent='$id'";
    $sql = $conn->prepare($query);
    $sql->execute();
    $row = $sql->fetchAll();
        $result = '<option value=""></option>';
        foreach($row as $data) {
            $id = $data['id'];
            $content = $data['data'];
            $display = $data['display'];
            $result.= '<option value="' . $content .'">' . $display . '</option>';
        }
    echo $result;
}

This is the HTML, in next piece of code it alters the options through Jquery .html()

<select class="subCategory">
    <option value=""></option>
</select><br>

As last there is the jquery. .category is the first selectbox and .subcategory is the second one.

The first function is an ..change() event handler on the first selectbox to populate the second one with new options (or no options, depending on choice).

The second function is where all form data is send to a Php script, but as you could guess the problem is that reselecting something from box 1 still sends the old, already cleared, data from box 2 aswell while it should be an '' completely empty POST

$(".category").change(function(){       
        var id=$(this).val();
        var dataString = 'id='+ id;

        $.ajax({
            type: "POST",
            url: "scripts/selectPopulator.php",
            data: dataString,
            cache: false,
            success: function(html){
                $(".subCategory").html(html);
            },
            error: function(){
                alert("error while populating second selector with sub types");
            }
        });

        $(".searchResults").html('');
        $(".filterForm").submit();
    });


    $(".filterForm, .searchForm").on("submit", function (e) {
        e.preventDefault();

        $.ajax({
            type : 'POST',
            url: 'scripts/getItems.php',
            data: { 
            searchInput: $(".searchInput").val(),
            categoryInput: $(".category").children("option").filter(":selected").text(),
            subcategoryInput: $(".subcategory").val(),
            rarityInput: $(".rarity").children("option").filter(":selected").text(),
            minLevelInput: $(".minLevel").val(),
            maxLevelInput: $(".maxLevel").val()
            },
            async: false,
            success: function(data){
                $(".searchResults").html(data);
            },
            error: function(){
                alert("there is error while submit");
                $(".searchResults").html('there is error while submit');
            }  
        });
    });

Upvotes: 2

Views: 479

Answers (1)

charlietfl
charlietfl

Reputation: 171679

You are calling $(".filterForm").submit(); before the ajax has completed.

Thus $(".subcategory") won't have been changed at that point in time.

i'm not 100% clear on the behavior you are looking for to be able to assist further

I think you want to wait and do the form submit within the ajax success callback

Upvotes: 1

Related Questions