How do I store drop down value in AJAX call?

Question

I am having a form in which I have a drop down list. The drop down list is getting populated inside an AJAX call. There is a button, clicking on which sends an AJAX call and returns data to be filled as options to the drop down list. Now, If the option is selected and the form is submitted successfully, then the selected value gets stored in the database.

But, If I select an option in the drop down and if there are some validation issues in my form, then on submit, the page shows the error and it "refreshes". This leads to the options which were populated during AJAX call to disappear since there is no ajax call again to populate the list.

So, How do I store the value during the first AJAX call such that on page refresh, the value is stored or populated.

If the list were populated manually i.e If I knew the options beforehand, I could have stored the selected value in a hidden variable but I can't do it here.

Here is my AJAX function:

$.ajax({
  type: "POST",
  dataType: 'json',
  url: "/Controller/Action",
  data: {
    param: param,
  },
  success: function(data) {
    if (data.Response == "Unsuccessful") {
      console.log("Unsuccessful");
    } else if (data.Response == "Successful" || data.Response == "ConditionallySuccessful") {
      for (var i = 0; i < data.ExteriorColor.Data.length; i++) {
       //This is the drop down list which is populated
        $("#Exterior_Color").append($("<option></option>").val(data.ExteriorColor.Data[i]).html(data.ExteriorColor.Data[i]));
        console.log(data.ExteriorColor.Data[i]);
      }
   }
  },
  error: function(result) {
    console.log("Error while fetching data");
  }
});

Prevent the submit if they are validation errors so the page doesn't refresh and the user can correct the error. Where are you calling the ajax post from? If you are in a `submit` event handler you can return false unless the form is valid for example. — Nope, Dec 18 '17 at 15:28
Possible duplicate of [Share data between html pages](https://stackoverflow.com/questions/11609376/share-data-between-html-pages) — Liam, Dec 18 '17 at 15:28
Can't you just put your ajax call inside a function and call that function again after the page reloads? — SamyCode, Dec 18 '17 at 20:33
@SamyCode In that case, I'll lose the option that was selected in the drop down list — Del Monte, Dec 19 '17 at 05:13

score 1 · Accepted Answer · answered Dec 18 '17 at 15:32

1

Try localstorage, use it after the success in ajax call.

Saving the dropdown object:

//SAVING (put after the ajax call)

var myList= $("#Exterior_Color");

// Put the object into storage
localStorage.setItem('myList', JSON.stringify(myList));

And the restore part:

//RESTORING (put after the page refresh)

// Retrieve the object from storage
var retrievedMyList = localStorage.getItem('myList');

console.log('myList: ', JSON.parse(retrievedMyList ));

answered Dec 18 '17 at 15:32

DiegoS

816
1
10
26

but will it return the selected value too? – Del Monte Dec 18 '17 at 15:40
1

You can use $("#Exterior_Color").on("change",funcion(){}); to refresh the myList object in the localstore (saving selected value) – DiegoS Dec 18 '17 at 15:42
I am facing an issue here. While reading the `myList`, I am getting an `Object` but it does not contain the options of the drop down list. – Del Monte Dec 19 '17 at 10:13
You should JSON.parse it to restore, try debugging the object with Chrome Dev Tools or some browser developer tools to check for the object properties. – DiegoS Dec 19 '17 at 13:11
I am JSON parsing it as you showed in the sample. By chrome dev tools do you mean by using Postman or other such apps? – Del Monte Dec 19 '17 at 15:10
Not postman, when you are on chrome and you press F12 you can debug javascript execution and check for the variables – DiegoS Dec 19 '17 at 15:41
I am getting `[Object][Object]` as data – Del Monte Dec 20 '17 at 08:56

How do I store drop down value in AJAX call?

1 Answers1