Solved

Return key to submit form doesn't work when additional text fields are inserted

Posted on 2014-01-27
3
561 Views
Last Modified: 2014-01-28
There are two forms on this page (center column and right column):
http://www.bbdesign.com/jwallacellc.com/contact-us.htm

Hit the return key while on any of the center form's text boxes, form does NOT submit.
Hit the return key while on any of the right form's text boxes, form DOES submit.
Clicking the dark button at the bottom of either form DOES submit the form.

I could not figure out why the center form would not submit, so I created this test page:
http://bbdesign.com/jwallacellc.com/contact-us2.htm

Now, hitting return while on any of the center form's text boxes DOES submit the form. The ONLY difference between those two pages are the following elements which were commented out in the test version:

<!-- <input type="text" id="cname" name="cname" value="COMPANY NAME" />

<input type="text" id="email" name="email" value="EMAIL" />

<input type="text" id="address" name="address" value="STREET ADDRESS" />

<input type="text" id="city" name="city" value="CITY" />

<div class="clearfix">
	<input type="text" id="state" name="state" value="STATE" />

	<input type="text" id="zip" name="zip" value="ZIP CODE" />
</div> -->

Open in new window


Why does removing those form elements cause the form to submit properly when the return key is pressed? They are just more of the same type of form elements that already appear. Here is the Javascript I am using to handle form submissions:

$('#submitcontact').click(function(){$('#formcontact').submit();});
$('#formcontact').on('submit', function(e){
	e.preventDefault();

	alert('submit form 1');

	$('#formcontact').unbind('submit').submit();
});

$('#submitinvoice').click(function(){$('#forminvoice').submit();});
$('#forminvoice').on('submit', function(e){
	e.preventDefault();

	alert('submit form 2');

	$('#forminvoice').unbind('submit').submit();
});

Open in new window


The first click in each case handles when you click the dark button at the bottom of either form. The rest prevents the default, displays an alert, then (hopefully) allows the form submit to continue.

I can't make any sense out of this, would really appreciate another set of eyes. Thank you!
0
Comment
Question by:bbdesign
  • 2
3 Comments
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39814591
OK. Couple of things here. Firstly, you actually have no Submit buttons on any of your forms - you simply have IMG tags that look like buttons.

The reason your Pay Invoice form works is because there is only 1 field. If you have no submit button, pressing enter will only submit a form if there is one field. More field and it won't work.

You should change your IMG tag buttons for INPUT TYPE='image' elements and it'll work fine:

<input type="image" src="img/bt_submit.png" name="submit" />

Open in new window

0
 

Author Comment

by:bbdesign
ID: 39814858
Thank you! I have been doing this a long time, and never knew that a form with more than one field required a submit button. Always learning!
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39814864
Weird quirk of HTML :)
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question