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-één pakketten','Extra voordelig pakket met internet, digitale telefonie en/of digitale televisie.');" onmouseout="kill();">Alles-in-éé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.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Allem, wenn Ihre Web-Seite nicht läuft innerhalb http://wl.breedbandwinkel.nl, der AJAX-Aufruf vermutlich überhaupt nicht ausgeführt werden da die meisten bei jedem browser deaktivieren, cross-site-scripting. Sie können nicht machen eine AJAX-Anforderung an foo.com von einer Seite aus bedient bar.com. Um diese zu umgehen, was ich normalerweise tun ist, schreiben Sie eine Datei wie "bar.com/ajaxActions.php" und verwenden Sie dann das PHP-Skript, um entweder die GET-oder POST-Anfrage an die ausländische Website. Sobald es ruft dem Resultat, dass ich einfach drucken das Ergebnis auf die Standardausgabe, die dann in das Ergebnis der AJAX-Anfrage.
Die andere Sache, die ich tun würde, ist das Graben der "method" und "action" - Attributen in Ihrem
<form>
tag und setzen diese in der AJAX-Anfrage, die Sie versuchen zu schreiben mit jQuery. Verwenden Sie ein onClick () - listener in deinem submit-button statt, die als solche:Dann in der Funktion verwenden Sie den code, den Sie bereits mit dem Ort, für den Anfang:
Schließlich, wenn Sie nicht auf der gleichen domain, werde ich überlasse es Ihnen, herauszufinden, der PHP-code für die GET-Anforderung (Nutzung file_get_contents()) oder die POST-Anforderung (nutze cURL). Oder wenn Sie nicht PHP verwenden, dann benutzen Sie die back-end-Sprache der Wahl. In PHP, vorausgesetzt, Ihre post-code-checker akzeptiert eine GET-Anfrage, Ihre ajaxActions.php die Datei würde wie folgt Aussehen: