0

I'm Having trouble access the hidden field PartsId. The output HTML from this gives the field part_PartsId. How would I get the value of it from my typeAhead function? My JavaScript is firing, but only seems to return the typeahead object information that fired it.

<div class="input-group col-lg-3 scrollable-dropdown-menu">
         <div class="input-group-addon">@Html.LabelFor(a => part.Part)</div>
              @Html.HiddenFor(a => part.PartsId)
              @Html.EditorFor(a => part.Part, new { htmlAttributes = new { @class = "form-control typeahead" } })
    </div>

My JavaScript File

    $(".typeahead").on("typeahead:selected", typeAhead)
    .on("typeahead:autocompleted", typeAhead);
    function typeAhead(obj, suggestion) {
         var test = $(this).parent().find('partidClass').first();
    }

UPDATE: It seemed relevant to show the MVC Generated HTML

 <div class="input-group">
      <div class="input-group-addon"><label>Part</label></div>
      <input class="partidClass"type="hidden" value="12345" />
      <input class="form-control typeahead text-box single-line" type="text" />
 </div>
Joe Stellato
  • 558
  • 9
  • 31
  • It's `.find('#part_PartsId')`, but your code suggests your generating controls in a loop which means you generating duplicate `id` attributes - remove the `id` and use a class name instead –  Mar 20 '17 at 20:52
  • Isnt the id your looking for PartsId? So `$(this).parent().find('#PartsId').first();` – Webbanditten Mar 20 '17 at 21:13
  • I haven't done this before. Yes it's in a loop, I thought that duplicate IDs would cause a problem. Is there a different way I should be selecting them? Wouldn't Class have the same problem as I wouldn't know which hidden field I was going to be working with because it's within the loop – Joe Stellato Mar 20 '17 at 22:11
  • Not only is your `foreach` loop generating invalid html, its also generating duplicate `name` attributes which will never allow you to correctly 2-way bind to your model (refer [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943) for more detail). All you need to do is add a a class name for the hidden element (say `@Html.HiddenFor(m => m.Parts[i].PartsId, new { @class = "partid" })` and use `var test = $(this).parent().find('.partid');` –  Mar 20 '17 at 22:29
  • You knew so much with so little code to go by, very impressive! I have made those changes, and I do see the difference, however my JavaScript still doesn't find the hiddenfield.var test = $(this).parent().find(".partidClass"); alert(test.val()); gets me an undefined error. So my original problem still exists. – Joe Stellato Mar 21 '17 at 00:03
  • Because `$(this)` is not your object. - `$(".typeahead").on("typeahead:selected, typeahead:autocompleted", function() { var test = $(this).parent().find('.partid'); });` –  Mar 21 '17 at 11:53
  • Changing my Javascript to this still gave me an undefined. I added the HTML output from the MVC hoping that might help – Joe Stellato Mar 21 '17 at 16:09
  • I have created this simple [fiddle](https://jsfiddle.net/qcp83x8o/) based on your edit to show you how it works - just enter a value in one of the textboxes, tab out and it will alert the value of the associated hidden input. –  Mar 21 '17 at 23:03
  • Excellent, that worked for me, can you submit it as an answer? – Joe Stellato Mar 21 '17 at 23:40

0 Answers0