I'm working on a registration and I have fields for country and state.

My problem is the country and the state that I choose didn't retain after the submission.

I tried this

<script type="text/javascript">
  document.getElementById('country').value = "<?php echo $_POST['country'];?>";
</script>

but didn't work.

so I tried another option using sessionStorage

$(function() {
    $('#country').change(function() {
        sessionStorage.setItem('todoData', this.value);
    });
    if(sessionStorage.getItem('todoData')){
        $('#country').val(sessionStorage.getItem('todoData'));
    }
});
</script>

It work on the country but not in the state, the choices is still the default options.

How can I fix that.. or is there another option to to make it work.

thanks.

SAMPLE CODE

JSFIDDLE

I'm working on a registration and I have fields for country and state.

My problem is the country and the state that I choose didn't retain after the submission.

I tried this

<script type="text/javascript">
  document.getElementById('country').value = "<?php echo $_POST['country'];?>";
</script>

but didn't work.

so I tried another option using sessionStorage

$(function() {
    $('#country').change(function() {
        sessionStorage.setItem('todoData', this.value);
    });
    if(sessionStorage.getItem('todoData')){
        $('#country').val(sessionStorage.getItem('todoData'));
    }
});
</script>

It work on the country but not in the state, the choices is still the default options.

How can I fix that.. or is there another option to to make it work.

thanks.

SAMPLE CODE

JSFIDDLE

• javascript
• jquery

• How did you control the Country-State relation? I think that's the real problem. Your control should be able to initialize the selection with a default value or your current value. Work with HTML5 localStorage will bring problems to you in older browsers. w3schools./html/html5_webstorage.asp – Kaique Garcia Commented Mar 21, 2017 at 14:17
• Please provide all relevant code in an minimal reproducible example in the question itself, not only on a third-party site. The bounty was not fair to people who can't get get to jsfiddle... – Heretic Monkey Commented Mar 22, 2017 at 21:09
• The code is too long sir... that is why I put it there – Mark Gerryl Mirandilla Commented Mar 22, 2017 at 23:16

2 Answers 2

Here is a working example of the functionality you desire. I'm using localStorage like the person who answered before me.

https://jsfiddle/a0uj5d86/2/

//handle select changes, put new data in storage
document.getElementById('country').onchange = function () {
  console.log('country change');
  localStorage.setItem('country', this.value);
  populateStates('country', 'state');
};
document.getElementById('state').onchange = function () {
  localStorage.setItem('state', this.value);
};
document.getElementById('country2').onchange = function () {
  localStorage.setItem('country2', this.value);
};

Then in populate countries at the end I have a little diddy that goes

var selection = 'USA';
if (localStorage.getItem(countryElementId)) {
  console.log('found ' + countryElementId + ' in storage = ' + localStorage.getItem(countryElementId));
  var selection = localStorage.getItem(countryElementId);
}
//select our country (default USA, or local storage if applicable)
findAndSelect(countryElementId, selection);
if (countryElementId == 'country') {
  //we just populated country, now populate states
  populateStates(countryElementId, stateElementId);
  if (localStorage.getItem(stateElementId)) {
    //if weve got a state to select, select it
    findAndSelect(stateElementId, localStorage.getItem(stateElementId));
  } else {
    findAndSelect(stateElementId, 'Alabama');
  }
}

I also did some odds-n-ends refactoring to the code you had. Give it a look and get back to me with any questions!

are you allowed to use HTML5 local storage?

 var selectedVal = localStorage.getItem('selectedVal');
    if (selectedVal){
       $('#mySelect').val(selectedVal)
    }

here is a fiddle http://jsfiddle/jvso1Lcc/22/