javascript - JQuery populating select box but after post options disappear

Question

I have an SVG map. When someone clicks on a state say, "Kansas" it displays a form and populates the state select box with the state that was clicked on say, it's Kansas. Code - This is working fine. This code is in the head.

var itemval= '<option value="'+data.name+'">'+ stateData[data.name].fullName+'</option>';
$("#SelItem").html(itemval);

When the form is submitted and it posts back to the same page, I'm using

<form method="POST" action="theform.php" onsubmit="return  validateForm(this);">  

When the page post back to the same page the select box is empty. The select box is there but with no option.

I've searched on Google I found the code below plus a few similar ways but they don't work. I've used this code in the head and under the select but no luck.

var selectedVal = $("#SelItem").val();
$("#SelItem").val(selectedVal);

**HTML**
<select id="SelItem"><option></option></select>

I've been working on this for hours but can't seem to find a solution.

Can someone tell me how to keep the select value after the form has been submitted and returns to the same page?

Answer 1

When the page loads you need to check for the presence of your posted value, and if it's there pass the php value to either the javascript code to populate the select option, or use it directly in the html creating the select options.

First off, you should give your select a name attribute in the html so the value is passed into the $_POST array in php:

<select id="SelItem" name="SelItem">

Here's one way you can populate it in javascript (note this code relies on the var stateData being in the same scope):

$(document).ready(function(){
    <?php if (!empty($_POST['SelItem'])): ?>
        var posted_state = '<?php echo $_POST['SelItem'];?>';
        if (stateData[posted_state] !== undefined) {
            var itemval= '<option value="'+posted_state+'" selected>'+ stateData[posted_state].fullName+'</option>';
            $("#SelItem").html(itemval);
        }
    <?php endif; ?>
});

EDIT: An alternative to the above would be to put it in the html for the select tag:

<select id="SelItem" name="SelItem">
    <?php if (!empty($_POST['SelItem'])): ?>
        <option value="<?php echo $_POST['SelItem'];?>" selected>
            <?php echo $_POST['SelItem']; // this would be better if you can replace it with fullname ?>
        </option>
    <?php else: ?>
        <option></option>
    <?php endif; ?>
</select>

Note this method has a couple issues as it's written. First off, the option text in this example won't be the state full name but the abbreviation. Next, you shouldn't trust the contents of $_POST because a malicious user can easily change it to a value you didn't intend it to be. It would be better to validate the value of $_POST['SelItem'] in your php code that handles the post to make sure it is actually one of the correct values before using it. That is why in the previous example I did the check if (stateData[posted_state] !== undefined) before attempting to add the value to your select.

EDIT:

To provide the state fullname from php you need an array of states defined on the php side also (I only see it in your javascript code which is client side).

So in php if you have something like:

$states = array(
    'AK' => 'Alaska',
    'AL' => 'Alabama',
    // etc...
);

Then you can use the posted state abbreviation to get the fullname:

if (array_key_exists($_POST['SelItem'], $states))
    $fullname = $states[$_POST['SelItem']];