Question

I am trying to create some ajax. When the form is submitted it should not refresh and go to the action page. Instead it should render and replace the content in the div tag with the id formcontent.

Here is my jquery:

    // Place your application-specific JavaScript functions and classes here
    // This file is automatically included by javascript_include_tag :defaults
    $(document).ready(function() {
    // send form ved klik paa listen
    $('option').click(function ()
    {
        $(this).closest('form').submit();
    });
    });

My HTML:

<form method="post" id="new_konkurrancer" enctype="multipart/form-data" class="simple_form konkurrancer" action="/public/pricecompare" accept-charset="UTF-8">
    <select style=" margin-left:10px;width:370px;float: left;
        margin-top: 10px;"name="konkurrancer[form]" id="konkurrancer_form" class="select optional"><option value="">Vælg din A-kasse:</option>
    <option value="Nyhedsbrev">ASE</option>
    <option value="Quiz">Træ-industri-byg</option>
    <option value="Andet">Journalistik, kommunikation og sprog</option>
    <option value="Andet">Faglis fælles A-kasse (3F)</option>
    <option value="Andet">Danske lønmodtagere</option>
    <option value="Andet">Metalarbejderne</option>
    <option value="Andet">NNF</option>
    <option value="Andet">Byggefagense A-kasse</option>
    <option value="Andet">HK Danmark</option>
    <option value="Andet">Teknikkerne</option>
    <option value="Andet">Kristelig A-kasse</option>
    <option value="Andet">Frie funktionærer</option>
    <option value="Andet">Dana A-kasse</option>
    <option value="Andet">IT-faget og merkonomerne</option>
    </select>
    <div id="formcontent">

    Render view here on submit


    </div>

Answer 1

$(document).ready(function() {
    // send form ved klik paa listen
    $('option').click(function ()
    {
        var form=$(this).closest('form');
        $.ajax({
          type:'post',
          url:form.attr('action'),
          data:form.serialize(),
          success:function(msg){
            $('#formcontent').html(msg);
          }
        });
    });
});