Solved

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

Posted on 2014-01-27
3
558 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Don't understand jquery promises 6 36
JavaScript: Issue with onClick 5 35
html5 auto send email 7 22
Angular - disable input field on page load 4 12
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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 code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

911 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now