Menu
I have the following code:
<head>
<script language="javascript">
function subimiti(event){
alert("Tipo do submit: "+event);
}
</script>
</head>
<body>
<form id="f1" name="form1" onsubmit="subimiti(event)" action="http://www.google.com">
<input type="text" id="meuId" value="Teste"/>
<input id="butao" type="submit" value="Subimeta u fórmi trem bão!!"/>
</form>
In my JavaScript function I want to detect the event that causes the form submit. If it was by an enter key in my text field, or if it was by clicking on the button.
252
To submit the form using 'Enter' button, we will use jQuery keypress() method and to check the 'Enter' button is pressed or not, we will use 'Enter' button key code value. Explanation: We use the jQuery event. which to check the keycode on the keypress.
And the following JavaScript code to detect whether the Enter key is pressed: const input = document. querySelector("input"); input. addEventListener("keyup", (event) => { if (event.
Answer: Use the keypress event To check whether a user has pressed Enter key while on specific input, you can use the keypress event in combination with the enter key code 13 .
Since the keypress event fires the click event when there's a submit button, the only workaround that I can think of is having a type=button instead.
Pure javascript (Fiddle):
<form id="f1" name="form1" action="" onsubmit="subimiti(this)" method="POST">
<input type="text" id="meuId" value="Test" onkeypress="setEvent(event)"/>
<input id="butao" type="button" onclick="setEvent(event)" value="Subimeta u formi trem bao!!"/>
</form>
function subimiti(form)
{
event.preventDefault();
alert(form.getAttribute('event'));
}
function setEvent(event)
{
if(event.type == 'click')
{
document.form1.setAttribute('event','click');
subimiti(document.form1);
}
else if (event.keyCode == 13)
{
document.form1.setAttribute('event','keypress');
}
}
Using jQuery (cleaner/easier code in my opinion):
$(function(){
$('form').submit(function(){
alert($(this).attr('event'));
});
$("input#butao").on('click', function(e) {
$("form").attr("event", "click").submit();
});
$("input").on('keypress', function(e) {
if (e.which == 13)
{
$("form").attr("event", "keypress");
}
});
});
There's a click listener for butao only and enter listener for any input.
<form id="f1" name="form1" action="">
<input type="text" id="meuId" value="Teste"/>
<input id="butao" type="button" value="Subimeta u formi trem bao!!"/>
</form>
Fiddle (added preventDefault to fiddle so you could see the results without actually submitting)
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
