Get value of custom Bootbox fields in Meteor

Question

I wanted to open a Bootbox dialog with multiple input fields, and I saw from a previous answer that I could just provide a message that contained html code for input fields. When I try to retrieve the value of one of these fields in the callback function, however, I keep getting undefined. How can I retrieve and store the data put into these fields?

Template.newUser.events({
        'click' : function () {
      bootbox.dialog({message:"<form id='infos' method='get' action=''>\
    <input type='text' name='phone' placeholder='Phone Number'/><br>\
    <input type='text' name='pin' placeholder='PIN' /><br>\
    <input type='text' name='code' placeholder='Verification Code' />\
    </form>",
      title: "Register",
      buttons: {
        Register: {
          label: "Register",
          className: "btn-register",
          callback: function() {      
            var code = $('#phone').value;
            console.log(code);
            return true;
          }
       }     
     }
   }
  });

Answer 1

You are trying to select input with id of 'phone' , $('#phone').value . Try to change <input type='text' name='phone' placeholder='Phone Number'/> to <input type='text' id='phone' name='phone' placeholder='Phone Number'/>