Submit select form item value - not working

Question

This is pretty basic stuff, so maybe I'm being blind to it, however I cannot get this working.

I've got a form, and part of that form has a Select item. I've stripped out the inline JS and it looks like the following:

<select class="form-control selectpicker" id="restaurantChain" name="restaurantChain" data-live-search="true">
    <option value="null">Not a chain</option>
    <option value="1234">12345</option>
</select>

Now, I submit this to a function which captures the data and I'm logging it out, however it's not working for the select item, everything else is fine:

var restaurantChain = req.param('restaurantChain');

I'm getting undefined but I cannot figure out why. Here's my full code:

Form

<form method="post" action="restaurant-management/manage">
   <input type="hidden" value="<%= restaurant.id %>" name="restaurantId" id="restaurantId"/>
   <td><input type="text" value="<%= restaurant.name %>" name="restaurantName" id="restaurantName" class="form-control"></input></td>
   <td><input type="text" value="<%= restaurant.location %>" name="restaurantLocation" id="restaurantLocation" class="form-control"></input></td>
   <td>
      <select class="form-control selectpicker" id="restaurantChain" name="restaurantChain" data-live-search="true">
         <option value="null">Not a chain</option>
         <% if(typeof chains != "undefined") { %>
         <% _.each(chains, function(chain){ %>
         <option value="<%= chain.id %>" <% if(restaurant.chain == chain.id) { %> selected <% } %> >
            <%= chain.name %>
         </option>
         <% }) %>
         <% } %>
      </select>
   </td>
   <td class="text-center"><input type="submit" class='btn btn-info btn-s' name="editButton" value="Edit"> <input type="submit" class="btn btn-danger btn-s" name="deleteButton" value="Delete"></td>
</form>

Function

manageRestaurant: function(req, res) {

  var restaurantName     = req.param('restaurantName');
  var restaurantId       = req.param('restaurantId');
  var restaurantLocation = req.param('restaurantLocation');
  var restaurantChain    = req.param('restaurantChain');
  var checkboxes         = req.param('checkboxes');

  console.log(restaurantName); //Works fine
  console.log(restaurantLocation); //Works fine
  console.log(restaurantChain); //Undefined....what?!
}

Page Source

      <tr>
        <form method="post" action="restaurant-management/manage">
          <input type="hidden" value="571c8ad57f18f8a441417a57" name="restaurantId" id="restaurantId"/>
          <td><input type="text" value="Nandos" name="restaurantName" id="restaurantName" class="form-control"></input></td>
          <td><input type="text" value="London - Oxford Street" name="restaurantLocation" id="restaurantLocation" class="form-control"></input></td>
          <td>
            <select class="form-control selectpicker" id="restaurantChain" name="restaurantChain" data-live-search="true">
              <option value="123">Not a chain</option>


                  <option value="571a0b7e09e2eff63befa5fa"  >
                    Nandos
                  </option>

                  <option value="571a0b8409e2eff63befa5fb"  >
                    McDonalds
                  </option>

                  <option value="571df9378fb28b8545ce4b23"  >
                    TGI Fridays
                  </option>

                  <option value="571dfb09f0e2af92456bc53f"  >
                    Subway
                  </option>


            </select>
          </td>
          <td class="text-center"><input type="submit" class='btn btn-info btn-s' name="editButton" value="Edit"> <input type="submit" class="btn btn-danger btn-s" name="deleteButton" value="Delete"></td>
        </form>
      </tr>

Answer

If you still want to use a table, rather than restyling the page with CSS to get the same result, you can submit the form data using a Javascript function. This gets the values from the elements on the page, and posts them.

When you submit the form, are you selecting one of the options? It won't be in the query string if you aren't. You would need to flag a default selected option by adding `selected` to the first `option`. — 4castle, Apr 25 '16 at 21:15
Yep. The inline JS assigns a selected tag based on the dataset I'm using. Even when I select a new item and submit it, it's still undefined. — K20GH, Apr 25 '16 at 21:16
@4castle The first option is automatically selected by default if the HTML doesn't specify otherwise. So the value will always be included in the POST data. — Barmar, Apr 25 '16 at 21:17
In that case, it would always be 'null', however its undefined regardless of the option I choose. I've just done a bit more debugging, and the reason it is undefined is because the select item isn't being included in the form submit :/ — K20GH, Apr 25 '16 at 21:18
Can you dump all the parameters in the server? I don't know the sails.js syntax, but whatever is analogous to PHP `var_dump($_POST)`. — Barmar, Apr 25 '16 at 21:22
@Barmar I've just done that, and it's not even there. For some reason, the Select statement isn't being included when I post the form: { restaurantId: '1', restaurantName: 'Nandos', restaurantLocation: 'London', editButton: 'Edit' } — K20GH, Apr 25 '16 at 21:23
I've just checked the page source, and it's definitely nested the select inside the form. I'll update the post — K20GH, Apr 25 '16 at 21:26
You can't have `` as the child of `
`. The parent of `` has to be ``. — Barmar, Apr 25 '16 at 21:27
@Barmar I've just posted the page source. I have a and within that, within the form — K20GH, Apr 25 '16 at 21:29
So, how do you forms within table rows and columns? I've never had this issue before :/ — K20GH, Apr 25 '16 at 21:31
@Barmar - Just seen your duplicate. Wow...I had absolutely no idea you couldn't do that! Learn something every day! Thanks — K20GH, Apr 25 '16 at 21:35

Submit select form item value - not working

0 Answers0