I have a form with one text box that is part of a div tag. I want it to change the contents of that div tag to another page based on the contents of a textbox in a php GET request.
for example if you type hell into the textbox it will load goto.php?location=hell into the div.
so far this is the code i have below, and due to it being my first time with jquery sucks more than a hoover vacuum cleaner.
<div id="city"></div>
<form name="goto" action="/">
<input type="text" id="city">
<input type="submit" name="submit" class="button" id="submit_btn" value="New City" />
</form>
<script>
/* attach a submit handler to the form */
$("#goto").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
city = $form.find( 'input[name="city"]' ).val(),
/* Send the data using post and put the results in a div */
$('currentwxdiv').load('http://www.jquerynoob.bomb/hell.php?location=' + city);
});
</script>
Currently instead up updating the contents of the div it reloads the entire page in the browser and then appends it with ?submit=New+City
UPDATE This is what I have now and its still doing the full page refresh with the appended ?submit=New+City
<script>
/* attach a submit handler to the form */
$$('form[name="changewx"]').submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
city = $('#city').val()
/* Send the data using post and put the results in a div */
$('#currentwxdiv').load('http://api.mesodiscussion.com/?location=' + city);
});
</script>