Processing a form without reloading the page
Hi
I'm sorry for asking such a stupid question, but I have searched and tried various things with no luck.
I am trying to use a form to calculate a value based on three parameters and display a circle on a Google map.
I have a small form with three fields in a <div> where the user can enter the desired values. Once he presses submit, I want to use those values, calculate the size and create the marker.
Somehow when I press submit, the same page gets reloaded but obviously the marker is not created. I don't want to reload the page, all I want is to create the marker on the map. What am I doing wrong here? Here's what I have so far:
The form:
- <div id="Speed">
- <form id="targetR" class="form-inline" method="post" action="">
Speed: <input class="input-mini" name="speed" type="text" value="840">km/h
Time: <input class="input-mini" name="time" type="text" value="300" />min
Turnaround: <input class="input-mini" name="ta" type="text" value="60" />min
<input class="btn btn-small btn-primary" id="sSpeed" name="Submit" type="submit" value="Submit" />
</form>
- </div>
I then have the following JavaScript, with which I thought to create the marker:
The $('$Speed').hide(); should hide the <div> holding the form.
- $(document).ready(function(){
$('#targetR').submit(function() {
$('#Speed').hide();
var vtime = $("input#time").val();
var vta = $("input#ta").val();
var vspeed= $("input#speed").val();
var vR3 = Round((vtime/2/60 - 25/60 - vta/2/60)*vspeed * 1000, 0)
var c2000 = new google.maps.Circle({map:map, radius: vR3, fillColor: '#0000FF', strokeColor: '#0000FF', strokeWeight:0, fillOpacity:0.1, visible: true});
c2000.bindTo('center', marker, 'position');
return false;
});
});
Thank you very much in advance for any kind of hint as to how to get this to work.