We Keep Coding

submit button works only on 2nd click after onchange called on input text

i have input text field where user can provide some details and on change of text field, ajax function is called to save a data. when user writes something in text field and click on submit button, it calls the ajax function but form is not submitted at the same time. it gets submitted after second click.
i want if user provides some inputs and click on form submit, ajax should get triggered first and after that form should get submitted without need of one more click.below is sample code:
<form:form name ="samplename" action="submitAction">
<form:textarea id="testID" onchange="ajaxmehtod()"></form:textarea>
<input type="button" value="submit">
</form:form>

You could create a regular button with an "onclick" method (e.g. submitForm()), instead of the input type button submit. Also remove the "onchange" method on the textarea.
Then when clicking on the button, check in javascript if the textarea contains any data, then execute the ajaxmethod() and when the ajax is ready, trigger the form submit using $('#samplename').submit();
<form id="sampleName" name ="sampleName" action="">
<textarea id="testID" name="textAreaName"></textarea>
</form>
<button onclick="submitForm()"></button>
In javascript:
function submitForm(){
//Check textarea contains data
....
// Execute ajax method
ajaxMethod();
// If ajax method is done, submit form
$('#sampleName').submit();
}
Something like that?
You can also prevent the default submit action, more info : https://api.jquery.com/submit/

Try input type submit instead of button
<form id="sampleName" name ="sampleName" action="" onsubmit="ajaxmehtod()">
<textarea id="testID" name="textAreaName"></textarea>
<input type="submit" value="submit">
</form>
this will submit your form onsubmit and it u need it onblur of textarea u can add
<textarea id="testID" name="textAreaName" onblur="somefunction()"></textarea>

Pasleyjs Change default behavior of button in parsley form validation

I am using parsleyjs for form validation. I have two buttons 'save' and 'cancel'. I want to use save button for submitting the form, and for cancel button I do not want to submit form. Currently when I click any of them, they take me to form submission
<form id="form_validation">
<div>
<input type="text" required/>
</div>
<div>
<button type="submit">Save</button>
<button type="submit">Cancel</button>
</div>
</form>
<script>
var $formValidate = $('#form_validation');
$formValidate.parsley().on('form:submit', function () {
//this code is called when I click save or cancel button
});
</script>

If you 'cancel' button isn't to submit the form, then it shouldn't have a type="submit". Problem solved.

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.

Simple function onSubmit?

I'm trying to call a simple function onsubmit. I tried using onsubmit and also a listener with jQuery. My problem is that when the user presses enter he gets redirected to mysite.com?
<form id="teleport">
<input id="tInput" type="text" value="Type a location" />
<input type="button" id="tSubmit" value="Submit"/>
</form>
$("#teleport").submit(function () {
teleport(document.getElementById('tInput').value);
});
How do I prevent anything from happening when submitting? Also .submit() is only detecting the enter key, how do I listen for both enter key and clicks on the submit button?

You need to prevent the default action of the form. You can do that with event.preventDefault():
$("#teleport").submit(function (e) {
e.preventDefault();
teleport(document.getElementById('tInput').value);
});
Alternatively, you could return false inside the submit event handler for the same effect.
The easiest way to make the button submit the form too will be to change it's type to submit:
<input type="submit" id="tSubmit" value="Submit" />
Or you could attach a click event handler to your current button and trigger the submit event of the form.

Prevent submiting a form:
$("#teleport").submit(function (e) {
teleport(document.getElementById('tInput').value);
e.preventDefault();
});
Submit event catches any way of submitting a form - both with clicking the submit button and enter key press.

How do I detect how a form was submitted via JavaScript?

I have a form with multiple submit buttons and I'm listening for the 'submit' event via JavaScript. I want to know which submit button or form field (if the user pressed 'Enter/Return') triggered the submit event. Is there a way to get the HTML element that the user clicked on or pressed 'Enter/Return' in?
Update since people aren't understanding me:
This is via JavaScript before the form is submitted. No server-side detection allowed. I also need to handle the form being submitted via the user pressing Enter or Return.
Code
<form action="" method="POST">
<input type="text" name="first_name">
<input type="text" name="item">
<input type="submit" value="Add item">
<input type="submit" value="Submit">
</form>
Clicking 'Add Item' or pressing Return/Enter inside name="item" will add another form field.
Final Note
As far as I can tell, there isn't a way to detect which form field triggered a form submission. If you need to prevent submitting a form that has multiple buttons and/or from Enter/Return, you'll need to use <input type="button"> and bind event handlers to the form fields you want to stop form submission from.

If you have multiple submit buttons, the way you can tell is by giving each of them a unique name attribute, like this:
<input type="submit" name="submit1" value="Submit 1"/>
<input type="submit" name="submit2" value="Submit 2"/>
<input type="submit" name="submit3" value="Submit 3"/>
The one that is focused is sent along with the form submit, so if you clicked the one with a name of "submit2", that would come through in the form POST (or GET). If enter is hit, the first button in the source (in this case submit1) is considered the default and is sent along. You could set it to display:none to use as a dummy for detecting whether enter was pressed vs actually clicking a submit button.
EDIT:
In response to your comments, to capture the enter key getting pressed in certain elements you can do this with jQuery.
Note, you'll need to give first_name and add_item id attributes, and turn add_item into a type="button" instead of type="submit".
HTML:
<form action="" method="POST">
<input type="text" name="first_name"/>
<input type="text" id="item" name="item"/>
<input type="button" id="add_item" value="Add item"/>
<input type="submit" value="Submit"/>
</form>
JS:
$("#item").keydown(function(event){
if(event.keyCode == 13) {
addFields();
event.preventDefault();
event.stopPropagation();
}
});
$("#add_item").click(function(event) {
addFields();
});

You could set the onclick event on each element you are interested and call a javascript function with a different parameter for each element clicked.
From that function you send the idendifier of the button to the server side as a parameter

Just put a different name on each submit button, whichever one was clicked will be submitted (i.e. its name/value pair) with the form. Forms have worked like this since the begining of (WWW) time.
If the form is sumitted by enter or other keypress, no the first submit button name/value pair will be submitted.
Edit
Re-reading your question, you may want to determine how the form was submitted before it is sent. A click listener on the form can remember the last submit button clicked, but in Firefox, pressing enter in an input dispatches a fake click on the first submit button so you can't detect it.
I think you can't do it reliably other than using the basic method suggested above or Jordan's hidden submit button. If you say why you need to do this, perhaps more help can be provided.

here's an option if you don't mind using jQuery:
example: http://jsfiddle.net/U4Tpw/
use something like
$('form').submit(function() {
// identify the form by getting the id attribute
handleWhichForm($(this).attr('id'));
});