Form Submit Problem

Forum Moderators: open

Message Too Old, No Replies

Form Submit Problem

asg333

7:50 pm on Apr 12, 2011 (gmt 0)

I have a form that takes a zipcode as input and displays a google map on the same page using ajax.

If I submit the form using a submit button, it works fine.

However, I would like to auto submit the form after 5 characters are entered.

This code works fine to submit the form:


<form id="zip" action="zip.php" method="post">
zip code: <input type="text" name="zipcode" onKeyUp="if(this.value.length>4)this.form.submit()">
</form>

but without using the submit button, it does not query zip.php replace the div on the current page with the google map. All it does is load the action page, zip.php.

Why does it work fine with a submit button, but not with this.form.submit

This has been driving me crazy!

Thank you!

daveVk

1:55 am on Apr 13, 2011 (gmt 0)

There is nothing in the code you posted to suggest ajax is involved. Look for code that adds the ajax functionality, it seems to incorrectly involve the submit button.

Also unsure your solution works if zip is pasted or droped.

asg333

4:41 am on Apr 13, 2011 (gmt 0)

Hi,

Thank you for your reply.

Below is the entire code including the ajax.

To review, if I add a submit button to the form, it works fine, and replaces the target div with the server response from zip.php (the map of the inputed zipcode).

If I use the code below with no submit button and this.form.submit to submit the form, it does not work, all it does is load the page zip.php.

I hope this was clearer than my first post.

Any help would be greatly appreciated!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 <title>Google Maps TEST</title>

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAknfsDOJrGD4MWKJizx5NyxRiWCpli87AmhLA94NcRC50fk9GkBRMxQT1DRX2JKZTPYC2sw25WD_N7A"></script>
<script type="text/javascript" src="/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/jquery.form.js"></script> 
<script type="text/javascript" src="/jquery.gmap-1.1.0.js"></script>
 <script type="text/javascript">
// prepare the form when the DOM is ready
$(document).ready(function() {
 // bind form using ajaxForm
 $('#zip').ajaxForm({
  // target identifies the element(s) to update with the server response
  target: '#htmlExampleTarget',
 
 });
});
</script>

</head> 


<form id="zip" action="zip.php" method="post">
zip code: <input type="text" name="zipcode" onKeyUp="if(this.value.length>4)this.form.submit()">
</form>


   <div id="htmlExampleTarget"> 
<script type="text/javascript">
$(function()
{
$("#map").gMap({ address: "Los Angeles", zoom: 13 });
 
});
</script>

<div id="map" style="width: 547px; height: 320px; border: 1px solid #777; overflow: hidden;"></div>
   </div>




</body>
</html>

daveVk

5:12 am on Apr 13, 2011 (gmt 0)

try changing

this.form.submit()

to

$(this.form).ajaxSubmit()

my interpretation of ajaxForm documentation [jquery.malsup.com...]

asg333

6:48 am on Apr 13, 2011 (gmt 0)

Thank you for the suggestion.

I tried using $(this.form).ajaxSubmit() but it game me a property not supported error.

Anything else stand out that may be causing the issue?

daveVk

11:41 am on Apr 13, 2011 (gmt 0)

As a test, put the submit button back, changing nothing else, and see if makes a difference.

asg333

5:56 am on Apr 14, 2011 (gmt 0)

Hi Dave,

Thank you for the suggestion. I gave it a try and got the same result.

It is very frustrating that both submit methods do not operate the same way!