Solved

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

Posted on 2014-01-27
3
564 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Technology Partners: 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

Suggested Solutions

Title # Comments Views Activity
html form layout 4 36
Text color and background in a text box. 2 25
HTML INPUT 6 21
Diff of the day 2 9
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

733 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