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

Question

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.

Solution 1

.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.

Solution 2

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/

Solution 3

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

Solution 4

Change the name of the submit and Try,

<input type="submit" value="submit!" name="mySubmit"/>

Solution 5

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

View more solutions

Comments

[rram]

Thanks +1. This works. It would be helpful to me if i know the reason why it was not working

[Senthilmurugan]

Not sure about the reason.

[Senthilmurugan]

Not sure exactly, guessing it would be because of the Name(submit) of the Input Submit. Use some other name and try.

[Fabricio]

Yes. It surely is related to that input field because either renaming it (see @Senthilmurugan answer) or removing it (see my answer) it starts working.

[Awlad Liton]

@rram : yes it was the problem the button name.

[Patrick Evans]

See my answer as to why this happens, when you use a form property name as the name of element it overwrites the form's property with that name

[rram]

THanks +1. Is this [0] array for form in js?

[Patrick Evans]

@rram, since jquery returns an array when selecting elements this just gets the underlying dom object from the jquery object. its a shortcut instead of having to do $("#g_form").get(0);

[rram]

THanks +1 for the new way document.g_form.submit();

[Alex]

@rram, all jQuery selectors are also arrays. Even if it's one element, it's still an array. Thus, document.getElementById("myId") is has the identical result as $("#myId")[0].

[rram]

THanks for your help.+1

[rram]

THanks for your help.+1

[rram]

Sorry for asking questions then why people say for example $('.chart').something as jquery object and selectors instead of arrays @AlexanderMP

[Alex]

@rram, because it does more than an array. You can $('...').fadeOut() for example. You can't do that with arrays. This functionality is provided by jQuery. This is a jQuery object.