title: Post data to MVC3 controller without pagerefresh
body: <p>I have this script that basically has 4 select boxes, what I want is that for the 2 top select boxes, he submits the optionvalue that is selected to an action (which can be found at "ProductKoppeling/ProductKoppelingPartial"), I want to let him submit this data when I click on an option but without page refresh.</p>
  
  <p>I tried JSON and I tried Ajax, but I didn't get it working..
  How should i do this?</p>
  
  <p><strong>Script:</strong></p>
  
  <pre><code>&lt;script language="javascript" type="text/javascript"&gt;
  function delete_1() {
      var answer = confirm("U staat op het punt dit product te verwijderen, wilt u doorgaan?")
      if (answer) {
          document.getElementById('Actie_1').value = '5';
          document.getElementById('hpg_submit').submit();
      }
  }
  function delete_2() {
      var answer = confirm("U staat op het punt dit product te verwijderen, wilt u doorgaan?")
      if (answer) {
          document.getElementById('Actie_2').value = '6';
          document.getElementById('pg_submit').submit();
      }
  }
  function delete_3() {
      var answer = confirm("U staat op het punt dit product te verwijderen, wilt u doorgaan?")
      if (answer) {
          document.getElementById('Actie_3').value = '6';
          document.getElementById('p_submit').submit();
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>CSHTML:</strong></p>
  
  <pre><code>&lt;div style="width: 500px; float: left;"&gt;
  @using (Html.BeginForm("ProductKoppelingPartial", "ProductKoppeling", FormMethod.Post, new { id = "onload_submit" }))
  {
      @Html.DropDownList("Klant.Id", (ViewBag.Klant as SelectList), new { onchange = "document.getElementById('onload_submit').submit()" })
  }
  &lt;div style="clear: both"&gt;&lt;/div&gt;
  &lt;div style="float: left;"&gt;
      &lt;b&gt;Hoofdgroepen&lt;/b&gt;&lt;br /&gt;
      @using (Html.BeginForm("ProductKoppelingPartial", "ProductKoppeling", FormMethod.Post, new { id = "hpg_submit" }))
      {
          if (ViewBag.SelectedKlant != null)
          {
              &lt;input type="hidden" name="Klant.Id" value="@ViewBag.SelectedKlant.Id" /&gt;
          }
          &lt;select style="width: 200px;" size="6" id="HoofdProductGroep" name="HoofdProductGroep.Id" onchange="document.getElementById('hpg_submit').submit();"&gt;
              @foreach (var hpg in ViewBag.HoofdProductGroep)
              {
                  if (ViewBag.SelectedHPG != null)
                  {
                      if (hpg.Id == ViewBag.SelectedHPG.Id)
                      {
                          &lt;option value="@hpg.Id" selected="selected"&gt;@hpg.Naam&lt;/option&gt;
                      }
                      else
                      {
                          &lt;option value="@hpg.Id"&gt;@hpg.Naam&lt;/option&gt;
                      }
                  }
                  else
                  {
                      &lt;option value="@hpg.Id"&gt;@hpg.Naam&lt;/option&gt;
                  }
              }
          &lt;/select&gt;
          &lt;input type="hidden" name="Actie" id="Actie_1" value="0" /&gt;
          &lt;br /&gt;
          &lt;img src="../../Content/toevoegen.png" style="cursor: pointer; width: 30px;" onclick="document.getElementById('Actie_1').value='1';document.getElementById('hpg_submit').submit();" /&gt;
          &lt;img src="../../Content/bewerken.png" style="cursor: pointer; float: none; width: 30px;" onclick="document.getElementById('Actie_1').value='2';document.getElementById('hpg_submit').submit();" /&gt;
          &lt;img src="../../Content/verwijderen.png" style="cursor: pointer; float: none; width: 30px;" onclick="delete_1()" /&gt;
      }
  &lt;/div&gt;
  &lt;div style="float: right;"&gt;
      &lt;b&gt;Groepen&lt;/b&gt;&lt;br /&gt;
      @using (Html.BeginForm("ProductKoppelingPartial", "ProductKoppeling", FormMethod.Post, new { id = "pg_submit" }))
      {
          if (ViewBag.SelectedHPG != null)
          {
              &lt;input type="hidden" name="HoofdProductGroep.Id" value="@ViewBag.SelectedHPG.Id" /&gt;
          }
          if (ViewBag.SelectedKlant != null)
          {
              &lt;input type="hidden" name="Klant.Id" value="@ViewBag.SelectedKlant.Id" /&gt;
          }
          &lt;select size="6" style="width: 200px;" id="ProductGroep_Id" name="ProductGroep.Id" onchange="document.getElementById('pg_submit').submit();"&gt;
              @foreach (var pg in ViewBag.ProductGroep)
              {
                  if (ViewBag.SelectedPG != null)
                  {
                      if (pg.Id == ViewBag.SelectedPG.Id)
                      {
                          &lt;option value="@pg.Id" selected="selected"&gt;@pg.Naam&lt;/option&gt;
                      }
                      else
                      {
                          &lt;option value="@pg.Id"&gt;@pg.Naam&lt;/option&gt;
                      }
                  }
                  else
                  {
                      &lt;option value="@pg.Id"&gt;@pg.Naam&lt;/option&gt;
                  }
              }
          &lt;/select&gt;
          &lt;input type="hidden" name="Actie" id="Actie_2" value="0" /&gt;
          &lt;br /&gt;
          &lt;img src="../../Content/toevoegen.png" style="cursor: pointer;  width: 30px;" onclick="document.getElementById('Actie_2').value='3';document.getElementById('pg_submit').submit();" /&gt;
          &lt;img src="../../Content/bewerken.png" style="cursor: pointer; float: none; width: 30px;" onclick="document.getElementById('Actie_2').value='4';document.getElementById('pg_submit').submit();" /&gt;
          &lt;img src="../../Content/verwijderen.png" style="cursor: pointer; float: none; width: 30px;" onclick="delete_2()" /&gt;
      }
  &lt;/div&gt;
  &lt;div style="clear: both; height: 25px;"&gt;&lt;/div&gt;
  @using (Html.BeginForm("Save", "ProductKoppeling", FormMethod.Post, new { id = "p_submit" }))
  {
      &lt;div style="float: left"&gt;
          &lt;b&gt;Producten&lt;/b&gt;&lt;br /&gt;
          &lt;select size="18" style="width: 200px;" name="Product.Id"&gt;
              @foreach (var p in ViewBag.Product)
              {
                  &lt;option value="@p.Id"&gt;@p.Naam&lt;/option&gt;
              }
          &lt;/select&gt;
          @if (ViewBag.SelectedPG != null)
          {
              if (ViewBag.SelectedPG.Id != null)
              {
                  &lt;input type="hidden" name="ProductGroep.Id" value="@ViewBag.SelectedPG.Id" /&gt;
              }
          }
          &lt;input type="hidden" name="Actie" id="Actie_3" value="0" /&gt;
          &lt;br /&gt;
          &lt;img src="../../Content/toevoegen.png" style="cursor: pointer; width: 30px;" onclick="document.getElementById('Actie_3').value='1';document.getElementById('p_submit').submit();" /&gt;
          &lt;img src="../../Content/bewerken.png" style="cursor: pointer; float: none; width: 30px;" onclick="document.getElementById('Actie_3').value='2';document.getElementById('p_submit').submit();" /&gt;
          &lt;img src="../../Content/verwijderen.png" style="cursor: pointer; float: none; width: 30px;" onclick="delete_3()" /&gt;
          &lt;br /&gt;
      &lt;/div&gt;
      &lt;div style="float: left; width: 100px;"&gt;
          &lt;center&gt;
              &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
              &lt;a style="cursor: pointer; float: none; color: blue; font-size: 30px;" onclick="document.getElementById('p_submit').submit();"&gt;»&lt;/a&gt;
              &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
              &lt;a style="cursor: pointer; float: none; color: blue; font-size: 30px;" onclick="document.getElementById('pgp_submit').submit();"&gt;«&lt;/a&gt;
          &lt;/center&gt;
      &lt;/div&gt;
  }
  &lt;div style="float: right;"&gt;
      &lt;b&gt;Producten in groepen&lt;/b&gt;&lt;br /&gt;
      @using (Html.BeginForm("Delete", "ProductKoppeling", FormMethod.Post, new { id = "pgp_submit" }))
      {
          &lt;select size="18" style="width: 200px;" name="ProductGroepProduct.Id"&gt;
              @foreach (var pgp in ViewBag.ProductGroepProduct)
              {
                  if (pgp != null)
                  {
                      if (pgp.Product != null)
                      {
                          &lt;option value="@pgp.Id"&gt;@pgp.Product.Naam&lt;/option&gt;
                      }
                  }
              }
          &lt;/select&gt;
      }
  &lt;/div&gt;
  </code></pre>
  
  <p></p>