We Keep Coding

submitting a form via jquery removes submit input variable

Here's my HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="test" method="get" action="">
<input type="hidden" name="var1" value="true" />
<input type="submit" name="var2" value="submit" />
</form>
<script>
$("#test").submit();
</script>
The resultant request that that makes has var1 in it but not var2. My question is why and what can I do to get var2?
Here's a live demo:
http://www.frostjedi.com/terra/dev/submit.php

try: method="post" in form or use <button type="submit"></button>

A form should submit the value of a submit button only if it's clicked to submit the form (see HTML5 4.10.22.4 Constructing the form data set). Calling the submit method doesn't click the button, so it doesn't submit the value.
The code you've posted will endlessly submit the form, thanks.
You can call the click method of the button, but that may not work (i.e. submit the button's value) everywhere:
<form id="test" method="get" action="">
<input type="hidden" name="var1" value="true">
<input type="submit" name="var2" value="submit">
</form>
<button onclick="$('#test')[0].var2.click()">submit form</button>
Or, as user3701524 suggests, use method=post if that suits.

The value on button will only be submitted when u actually CLICK that button. To make it all work nice, I recommend binding to
$('form').on('submit', function(e) {
// here you have the button value if it was clicked.
e.preventDefault(); // optional this prevent default submission.
});
either way, calling $('form').submit() will NOT send the button value because is not triggered by the button itself.
Hope it helps!

How to make a form submit on div click using jquery?

I already tried this in single php file but doesn't work out, so i tried now in two separate php file one for form and another one for process.
How to submit the form on a div or link click?
Code i tried
$(document).ready(function(){
jQuery('.web').click(function () {
$("#g_form").submit();
alert('alert');
});
});
FORM
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="submit"/>
</form>
<div class="web">click</div>
Here is the process file code p.php
<?php
if(isset($_POST['f1'])){
echo $_POST['f1'];
} ?>
When i click the submit button the form is submitting but when i click the .web div it is not submitting the form even i get the alert message but not submitting.
What wrong am doing here? It'll be helpful if i get a idea.

.submit() docs
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method.
Name conflicts can cause confusing failures. For a complete list of
rules and to check your markup for these problems, see
DOMLint.
You give your submit button a name of submit, which the above passage tells you will cause "confusing failures"
So if you accessed the dom element and looked at the .submit property you would see that since you name the button submit instead of .submitbeing a function its a reference to the buttons dom element
HTML
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="submit"/>
</form>
<div class="web">click</div>
JS
//Get the form element
var form = $("#g_form")[0];
console.log(form.submit);
//prints: <input type="submit" value="submit!" name="submit"/>
And when you change the submit name
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" name="psubmit"/>
</form>
<div class="web">click</div>
JS
var form = $("#g_form")[0];
console.log(form.submit);
//prints: function submit() { [native code] }
so simply give your submit button a different name that does not conflict with a form's properties.

You can trigger submit button click.
<form action="p.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
<input type="submit" value="submit!" id="f_submit" name="submit"/>
</form>
<div class="web">click</div>
$(document).ready(function(){
jQuery('.web').click(function () {
$("#f_submit").trigger( "click" );
alert('alert');
});
});
DEMO : http://jsfiddle.net/awladnas/a6NJk/610/

HTML (provide a name for the form, strip the name from the submit):
<form action="p.php" name="g_form" id="g_form" method="post">
<input type="text" name="f1" value="">
<input type="submit" value="submit!"/>
</form>
<div class="web">click</div>
JavaScript
//use jQuery instead of $ in the global scope, to avoid conflicts. Pass $ as parameter
jQuery(document).ready(function($){
//use on(), as it's the recommended method
$('.web').on('click', function () {
//use plain JavaScript. Forms are easily accessed with plain JavaScript.
document.g_form.submit();
alert('alert');
});
});

Change the name of the submit and Try,
<input type="submit" value="submit!" name="mySubmit"/>

Remove the submit from the form and try again:
<form action="http://test.com" id="g_form" method="GET">
<input type="text" name="f1" value=""/>
</form>
<div class="web">click</div>
I changed the action to a real URL and the method to a GET so something is seen changing.
Fiddle

$(".web").live('click', DivClick);
function DivClick(){
$("#g_form").submit();
}

Select submit button of specific form for click event

If I have the following form, how can I select the submit button based on the form ID to be used for a click event?
<form id="login">
<input type="text" name="email">
<input type="text" name="password">
<input type="submit" name="submit">
</form>
Something like the following works, but it can't just be input[name=submit] because there may be more than one on the page.
$('input[name=submit]').click(function (e) {
e.preventDefault();
console.log('clicked');
});

This will automatically select the form's submit control:
$('#login :submit').click(...);
http://api.jquery.com/submit-selector/
Cheers

Use :
document.querySelectorAll("input[type=submit]")[0].click();

Use
$('#login input[type="submit"]')
You can read http://www.w3.org/TR/selectors/ for all CSS selectors.. (jQuery supports all default selector + more http://api.jquery.com/category/selectors/)

Jquery submit form error

I have a form which I want to submit upon button click which is outside the form, here is my HTML :
<form id="checkin" name="checkin" id="checkin" action="#" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
Here is my jQuery :
$("button").live('click', function() {
$("#checkin").submit();
});
$("#checkin").live('submit', function() {
});
When I click submit button inside the form its submitting ok, but its not submitting when I click on the button which is outside the form tags, why? how can I fix this ?

You are selecting all the <button> elements but you are trying to select an <input>.
It works when it is inside the form because the the normal submit functionality runs.
Change the selector to match the element you actually have: input[type=submit]
Better yet, forget about the JS and just structure your HTML better so that the submit button is inside the form.

If you're handling the form processing using JavaScript, then you'll want to return false in your button and form processing code.
I was able to achieve identical results using the JavaScript below, and the two HTML examples (with the button inside and outside of the form element).
JavaScript/jQuery
$("button").live('click', function() {
$("#checkin").submit();
return false;
});
$("#checkin").live('submit', function(){
alert("Hello world!");
return false;
});
HTML Example 1
Button inside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
<button>test</button>
</form>
HTML Example 2
Button outside the form.
<form id="checkin" name="checkin" id="checkin" action="" method="post">
<input type="text" tabindex="100" class="identifier" name="identifier" id="identifier">
<input type="submit" tabindex="101" value="Submito" class="elsubmito" name="submit">
</form>
<button>test</button>
As I said, both examples performed as expected. You may want to double-check your button listening code to ensure that you are in fact using the button element. If you're using an element with the id attribute set to button, then you'll want to ensure you are using the proper jQuery selector:
$("#button").live('click', function() { // ...

you can have a simple hyperlink outside of your form like this
click to submit and that's all you need

.submit() doesn't work with Firefox and Greasemonkey

I'm trying to make an auto login script and I'm stuck on the submit part...
The source of the submit form from the website is
<input type="submit" value="Sign In" class="signin" id="sumbitLogin">
and I'm trying
document.getElementById("sumbitLogin").submit();
if I set an Attribute, for example the value, it changes just fine...
How can I solve it?

You don't submit an input field. You submit a form.
<form id="formid">
<input type="submit" value="Sign In" class="signin" id="sumbitLogin">
</form>
and ..
document.getElementById("formid").submit();

Use form_name.submit()
<form id='myform' action='formmail.pl'>
Here is the code to submit a form when a hyperlink is clicked:
<form name="myform" action="handle-data.php">
Search: <input type='text' name='query' />
Search
</form>
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
</script>