如何根据访客联系记录预选单选按钮

Question

We have a signup form for existing customers and have all text input fields populating with their information (first name, last name and email address). We also have a list of radio button group with three radio buttons and need to pre-populate (select) the radio button that corresponds with their contact record in our database.

I've mapped their contact record info to a var for this field.

var flavorFave = <span class=dbrecord >Favorite Ice Cream Flavor</span>

Here's the form code for the radio buttons:

<input type="radio" class="custom-control-input" id="Vanilla" name="flavor" value="Vanilla">
<input type="radio" class="custom-control-input" id="Chocolate" name="flavor" value="Chocolate">
<input type="radio" class="custom-control-input" id="Strawberry" name="flavor" value="Strawberry">
...
...
...

How can we configure the form so that the correct radio button is checked if the variable "flavorFave" is defined? For example, if the variable "flavorFave" equals "Vanilla", then we want the "Vanilla" radio button to be checked.

Answer 1

您可能会从数据库中获取数据并将具有相应值的数据设置为使用 jQuery 道具检查

.prop('checked', true);

Answer 2

The following grabs the 'flavor' preference from the database and stores it in a variable called 'flavorFave. The following is proprietary to our system.

var flavorFave = <span class=dbrecord >Favorite Ice Cream Flavor</span>

The source code would show the flavor instead of that span tag, such as this:

var flavorFave = "strawberry";

If the variable 'flavorFave' is not defined, it will default to 'Vanilla'. If the flavor is defined, it will pre-populated the corresponding radio button:

if(flavorFave === ''){  
  $("[name=flavor][value='Vanilla']").prop("checked", true)
} else {
  $("[name=flavor][value=" + flavorFave + "]").prop("checked", true)
  };
});

Answer 3

我认为您需要检查它是否未定义？

if(typeof flavorFave !== "undefined"){ radiobtn = document.getElementById(flavorFave); radiobtn.checked = true; }