StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The problem you are experiencing is that you dont do anything to stop your form from being submitted, thus it submits the form before it gets a chance to get the data from the worldweatheronline.com.</p> <p>Change your click handler to be like this:</p> <pre><code> $(".button").click(function(event) { event.preventDefault(); </code></pre> <p>Here is my completed sample code that works the way you want it to:</p> <pre><code><html> <head> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> <script type='text/javascript'> jQuery(document).ready(function() { $('.error').hide(); $(".button").click(function(event) { event.preventDefault(); // validate and process form here $('.error').hide(); var zipCode = $("input#name").val(); if (zipCode == "") { $("label#name_error").show(); $("input#name").focus(); return false; } var key = 'ac9c073a8e025308101307'; var noOfDays = 5; var url = 'http://www.worldweatheronline.com/feed/weather.ashx?q=' + zipCode + '&format=json&num_of_days=' + noOfDays + '&key=' + key; alert('first'+url); jQuery.get(url, function(test) { alert(url); $.each(test.data.weather, function(i, item){ $("body").append("<p>Date: "+item.date+"</p>"); if ( i == 3 ){ return false; } }); }, 'jsonp'); }); }); </script> </head> <body> <div id="contact_form"> <form name="contact" action=""> <fieldset> <label for="name" id="name_label">Name</label> <input type="text" name="name" id="name" size="30" value="" class="text-input" /> <label class="error" for="name" id="name_error">This field is required.</label> <br /> <input type="submit" name="submit" class="button" id="submit_btn" value="Send" /> </fieldset> </form> </div> </body> </html> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload