Das laden eines Formulars Aktion innerhalb einer div

Ich habe ein Formular und ich möchten, laden Sie die Ergebnisse in ein div. Ich habe such schon einige Themen dazu und ich dachte, dass dies eine jquery submit form und zeigen dann die Ergebnisse in einen bestehenden div funktionieren würde, aber es funktioniert nicht.

Dies ist mein code bisher:

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

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

<FORM id="form" name="pcc" method="post" action="http://wl.breedbandwinkel.nl/postcodecheck" onSubmit="return validatePcc(this);">
             <div class="one_third firstcols">
                <H4>Ik ben op zoek naar:</H4>

        <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>
            </div><!-- end .one_third -->
            <div class="one_third">
                <H4>Mijn postcode en huisnummer zijn:</H4>

            <TABLE border="0" cellspacing="0" cellpadding="0">
              <TR>
                <TD height="14" colspan="2">Postcode</TD>
                <TD>Huisnr.</TD>
              </TR>
              <TR>
                <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>
                <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>
                <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>
              </TR>
            </TABLE>

            <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();">
            Waarom mijn postcode invullen?</U>
            </div><!-- end .one_third -->
            <div class="one_third lastcols">
                <INPUT type="submit" name="submit" value="Vergelijk de aanbiedingen op uw adres" class="button">
            </div><!-- end .one_third -->
            </FORM>

So habe ich herausgefunden, dass dies nicht funktioniert. Ich würde wirklich gerne zeigen die Ergebnisse aus der action-url (http://wl.breedbandwinkel.nl/postcodecheck) in <div id="test">.
Zurzeit mache ich das in einem iframe, aber das sieht einfach nicht "professional".
Ich hoffe, ich gab genug Informationen, wenn nicht lassen Sie erfüllt wissen.

  • Warum nicht, dass andere Beispiel, dass Sie im Zusammenhang mit Arbeit? Haben Sie die jquery js-Datei als Skript? Versuchen Sie, schreiben <script src= ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js ></script> in den header Ihrer HTML - (mit Anführungszeichen, natürlich, muss es format korrekt...)
  • Ich habe gerade was du mir gesagt hast aber es funktioniert immer noch nicht. Um ein Beispiel zu sehen, was ich Tue, schau mal hier: kabeladviseur.nl/test
  • Wenn Sie sehen wollen, was es ist zu tun, klicken Sie einfach auf den Alles-in-één pakketten und füllen Sie dann auf "Postleitzahl" 1234 AA und bei "Huisnr." 1.
InformationsquelleAutor Mark | 2012-11-01
Schreibe einen Kommentar