Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 234
  • Last Modified:

How to block form submission on field entry

I have a form that's getting submitted when the user enters Return after filling in a field, but  I don't want the form to be submitted until the Submit button is selected.   Does anyone know how I can keep a Return after a field is entered from submitting the form?

Thanks
0
steva
Asked:
steva
  • 3
  • 2
  • 2
  • +1
1 Solution
 
AmickCommented:
One way would be to validate the form locally before submission.  Another way would be to capture the Return keystroke and render it incapable of submission
<script type='text/javascript'>
function keypressed(){
if(event.keyCode=='13'){alert('you pressed enter');}
}
</script>
0
 
Tom BeckCommented:
Consider the following example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
<head> 
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />

<script type="text/javascript" language="javascript"> 
function validateFields(f)   
{ 
    if (f.subject.value == "" || f.desc.value == "" || f.category.value == "") {
        //one or more fields are empty
        //do something...
        return false;  //prevent submit
    } else {
        f.submit();    //submit when all fields are validated
        return false;
    } 
}   
</script>
</head>
 
<body>
<form action="#" id="form1" onsubmit="return validateFields(this); return false;">
<div class="container">
<input type="text" id="subject" value="" />
<input type="text" id="desc" value="" />
<input type="text" id="category" value="" />
	<input type="submit" value="Submit" />
</div>
</form>	
</body>   
</html>

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
This page shows basically how to do javascript form validation http://www.w3schools.com/js/js_form_validation.asp similar to @tommboy's example.  In another question, we found that you couldn't count on being able to intercept the return keycode.  But a return in the form or clicking on a Submit button or image does cause the form statement to be executed including any 'onclick' in it.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
AmickCommented:
Since tommyboy provided code to implement the suggestion of  validating the form locally before submit, here's a more complete implementation of capturing the return keystroke and rendering it incapable of submission over any but the submit field:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Return Key Pressed Example</title>

<script language="JavaScript" type="text/javascript">
  <!-- Original:  Volker Schubert (js@volker-schubert.de) -->
  function checkCR(evt) {
    var evt  = (evt) ? evt : ((event) ? event : null);
    var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
    if ((evt.keyCode == 13) && (node.type!="submit")) {return false;}
  }

  document.onkeypress = checkCR;

</script>
</head>
<body>

 <form>
   First name: <input type="text" name="firstname" /><br />
   Last name: <input type="text" name="lastname" /> <br />
   <input type="submit" value="Submit" />
 </form>
</body>
</html>

Open in new window




You may also be interested in another discussion on EE regarding the use of the
Enter Key to Tab to Next Form Field
0
 
stevaAuthor Commented:
Amick,

You say, "One way would be to validate the form locally before submission.."  But that still submits the form to the validation routine, which I don't want, and will continue through that routine and submit the form to the action item if all the fields are filled in, which I definitely don't want.  I want a Return to do absolutely nothing on this page.

You provide  a little routine to make '13' inactive, but It's not clear how this works"

function keypressed(){
if(event.keyCode=='13'){alert('you pressed enter');}
}

First, how is keypressed() called?  Second, I don't see how this function keeps '13' from propagating through after you return from this function and doing what it normally does - submitting the form.

Steve
0
 
Dave BaldwinFixer of ProblemsCommented:
I don't believe you can block the Return key in IE.  This was suggested to replace the regular submit button because apparently IE won't submit a form with a Return key if it isn't there.

<input type="button" value="Submit" onclick="this.form.submit()">
0
 
AmickCommented:
steva, please see  my comment ID:35500600 above, for a fully realized return key capture and neutralizing system that only accepts the return key to submit the form if the submit button has gained focus.  You can eliminate even that by changing line 12 to   if (evt.keyCode == 13) {return false;}



DaveBaldwin, I tested the above referenced code with IE9, and with IE8 and IE7 emulation so it appears that the Return key can be blocked as shown in IE.  Your suggestion of replacing the submit key is an interesting approach that seems to work in IE9 and should work in other browsers as well.


0
 
stevaAuthor Commented:
Thanks.  Sorry for the delay.
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!

  • 3
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now