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.

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.

• javascript
• php
• jquery
• html
• forms

6 Answers 6

.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();
}