HTML elements to controller
<p>This feels a mess and I wish It could be neater.</p>

<p>I have a variable number of html elements:</p>

<pre><code>&lt;input class="form-control" required="true" name="Spanish" type="text" value="blah blah" id="lang_1"&gt;

&lt;input class="form-control" required="true" name="French" type="text" value="hey hey hey" id="lang_2"&gt;
</code></pre>

<p>I want to save these, so I do this:</p>

<pre><code> function saveTranslations() {
   var htmlRows = $("[id^=lang]");
   var rowCount = htmlRows.size();
   for (i = 0; i &lt; rowCount; i++) {
     ARRAY_LANGUAGE_ID[i] = htmlRows[i].id;
     ARRAY_DESCRIPTION[i] = htmlRows[i].value;
   }
 }
</code></pre>

<p>Then I have this my AJAX:</p>

<pre><code>$.ajax({
  type: 'PATCH',
  url: 'products/' + id,
  data: {
    languageIDs: ARRAY_LANGUAGE_ID,
    descriptiond: ARRAY_DESCRIPTION
  }
});
</code></pre>

<p>Feels pretty bad, how else can I do this?</p>

<p>Mick</p>

<p>This is almost there:</p>

<pre><code>var translations = $("[id^=lang]").serializeArray()
</code></pre>