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>

onclick vs. $.post how to isolate a button function vs. submission? [duplicate]

I just found out that every time onclick event for my <button> placed inside <form> tag triggers, form submits it's data as if i clicked <input type='submit'>.
I don't want that. Buttons inside my form serve other task, form shouldn't submit data after i clicked one of them.
To be more clear, i want this code:
<form action="http://www.google.com" method="POST">
<button onclick="alert('hi!')">Button</button>
<br>
<input type="submit" value="submit"/>
</form>
to show alert "hi!" when i click on the Button and it shouldn't open Google after that. It should only show Google when i press "submit".

Specify type="button":
<button type="button" onclick="alert('hi!')">Button</button>
From the linked article:
This [submit] is the default if the attribute is not specified

Try this..
onclick="alert('hi!'); return false;"

With jQuery use a span rather than an input, put use the .button call and then set a click event.

Loading window in classic asp

I have a button in the form in a page1.asp.
I am getting getting response from page2.asp after form submission.
It is take sometime for processing data in page2.asp.
User stays at page1 and clicking the button again and again.
so I want to have an "Loading window" while data processing and user could not click the Button again.
please help me to get this done.
Thanks in advance.
AGM Raja

You can use submit button's "onclick" event both to disable the button (so user won't be able to click it again) and to display "Loading..." message to the user.
At the very simplest you can display the message in the button itself, e.g.
<input type="submit" value="submit" onclick="this.disabled=true;this.value='Please wait...'" />
Demo: http://jsfiddle.net/t4f3T/
UPDATE
I don't know why it worked in my own tests, but Shadow Wizard pointed errors of my way: Form will not be submitted by disabled button, you have to add form.submit() yourself:
<input type="submit" value="submit" onclick="this.disabled=true;this.value='Please wait...';form.submit()" />
Demo 2: http://jsfiddle.net/t4f3T/2/

Onclick shouldn't trigger form data submission

I just found out that every time onclick event for my <button> placed inside <form> tag triggers, form submits it's data as if i clicked <input type='submit'>.
I don't want that. Buttons inside my form serve other task, form shouldn't submit data after i clicked one of them.
To be more clear, i want this code:
<form action="http://www.google.com" method="POST">
<button onclick="alert('hi!')">Button</button>
<br>
<input type="submit" value="submit"/>
</form>
to show alert "hi!" when i click on the Button and it shouldn't open Google after that. It should only show Google when i press "submit".

Specify type="button":
<button type="button" onclick="alert('hi!')">Button</button>
From the linked article:
This [submit] is the default if the attribute is not specified

Try this..
onclick="alert('hi!'); return false;"

With jQuery use a span rather than an input, put use the .button call and then set a click event.

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'));
});