Develop Reference

submit form by button using form.js plugin

I am using this plugin to submit form with file upload.
Usually my forms are posted (without using this plugint) using:
<button id="send">Send</button>
and using js like this:
$('#send').click(function(){
ajaxSubmit();
});
This plugin is looking for the usual
<input type="submit" value="Send">
to send the form so that I can keep my buttons instead of the default buttons. My point is to update my click function to trigger form submitting via this plugin.
The plugin is initialized via:
$("#myForm").ajaxForm(options);
Any help?
My actual workaround is to style input buttons like my standard buttons but I'd prefer to keep all my code the same way (always using buttons to submit forms instead of inputs)

If you check the documentation, there are multiple ways of submitting the form with that plugin:
<input type="submit" name="submitButton" value="Submit1">
<input type="image" name="submitButton" value="Submit2" src="submit.gif">
<button type="submit" name="submitButton" value="Submit5"><span>submit 5</span></button>
You could use the last one. For that, just add type="submit" to your button, and it should be enough:
<button id="send" type="submit">Send</button>

Without seeing more code, the one thing I can say is that your javascript references an object with an ID of "send" but your input has no ID.
Try <input type="submit" id="send" value="Send"/>.

How to submit form, if input out of shape?

Please tell me how to make it work in older browsers as html5 not understand everything, but inside the form can not be put input:
<form onsubmit="checkd();return false" id="form2">
...
</form>
<input type="submit" value="Submit" form="form2" />
P.S. I do not know JS, be grateful for a detailed explanation or example ^^

With JQuery you may do something like:
$("form2").on("submit", function(){
...
});

TypeError: e[h] is not a function

I've been using jquery 1.6 with no problem. Today I switched to jquery 1.8 and suddenly I am getting this error when trying to submit a form:
TypeError: e[h] is not a function.
Form:
<form method="post" action="login?login" name="login" id="login">
<input class="input" type="text" name="user_mail" id="user_mail" autocomplete="on" />
<input class="input" type="password" name="password" id="password" autocomplete="off" />
<a class="green_button" href="javascript:void(0)" id="login_button">Login</a>
<input type="submit" name="login" id="submit" style="visibility:hidden" />
</form>
<script language="javascript">
$("#login_button").click(function(){
$("#login").submit();
});
</script>
Am I missing something?
Thanks!

Remove the line below.
<input type="submit" name="login" id="submit" style="visibility:hidden" />
Update:
Or if you have to use the submit input, then you need to change the id submit to something else. The reason is that if you have an input element with id of submit, it will set a submit property to the form with the HTMLInputElement. So you could not call the .submit method on the HTMLFormElement.

I waster 3 hours trying to fix the same issue, I was using the name='submit' for my submit button and was calling $("#form_name").submit(); in a function and was getting the error. Sometimes small things I overlook end up wasting lot of time.

i think it's because the line
<input type="submit" name="login" id="submit" style="visibility:hidden" />
can you remove it and retry?

When we use a submit type element in a form, This element will be set as Submit property of the form. So one could not call the submit() function with other element of form.
There are two ways to do this. first one is just remove the line as given in first reply.
Or Use $("#submit").trigger("click"); instead of $("#login").submit();. and it will submit the form on pressing enter key word too.

Your form and input have the same name attribute value, login.
Change the name on the input to something else, like submit. This should clear up your error.

With jQuery 1.7 (possibly above too) if you have the name property also called submit it will break.
E.g.
<input type="submit" name="submit" value="Upload">
Will not work, however:
<input type="submit" name="sendSubmit" value="Upload">
Is fine.

value of button using javascript

I have 3 buttons in my form.
All the button actions goes to a same page after clicking it depending upon what button is clicked.
My query is: The name of the buttons are 'add','edit' and 'remove'
When the 'add' button is clicked, using js I need to get the value of that button and similarly for the other two buttons....
Can you please help?

<form>
<script type="text/javascript">
function doAction(value)
{
// Don't really have anything to set...just show the value
alert(value);
}
</script>
<input type="button" value="Add" onclick="doAction(this.value)">
<input type="button" value="Edit" onclick="doAction(this.value)">
<input type="button" value="Remove" onclick="doAction(this.value)">
</form>
There are other ways that involve not even passing the button's value, but they're not as compatible across browsers (IE uses a slightly different event model).
Of course, if you can get by without doing it in Javascript, and can just pass the clicked button to the server, it gets even easier than that...
<form>
<input type="submit" name="action" value="Add">
<input type="submit" name="action" value="Edit">
<input type="submit" name="action" value="Remove">
</form>
and whichever button you click gets put into the url as action=Add or whatever.

What about:
var buttonValue = document.getElementById('IdOfYourButton').value

have you tried: document.getElementById('button_id').value in the js function that you'll call when the button is clicked?

There is target property which you can use.It targets the element which caused the event to occur.
button.addEventListener('click',function(e){
console.log(e.target.value);
});

lock all submit button before page fully rendered

may i know how to use jquery to lock all the <input type="submit/button" .. and only allow submit when page is fully rendered?

Because of the use case, I might approach it differently. Instead of actually disabling the buttons, I would just not allow the submit action to work until the page is loaded. This doesn't require any changes to the existing HTML to work, and your pages won't be rendered useless when JS is disabled:
<script>
// Keep all submit buttons from working by returning false from onclick handlers
$('input:submit').live('click', function () {
return false;
});
// After everything loads, remove the the "live" restriction via "die"
$(window).load(function(){
$('input:submit').die();
});
</script>
Update: Forgot to mention to put both this and the script tag to load the jQuery library in your <head> if you want this solution to work. (Thanks for reminding me Mike Sherov).

By default, you have your submit buttons have the disabled attribute set to true:
<input type="submit" disabled="disabled" />
Then, once the page loads, you can do:
$('input').removeAttr('disabled');

jQuery
$(document).ready(function(){
$(":button,:submit").removeAttr("disabled");
});
HTML
<input type="button" id="button1" value="Button 1" disabled="disabled">
<input type="button" id="button2" value="Button 2" disabled="disabled">
<input type="button" id="button3" value="Button 3" disabled="disabled">
<input type="submit" id="submit" value="Submit" disabled="disabled">

<input id="form-submit" type="submit" disabled="disabled" value="Submit" />
$(document).ready(function() {
$("#form-submit").removeAttr('disabled');
});

Couldn't you do something like
window.onsubmit=function(){return false;}
window.onload=function(){window.onsubmit='';}
I am not sure how the event bubbling would work with an onsubmit. I'd have to test it. Also, I don't know jquery so I'm not sure how to integrate it.