Setting a drop-down input box to null

Discussion Ask a question
, ,
1

I’ve got a drop-down list element that has a list of 5 choices. I’d like to know if there is a method for removing the selection.

New form has the blank selection box.
User chooses one of the options.
Then user decides to remove the choice.

I’ve tried an blur event to look for a certain string in the elements.value and if found set the value to null. However, when the form is submitted, the first value in the list is stored to the collection.

What am I missing?

2

Hey Kevin,

Got it! Ya know - this was driving me nuts. And then I did something crazy and read the docs. (shhhh - don’t tell anyone).

Just set the value of the dropdown to undefined or null .

$w("#selection1").value = undefined;

Who woulda thunk? Well, obviously the developers did because it’s right there in black pixels on white pixels in the docs. I hate it when I’m stupid.

Yisrael

3

Yisrael, I love the snarky answer (don’t tell…)!

I did try both null and undefined before submitting the question. Here did a quick test to document what is happening.

The following sequence is referring to the field storage_box and the linked input drop-down storageBox

  1. DB storage_box contains the value “3”. Verified by looking at the sandbox DB collection.
  2. Display the dynamic page for this record. $w(“#storageBox”).value displays “3”.
  3. Change the value in storageBox to “2” using the pull-down list.
  4. Run a click function that sets the value to undefined. $w(“#storageBox”).value = undefined; (null does the same thing in testing).
  5. Console.log shows there is no value in this input box. Also did a $w(“#storageBox”).show() command in the click function and the screen verifies the object is empty.
  6. Click on a save button that runs a script to save the record back to the collection
    The first line in the function is:
    let itemObj = $w(“#dynamicDataset”).getCurrentItem();
    The second line for testing displays itemObj
    console.log(itemObj);
    What is interesting is itemObj now has “2” in the storage_box variable.
    “storage_box”:“2”,

This save script runs the command wixData.save(“Movies”, itemObj) with appropirate .then commands. A log of the “results” object shows the same “2” value in storage box, as does the record in the db after the save.

Question:
How is the “2” value getting back into the variable since it was not in the DB and was only there for a moment until cleared? Or how does it get back into the variable since it was previously cleared?

It seems like the pull-down object is storing the last value in memory somewhere and since the object doesn’t have a value at the time of the save event, it is defaulting that value back into object.

A second test was done assigning “35” to the object rather than null or undefined. 35 isn’t in the object’s pull-down list. The debug console.log displays an empty object and the value from the DB is written back to the DB when saved. Seems like it might be a bug.

4

Hey Kevin,

I hope you realize that the snark was directed at me. I must have tried it a hundred times without success, and then I read the docs - or at least read then properly. Oh yeah - and not to mention that you even said you set it to null. I kept trying to set it to -1. I think that’s a Windows thing. sheesh

OK, your problem sounds strange. I need to play with this some more. Perhaps an unidentified (empty) value doesn’t overwrite a field? It seems to me that if that’s the case, then it’s a bug.

Give me some time and I’ll try to find out what’s happening.

Yisrael

5

Hey Kevin,

Me again. I’ve been playing with this most of the morning and at this point I suspect a bug. I tried unchecking “General Settings → Required” and I’m still forced to select an option from the dropdown list. I’m discussing this with QA and I’ll keep you updated.

Yisrael

6

Hi,

any updates?

Shlomi

7

Hey Shlomi,

Chaim opened a ticket on this.

Yisrael

8

Hi Kevin,

I skimmed this so I might be missing a couple of details. But:

  1. Changing the value of an input element via code does not actually change it when data is submitted via a dataset. So setting the input field to null/undefined/35 has no practical effect unless you also set the value of the corresponding field in the current dataset item to null. (FYI when I raised it internally there was a lot of discussion about this, and it was decided that technically the current behavior is correct. But I agree that it may seem counter-intuitive.)

  2. There is no way for a user to unselect an option in a dropdown once an option has been selected. I am pushing to change this… As a workaround you can manually add an entry with a blank label or, if you’re drawing values from a collection, put a record in the collection with an empty field where the label would go. Then at least the user can choose something that appears like deselecting.
    I hope this helps shed some light on your situation. Good luck!

2 Likes
9

That helps. I had tried to enter the top list item (both label and value) as a blank and the UI didn’t allow it. Now the field label has a blank value and period “.”. I’ve added this as the workaround for now. Thanks.

1 Like