Loading form result in same page

Loading form result in same page

I have a form and I want to load the results from it into a div. I've already searched some topics about this but it doesn't.
I would really like to show the results from the action url (http://wl.breedbandwinkel.nl/postcodecheck) into <div id="test">. Currently I'm doing this within an iframe but that just doesn't look "professional".
And if possible I would like the form being replaced by the loaded data.
I hope I gave enough information, if not let met know.


This is my code so far:

  2. <script type="text/javascript"> 
  3. $('#form').submit(function() { // catch the form's submit event
  4.     $.ajax({ // create an AJAX call...
  5.         data: $(this).serialize(), // get the form data
  6.         type: $(this).attr('method'), // GET or POST
  7.         url: $(this).attr('action'), // the file to call
  8.         success: function(response) { // on success..
  9.             $('#test').html(response); // update the DIV
  10.         }
  11.     });
  12.     return false; // cancel original event to prevent form submitting
  13. });
  14. </script>

  16. <DIV id="test"></DIV>

  19. <FORM id="form" name="pcc" method="post" action="http://wl.breedbandwinkel.nl/postcodecheck" onSubmit="return validatePcc(this);">
  20.             <div class="one_third firstcols">
  21.                     <H4>Ik ben op zoek naar:</H4>
  23.    <DIV class="ff"><INPUT type="radio" class="pccrad radio" name="sub" value="alles-in-een-pakketten" id="pcc-alles-in-een-pakketten" onclick="$('#pcc-no').hide(); $('#pcc-fpcon').css('visibility', 'visible'); if($('#pcg').val() == '') $('#pcg').focus();"><LABEL class="left pcm" for="pcc-alles-in-een-pakketten" onmouseover="mpopup('Alles-in-&eacute;&eacute;n pakketten','Extra voordelig pakket met internet, digitale telefonie en/of digitale televisie.');" onmouseout="kill();">Alles-in-&eacute;&eacute;n pakketten</LABEL></DIV>    <DIV class="ff"><INPUT type="radio" class="pccrad radio" name="sub" value="internet" id="pcc-internet" onclick="$('#pcc-no').hide(); $('#pcc-fpcon').css('visibility', 'visible'); if($('#pcg').val() == '') $('#pcg').focus();"><LABEL class="left pcm" for="pcc-internet" onmouseover="mpopup('Internet','Altijd supersnel onbeperkt online tegen een vast bedrag per maand.');" onmouseout="kill();">Internet</LABEL></DIV>        <DIV class="ff"><INPUT type="radio" class="pccrad radio" name="sub" value="digitale-televisie" id="pcc-digitale-televisie" onclick="$('#pcc-no').hide(); $('#pcc-fpcon').css('visibility', 'visible'); if($('#pcg').val() == '') $('#pcg').focus();"><LABEL class="left pcm" for="pcc-digitale-televisie" onmouseover="mpopup('Digitale Televisie','Geniet van haarscherp digitaal beeld en geluid inclusief de gratis digitale programmagids.');" onmouseout="kill();">Digitale Televisie</LABEL></DIV>
  24. </div><!-- end .one_third -->
  25. <div class="one_third">
  26.                     <H4>Mijn postcode en huisnummer zijn:</H4>
  27.      
  28.        <TABLE border="0" cellspacing="0" cellpadding="0">
  29.          <TR>
  30.            <TD height="14" colspan="2">Postcode</TD>
  31.            <TD>Huisnr.</TD>
  32.          </TR>
  33.          <TR>
  34.            <TD width="51"><INPUT type="text" class="text" maxlength="4" size="5" value="" name="pcg" id="pcg" onKeyUp="autoTab(event,this,4,pcl);" onFocus="chBg(pcc,'pcg');" onBlur="chBg(pcc,'reset');" style="width: 41px;"></TD>
  35.            <TD width="46"><INPUT type="text" class="text" maxlength="2" size="2" value="" name="pcl" id="pcl" onKeyUp="autoTab(event,this,2,hn);" onKeyDown="backSpace(event,this,pcg);" onFocus="chBg(pcc,'pcl');" onBlur="chBg(pcc,'reset'); upperCase(event,this);" style="width: 26px;"></TD>
  36.            <TD width="36"><INPUT type="text" class="text" maxlength="6" size="4" value="" name="hn" id="hn" onKeyDown="backSpace(event,this,pcl);" onFocus="chBg(pcc,'hn');" onBlur="chBg(pcc,'reset');" style="width: 36px;"></TD>
  37.          </TR>
  38.        </TABLE>
  39.        
  40.        <U class="dot small" onmouseover="popup('Waarom mijn postcode invullen?','Om te kunnen controleren welke abonnementen op uw adres leverbaar zijn hebben wij uw postcode en huisnummer nodig.<br>Uiteraard respecteren wij uw privacy. Deze gegevens worden niet opgeslagen.');" onmouseout="kill();">
  41.                 Waarom mijn postcode invullen?</U>
  42. </div><!-- end .one_third -->
  43. <div class="one_third lastcols">
  44.                     <INPUT type="submit" name="submit" value="Vergelijk de aanbiedingen op uw adres" class="button">
  45. </div><!-- end .one_third -->
  46. </FORM>