asked on

Enter key on html form page

If there are 2 or more submit buttons on an HTML form, if the user hits Enter, it seems that it goes to the one that is physically (on the page) the first. How can I use Javascript to overcome that & force "Enter" to cause a different action?

Thanks

Paul MacDonald

While I would recommend changing your UI, you can intercept keypresses with javascript. In this case, you might need to intercept the page submit in order to capture the submission of the form.

Jeffrey Dake

If I really needed two submit buttons within a single form, I would probably make the button you wanted submitted on the page the submit button. I would then have another button or link on the page, styled to look like a submit button, but then use JavaScript to submit the form when the button was clicked.

Serena Hsi

Maybe one doesn't have to be a submit button, but instead an update answer button.

See example:
https://www.formget.com/change-form-action-with-javascript/

leakim971

var addEventLstnr = function(obj, evt, fct) {
   if(obj.addEventListener)
      obj.addEventListener(evt, fct, false);
   else
      obj.attachEvent("on"+evt, fct);
}

//addEventLstnr(window, "load", function() {
      addEventLstnr(document, "keypress", function(evt) {
           if(evt.keyCode == 10 || evt.keyCode == 13) {
                // don't submit any form on Enter key
                evt.preventDefault();
                // submit the right form, the one having id="myFormID"
                document.getElementById("myFormID").submit();
                // maybe you want a different action, just remove the previous line and add your code below
           }
      });
//});

Open in new window

Shaun Vermaak

If you want to use JQuery

$(document).ready(function ()
{
    $(".tbPassword").keydown(function (e)           /* or keyup  */
    {
        if (e.keyCode == 13) // 27=esc
        {
            $("form").submit();
        }
    });
});

Open in new window

Richard Korts

ASKER

After reviewing you comments (thanks to all), I decided to make one of the submit buttons a plain button, as in this code

<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
	<div class="col-sm-5 col-xs-5 text-center" style="padding-bottom:10px;font-size:18px;"><input type="button" value="Return to Summary" name="faq" style="color:white; background-color: #5B9BD5; border-style: solid; border-color:#41719C; box-shadow: 4px 4px 2px #C3BDBD;" onMousedown="go_summary();"></div>
	<div class="col-sm-5 col-xs-5 text-center" style="padding-bottom:10px;font-size:18px;"><input type="submit" value="Get Rep" name="faq" style="color:white; background-color: #5B9BD5; border-style: solid; border-color:#41719C; box-shadow: 4px 4px 2px #C3BDBD;" onMousedown="ac='f';"></div>
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
</div>

Open in new window

Pressing Enter does nothing.

Isn't it true that pressing enter is the SAME as clicking the Submit Button? If you have code connected with the form, does not that code get executed on Enter?

form statement:
<form method="post" name="st" action="summary.php" onSubmit = "return chk_vals();">

chk_vals():

function chk_vals() {
		if (ac == "f") {
			if (document.st.zip.value == "") {
				alert("Zip / Postal Code Required.");
				return false;
			}
			if (country != "Canada") {
				if (! isnumeric(document.st.zip.value)) {
					alert("Invalid Zip Code.");
					return false;
				}
			}	
			document.st.action = "get_rep.php?zip=" + document.st.zip.value;	
		}
		return true;
	}

Open in new window

Why does Enter not cause chk_vals to be executed and if the validity tests pass, go to get_rep.php?

Thanks

Jeffrey Dake

The enter command should submit the form if your submit button is within the form. I don't have your full html, but your buttons are inside the form correct?

Richard Korts

ASKER

Jeffrey, yes I think so but maybe a Javascript error, I will try with Firebug turned on.

Thanks

Richard Korts

ASKER

Here is full html. I ran this with Firebug turned on, there WAS a Javascript bug, I fixed it & now enter goes to summary.php, NOT as determined by the chk_vals() function.

Does enter NOT execute the onSubmit = Javascript?

I'm just trying to avoid the arcane nuances of onkeydown, etc.

Thanks

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="W3.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Lakos Configurator - Get Freight Quote</title>
 <style>
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
.wrapper{
  max-width:1100px;
min-width:900px;
  margin:0 auto;
  
}
</style> 
<script type="text/javascript">
ac = "";
country = "United States"
	function isdigit(test) {
		if (test == "0" || test == "1" || test == "2" ||
	    	test == "3" || test == "4" || test == "5" ||
	    	test == "6" || test == "7" || test == "8" ||
	    	test == "9" || test == ".")
			return true;
		else {
			return false;
	     }
	}
// Function to determine if a field is numeric
	function isnumeric(field) {
		len = field.length;
		for (i = 0; i < len; i++)
			if (isdigit(field.charAt(i)) == false) {
				return false;
			}
		return true;
	}
