2

I have a form and I want to load the results from it into a div. I've already searched some topics about this and I thought that this one jquery submit form and then show results in an existing div would work but it doesn't.

This is my code so far:

<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 I figured out that this is not working. 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". I hope I gave enough information, if not let met know.

Community
  • 1
  • 1
Mark
  • 731
  • 2
  • 10
  • 29
  • Why didn't that other example that you linked to work? Did you include the jquery js file as a script? Try writing in the header of your HTML (with quotes, of course, gotta format it correctly...) – Stephen Wylie Nov 01 '12 at 03:56
  • I just did what you told me but it is still not working. To see an example of what I'm doing look here: http://www.kabeladviseur.nl/test/ – Mark Nov 01 '12 at 04:08
  • If you wanna see what it is doing just click on Alles-in-één pakketten and then fill in at "postcode" 1234 AA and at "Huisnr." 1. – Mark Nov 01 '12 at 04:14

1 Answers1

1

Most importantly, if your Web page is not running from within http://wl.breedbandwinkel.nl, the AJAX call probably won't run at all due to most every browser disabling cross-site scripting. You can't make an AJAX request to foo.com from a page served from bar.com. To circumvent this, what I usually do is write a file such as "bar.com/ajaxActions.php" and then use that PHP script to make either the GET or POST request to the foreign site. Once it retrieves the result, I simply print that result to the standard output, which then becomes the result of your AJAX request.

The other thing I would do is ditch the "method" and "action" attributes in your <form> tag and put those in the AJAX request you're trying to write with jQuery. Use an onClick() listener in your submit button instead, as such:

<INPUT type="submit" name="submit" onClick="doAjaxRequest()" value="Vergelijk de aanbiedingen op uw adres" class="button">

Then in that function, use the code you already had in place for starters:

<script type="text/javascript"> 
function doAjaxRequest() {
    $.ajax({ // create an AJAX call...
        data: $("#form").serialize(), // get the form data
        type: GET, // GET or POST
        url: "ajaxActions.php", // the file to call -- postcodecheck if you're on that same domain, otherwise ajaxActions.php
        success: function(response) { // on success..
            $('#test').html(response); // update the DIV
        }
    });
}

Finally, if you're not on the same domain, I will leave it to you to find out the PHP code for the GET request (use file_get_contents()) or the POST request (use cURL). Or if you can't use PHP, then use your back-end language of choice. In PHP, assuming your post code checker accepted a GET request, your ajaxActions.php file would look something like this:

$response = file_get_contents("http://wl.breedbandwinkel.nl/postcodecheck?pcg=" . $_GET["pcg"] . "&pcl=" . $_GET["pcl"] . "&hn=" . $_GET["hn"] );
print $reponse;
Stephen Wylie
  • 924
  • 7
  • 10
  • Couple side notes: Use Google Chrome's Developer Tools to help you step through your code, set breakpoints, and so on. Secondly, cURL can handle all types of HTTP requests, including GET, POST, and PUT, but it's more difficult to set up if you're just looking to do GET. – Stephen Wylie Nov 01 '12 at 04:43
  • Indeed my web page is not running from within http://wl.breedbandwinkel.nl/. That's the link that the company gave me to do a zip code check. They provided me a iframe code but that is really crappy. I will try the solution as you wrote (it looks promising). – Mark Nov 01 '12 at 04:57
  • I tested as you suggested but it's still not working. By the way the company gave me a XML API documentation for the post code checker. So I can build my own post code checker. But with that documentation I really don't know where and how to start. I can say that I pretty do not know anything about XML API. the XML API documentation can be found here: http://www.breedbandwinkel.nl/xml/api/documentatie – Mark Nov 01 '12 at 16:47