Blaze not showing the selected option in the template

help
1

I have a problem showing my selected treatment value as well as when choosing the gender of my user, when choosing the treatment (sir, miss, etc) it saves in my database but doesn’t appear in my page and when choosing the gender something similar happens but it my database it displays “on” instead of the selected gender.

Here’s how it’s shown in my user collection
image

Here’s my html code

<select id="treatment" name="SelectedTreat" class="selectpicker" data-style="border btn-white shadow-sm">
                              <option>Sin seleccionar</option>
                              <option  selected="{{SelectedTreat 'Dr.'}}">Dr.</option>
                              <option  selected="{{SelectedTreat 'Dra.'}}">Dra.</option>
                              <option  selected="{{SelectedTreat 'Lic.'}}">Lic.</option>
                              <option  selected="{{SelectedTreat 'Licda.'}}"> Licda.</option>
                              <option  selected="{{SelectedTreat 'Sr.'}}">Sr.</option>
                              <option  selected="{{SelectedTreat 'Sra.'}}">Sra.</option>
                            </select>

Here’s the event, I want to update the info and show the selected treatment in my website as well as the gender

 'submit .PersonalData': function (event) {
 
    let FirstName = event.target.firstName.value;
    let SecondName = event.target.secondName.value;
    let SurName = event.target.surName.value;
    let lastName = event.target.lastName.value;
    let SecNum = event.target.sn.value;
    Gender = $('input[name="genderRadio"]:checked').val();
    let Phone = event.target.phone.value;
    let Phone2 = event.target.phone2.value;
    let Phone3 = event.target.phone3.value;
    let Address = event.target.address.value;
    let Address2 = event.target.address2.value;
    let Age = event.target.bday.value;
    let Treat = $('input[name="SelectedTreat"]').val();
    let Sector = event.target.city.value;

    Meteor.users.update(Meteor.userId(), {
      $set: {
        'profile.firstname': FirstName,
        'profile.secondname': SecondName,
        'profile.surname': SurName,
        'profile.lastname': lastName,
        'profile.secnum': SecNum,
        'profile.Gender': Gender,
        'profile.phone': Phone,
        'profile.phone2': Phone2,
        'profile.phone3': Phone3,
        'profile.Address': Address,
        'profile.Address2': Address2,
        'profile.Age': Age,
        'profile.Treatment': Treat,
        'profile.Sector': Sector
      }
    })
    console.log("el boton funciona");
    Bert.alert("Datos actualizados exitosamente", "success", "growl-top-right");


  }

And here’s the helper

Template.Config.helpers({
  SelectedTreat: function(option){
    return (option === 'default') ? " " : false;
  }
})

Thank you for your time and any help is really appreciated.

2

2021 and having the same issue… maybe someone will help one day

3

wow, no answer after 3 years… sorry for that @frederick0510, since @jamesb is having the same problem I’ll venture to give an answer.

I believe the problem with the <select> is on the helper function, which returns either a single space or false.

I’d give something like this a try:

Template.Config.helpers({
  SelectedTreat(option) {
    // Here, I'm assuming we have the values fetched from the DB as part of the template data.
    const { personalData } = Template.currentData();
    return personalData.Treatment === option;
  }
});

As for the gender radio button, I would need more details on it, but my guess is that the input may be missing a value, and just have its inner text, something like:

<input type="radio"> Option 1
vs
<input type="radio" value="Option1"> Option 1

Hope this helps…

2 Likes