function chk_vals() {
		if (ac == "f") {
			if (document.st.zip.value == "") {
				alert("Zip / Postal Code Required.");
				return false;
			}
			if (country != "Canada") {
				if (! isnumeric(document.st.zip.value)) {
					alert("Invalid Zip Code.");
					return false;
				}
			}	
			document.st.action = "get_rep.php?zip=" + document.st.zip.value;	
		}
		return true;
	}
	function prof_window() {
	window.open("profile.php", "profile", "width=1000, height=600, left=800, top=300, scrollbars=yes, menubar=yes, resizable=yes");
		return false;
	}
function go_summary() {
	document.st.submit();
}	
function set_country() {
	document.st.action = "set_country.php?cc=" + document.st.country.value;
	document.st.submit();
}	
</script>	
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
  ga('create', 'UA-5238882-1', 'auto');
  ga('send', 'pageview');
 
</script> 
</head>
<body>
<div class="wrapper">
<form method="post" name="st" action="summary.php" onSubmit = "return chk_vals();">
<input type="hidden" name="hvtype">
<div class="container-fluid" >
<div class="row hidden-xs">
<div class="col-sm-4 col-xs-4"><a href = "http://www.lakos.com/hvac.htm" border="0" target="_blank"><img src="images/logo.jpg" class="img-responsive"></a></div>
<div class="col-sm-2 col-xs-2">&nbsp;</div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="main.php"><h4>Home</h4></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="http://www.lakos.com/About/contact-us" target="blank"><h4>Contact LAKOS</h4></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="index.php"><h4>Login</h4></a></div>
</div>
<div class="row visible-xs">
<div class="col-sm-4 col-xs-4"><a href = "http://www.lakos.com/hvac.htm" border="0" target="_blank"><img src="images/logo_sm.jpg" ></a></div>
<div class="col-sm-2 col-xs-2">&nbsp;</div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="main.php"><h5>Home</h5></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="http://www.lakos.com/About/contact-us" target="blank"><h5>Contact LAKOS</h5></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="index.php"><h5>Login</h5></a></div>
</div><div class="row">
	<div class="col-sm-12 col-xs-12" style="padding-top:3px;">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-12 col-xs-12 text-center" style="padding-top:2px; padding-bottom:2px; background-color:#0A2F98; color: white; font-size:20px"><b>HT Product Configurator</b></div>
</div>
<div class="row hidden-xs">
	<div class="col-sm-12 col-xs-12" style="padding-top:10px; padding-bottom:20px; padding-left:50px; font-size:20px"><b>Find a Local Rep</b></div>
</div>
<div class="row visible-xs">
	<div class="col-sm-12 col-xs-12" style="padding-top:10px; padding-bottom:20px; padding-left:50px; font-size:20px"><b>Find a Local Rep</b></div>
</div>
<div class="row">
	<div class="col-sm-6 col-xs-6 text-right" style="font-size:16px;padding-bottom:30px;">Enter Country</div>
	<div class="col-sm-6 col-xs-6" style="font-size:16px;padding-bottom:30px;"><select name="country" onChange="set_country()";>
	<option value="">--- Select Country ---</option>
				<option value="United States" selected>United States</option>
			
				<option value="Canada" >Canada</option>
			
				<option value="Mexico" >Mexico</option>
			
				<option value="Afghanistan" >Afghanistan</option>		
	</select>
	</div>
</div>
<div class="row">
	<div class="col-sm-6 col-xs-6 text-right" style="font-size:16px;padding-bottom:30px;">Enter Zip / Postal Code</div>
	<div class="col-sm-6 col-xs-6" style="font-size:16px;padding-bottom:30px;"><input type="text" name="zip" style="width:100px;">
	</div>
</div>
	
<div class="row">
	<div class="col-sm-10 col-xs-10" style="padding-top:4px;">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
	<div class="col-sm-5 col-xs-5 text-center" style="padding-bottom:10px;font-size:18px;"><input type="button" value="Return to Summary" name="faq" style="color:white; background-color: #5B9BD5; border-style: solid; border-color:#41719C; box-shadow: 4px 4px 2px #C3BDBD;" onMousedown="go_summary();"></div>
	<div class="col-sm-5 col-xs-5 text-center" style="padding-bottom:10px;font-size:18px;"><input type="submit" value="Get Rep" name="faq" style="color:white; background-color: #5B9BD5; border-style: solid; border-color:#41719C; box-shadow: 4px 4px 2px #C3BDBD;" onMousedown="ac='f';"></div>
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-10 col-xs-10" style="padding-top:4px;">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-12 col-xs-12" style="font-size:15px;">Please email any questions, comments, or feedback to <a href="mailto:lit@lakos.com">lit@lakos.com</a></div>
</div>
<div class="row">
	<div class="col-sm-10 col-xs-10" style="padding-top:4px;">&nbsp;</div>
</div>	
<br><br>	
</div>
</form>
</div>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Jeffrey Dake

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Richard Korts

ASKER

Jeffery,

That's right, you got it. I don't need ac = anything as long as I put the action to the right place. I recognize now that pressing Enter does NOT set ac = 'f'.

I'll try that, if it works, you get the points.

Thanks!!