Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2014-01-27
3
Medium Priority
?
582 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 44

Accepted Solution

by:
Chris Stanyon earned 2000 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 44

Expert Comment

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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

972 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