Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone 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

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. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

721 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