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.

I tried JSON and I tried Ajax, but I didn't get it working.. How should i do this?

<script language="javascript" type="text/javascript">
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();
    }
}
</script>

<div style="width: 500px; float: left;">
@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()" })
}
<div style="clear: both"></div>
<div style="float: left;">
    <b>Hoofdgroepen</b><br />
    @using (Html.BeginForm("ProductKoppelingPartial", "ProductKoppeling", FormMethod.Post, new { id = "hpg_submit" }))
    {
        if (ViewBag.SelectedKlant != null)
        {
            <input type="hidden" name="Klant.Id" value="@ViewBag.SelectedKlant.Id" />
        }
        <select style="width: 200px;" size="6" id="HoofdProductGroep" name="HoofdProductGroep.Id" onchange="document.getElementById('hpg_submit').submit();">
            @foreach (var hpg in ViewBag.HoofdProductGroep)
            {
                if (ViewBag.SelectedHPG != null)
                {
                    if (hpg.Id == ViewBag.SelectedHPG.Id)
                    {
                        <option value="@hpg.Id" selected="selected">@hpg.Naam</option>
                    }
                    else
                    {
                        <option value="@hpg.Id">@hpg.Naam</option>
                    }
                }
                else
                {
                    <option value="@hpg.Id">@hpg.Naam</option>
                }
            }
        </select>
        <input type="hidden" name="Actie" id="Actie_1" value="0" />
        <br />
        <img src="../../Content/toevoegen.png" style="cursor: pointer; width: 30px;" onclick="document.getElementById('Actie_1').value='1';document.getElementById('hpg_submit').submit();" />
        <img src="../../Content/bewerken.png" style="cursor: pointer; float: none; width: 30px;" onclick="document.getElementById('Actie_1').value='2';document.getElementById('hpg_submit').submit();" />
        <img src="../../Content/verwijderen.png" style="cursor: pointer; float: none; width: 30px;" onclick="delete_1()" />
    }
</div>
<div style="float: right;">
    <b>Groepen</b><br />
    @using (Html.BeginForm("ProductKoppelingPartial", "ProductKoppeling", FormMethod.Post, new { id = "pg_submit" }))
    {
        if (ViewBag.SelectedHPG != null)
        {
            <input type="hidden" name="HoofdProductGroep.Id" value="@ViewBag.SelectedHPG.Id" />
        }
        if (ViewBag.SelectedKlant != null)
        {
            <input type="hidden" name="Klant.Id" value="@ViewBag.SelectedKlant.Id" />
        }
        <select size="6" style="width: 200px;" id="ProductGroep_Id" name="ProductGroep.Id" onchange="document.getElementById('pg_submit').submit();">
            @foreach (var pg in ViewBag.ProductGroep)
            {
                if (ViewBag.SelectedPG != null)
                {
                    if (pg.Id == ViewBag.SelectedPG.Id)
                    {
                        <option value="@pg.Id" selected="selected">@pg.Naam</option>
                    }
                    else
                    {
                        <option value="@pg.Id">@pg.Naam</option>
                    }
                }
                else
                {
                    <option value="@pg.Id">@pg.Naam</option>
                }
            }
        </select>
        <input type="hidden" name="Actie" id="Actie_2" value="0" />
        <br />
        <img src="../../Content/toevoegen.png" style="cursor: pointer;  width: 30px;" onclick="document.getElementById('Actie_2').value='3';document.getElementById('pg_submit').submit();" />
        <img src="../../Content/bewerken.png" style="cursor: pointer; float: none; width: 30px;" onclick="document.getElementById('Actie_2').value='4';document.getElementById('pg_submit').submit();" />
        <img src="../../Content/verwijderen.png" style="cursor: pointer; float: none; width: 30px;" onclick="delete_2()" />
    }
</div>
<div style="clear: both; height: 25px;"></div>
@using (Html.BeginForm("Save", "ProductKoppeling", FormMethod.Post, new { id = "p_submit" }))
{
    <div style="float: left">
        <b>Producten</b><br />
        <select size="18" style="width: 200px;" name="Product.Id">
            @foreach (var p in ViewBag.Product)
            {
                <option value="@p.Id">@p.Naam</option>
            }
        </select>
        @if (ViewBag.SelectedPG != null)
        {
            if (ViewBag.SelectedPG.Id != null)
            {
                <input type="hidden" name="ProductGroep.Id" value="@ViewBag.SelectedPG.Id" />
            }
        }
        <input type="hidden" name="Actie" id="Actie_3" value="0" />
        <br />
        <img src="../../Content/toevoegen.png" style="cursor: pointer; width: 30px;" onclick="document.getElementById('Actie_3').value='1';document.getElementById('p_submit').submit();" />
        <img src="../../Content/bewerken.png" style="cursor: pointer; float: none; width: 30px;" onclick="document.getElementById('Actie_3').value='2';document.getElementById('p_submit').submit();" />
        <img src="../../Content/verwijderen.png" style="cursor: pointer; float: none; width: 30px;" onclick="delete_3()" />
        <br />
    </div>
    <div style="float: left; width: 100px;">
        <center>
            <br /><br /><br /><br />
            <a style="cursor: pointer; float: none; color: blue; font-size: 30px;" onclick="document.getElementById('p_submit').submit();">»</a>
            <br /><br /><br /><br /><br /><br /><br /><br /><br />
            <a style="cursor: pointer; float: none; color: blue; font-size: 30px;" onclick="document.getElementById('pgp_submit').submit();">«</a>
        </center>
    </div>
}
<div style="float: right;">
    <b>Producten in groepen</b><br />
    @using (Html.BeginForm("Delete", "ProductKoppeling", FormMethod.Post, new { id = "pgp_submit" }))
    {
        <select size="18" style="width: 200px;" name="ProductGroepProduct.Id">
            @foreach (var pgp in ViewBag.ProductGroepProduct)
            {
                if (pgp != null)
                {
                    if (pgp.Product != null)
                    {
                        <option value="@pgp.Id">@pgp.Product.Naam</option>
                    }
                }
            }
        </select>
    }
</div>