We Keep Coding

submit doesn't work in form with multiple inputs without button [duplicate]

This question already has answers here:
Why does forms with single input field submit upon pressing enter key in input
(13 answers)
Why does a FORM with one text INPUT submit on enter while one with two text INPUTs does not? [duplicate]
(3 answers)
Closed 2 years ago.
I found a strange behavior and I can't explain it. My question is if following behavior is a bug or is it documented.
In the following 3 forms only two can be submitted on press enter. The first form doesn't submit on enter key. Why?
function onSubmit() {
alert('Submit');
}
First:
<form onsubmit="onSubmit(); event.preventDefault()">
<input />
<input />
</form>
Second:
<form onsubmit="onSubmit(); event.preventDefault()">
<input />
</form>
Third:
<form onsubmit="onSubmit(); event.preventDefault()">
<input />
<input />
<button></button>
</form>
A form with only one input works. A form with a button works. But a form with two inputs without buttons doesn't work.

How to validate html code using javascript? [duplicate]

This question already has answers here:
HTML form action and onsubmit issues
(3 answers)
Closed 3 years ago.
i know there are other questions like mine but before you mark it as a duplicate could you please read it.
i am trying to validate my html form using javascript.
i have done this before in another web page and it worked correctly however i am trying to use the same code for my new page but it does not work.
this is the code:
function validateForm(form) {
var valid = true;
if (!form.title.value.length)
{
valid = false;
document.getElementById('titleRequired').style.display = "inline-block";
}
else
{
document.getElementById('titleRequired').style.display = "none";
}
}
<form id="form" action="register.php" method="post" onsubmit="return validateForm(this)">
<h2> create profile: </h2>
<div>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="Given Name">
<span class="error" id="fNameRequired">first name required</span>
<span class="error" id="capitalRequired">first letter must be capital</span>
</div>
<div>
<input type="submit" value="Submit" name="submit" >
</div>
</form>
i have more inputs for this form however i am doing it step by step and not sure where i am going wrong.
i have this exact same code on another project i worked on with more inputs and it works fine.
the output i am currently getting is: it submits the form as normal even when no text is entered.

You're not returning the result of the validation. Add return valid; before the last curly brace to return false or true so the submit handler knows what to do.

Onsubmit not executing [duplicate]

This question already has answers here:
Why can't I call a function named clear from an onclick attribute?
(3 answers)
Closed 4 years ago.
onsubmit does not execute in the code snippet below when you press the submit button. It should show 'Submitting' in the javascript console when you press Submit.
function submit(v) {
console.log('Submitting');
}
<form action="#" onsubmit="submit()">
<input type=submit />
</form>

It's a name collision. Name your function something other than submit, it worked for me then.
See below:
function a () {
console.log('Submitting');
}
<form action="#" onsubmit="a()">
<input type=submit />
</form>

submit() is a predefined method in javaScript which submits a form. Just rename it to another name.
function submit2(v) {
console.log('Submitting');
}
<form action="#" onsubmit="submit2()">
<input type=submit />
</form>

How can i fire a function inside an input-field? or a default button with that function without actually submitting?

It works:
When the button is used
The problem is:
When pressing enter inside the text-field, the default action seems to be submit. I just want it to use the button available as default. Is this possible or will i have to highjack the enterpress with javascript?
Code:
<form>
<label>Password:<input type="password" id="pass" name="pass"></label>
<input type="button" value="hämta data" onclick="getData('password.txt')"/>
</form>

By default, pressing Enter in the last field of a form submits the form. Try this:
<form onsubmit="return false;">
so that submitting the form doesn't do anything.

How can I disable the normal submit on enter behavior on a text input and replace it with a function of my own?

I've tried quite some fixes i found on stackoverflow and elsewhere but I couldn't get any of them to work properly. They either disable the enter key everywhere or just don't work at all (or they're not properly explained).
I need the normal submit on enter key behavior to work on all the other elements except this one text input and for it to be replaced with my own function when the text input is selected.

How to get whether the Enter is pressed?
$('input.the-one-text-input').keydown(function(e) {
if(e.keyCode == 13) { // enter key was pressed
// run own code
return false; // prevent execution of rest of the script + event propagation / event bubbling + prevent default behaviour
}
});
Also note this comment on that page:
** If anyone has reached this from Google (like I did), know that "keyup" instead of "keypress" works in Firefox, IE, and Chrome. "keypress" apparently only works in Firefox.
Which isn't 100% correct anymore, since it also works works in Chrome. However it wouldn't surprise me if it still doesn't work in IE.

http://jsfiddle.net/yzfm9/9/
Basically check which input is focused and do custom stuff depending on it
HTML
<form id="nya">
username <input type="text" id="input_username" /><br/>
email <input type="text" id="input_email" /><br/>
hobby <input type="text" id="input_hobby" /><br/>
<input type="submit" />
</form>
JS
$('#nya').submit(function() {
var focusedId = ($("*:focus").attr("id"));
if(focusedId == 'input_email') {
// do your custom stuff here
return false;
}
});

Returning false when enter is pressed on "onkeydown" will disable the default behaviour. Then you can just call your function on the "onkeyup" event.
<input type="text"
onkeyup="myFunction()"
onkeydown="return event.keyCode != 13;"/>

Just had a play with jQuery's .keypress() method and it looks like it does the job.
HTML
<form method="post" action="">
<input type="text" name="submit1" id="submit1" />
<input type="text" name="noSubmit1" id="noSubmit1" />
<input type="text" name="submit2" id="submit2" />
<input type="submit" />
</form>​
JQuery
​$('#noSubmit1​​​​​​​​​​​​​​​').keypress(function(event) {
if (event.which == 13 ) {
event.preventDefault();
}
});​​
It basically adds a keypress event to the correct input field, then checks for which key was pressed. If it was the enter button (13), it then prevents the default action (form submission) from happening. See it in action here: http://jsfiddle.net/cchana/UrHz7/2/