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.

Patrick Evans · Accepted Answer · 2014-02-03 18:04:08Z

5

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

edited Feb 3, 2014 at 18:04

answered Feb 3, 2014 at 17:43

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

rram Over a year ago

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

Patrick Evans Over a year ago

@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);

Alex Over a year ago

@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 Over a year ago

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

Alex Over a year ago

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

Awlad Liton · Accepted Answer · 2014-02-03 17:29:15Z

3

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/

answered Feb 3, 2014 at 17:29

Awlad Liton

9,3513 gold badges30 silver badges53 bronze badges

5 Comments

rram Over a year ago

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

Senthilmurugan Over a year ago

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

Fabricio Over a year ago

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 Over a year ago

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

Patrick Evans Over a year ago

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

Alex · Accepted Answer · 2014-02-03 17:46:05Z

2

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

answered Feb 3, 2014 at 17:46

Alex

14.7k5 gold badges45 silver badges60 bronze badges

1 Comment

rram Over a year ago

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

Senthilmurugan · Accepted Answer · 2014-02-03 17:37:26Z

1

Change the name of the submit and Try,

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

answered Feb 3, 2014 at 17:37

Senthilmurugan

3831 silver badge14 bronze badges

1 Comment

Senthilmurugan Over a year ago

Not sure about the reason.

Fabricio · Accepted Answer · 2014-02-03 17:43:07Z

1

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

answered Feb 3, 2014 at 17:43

Fabricio

84110 silver badges22 bronze badges

Comments

Sérgio S. Filho · Accepted Answer · 2014-02-03 17:33:22Z

-1

$(".web").live('click', DivClick);

function DivClick(){
    $("#g_form").submit();
}

answered Feb 3, 2014 at 17:33

Sérgio S. Filho

421 silver badge8 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

5 Comments

5 Comments

1 Comment

1 Comment

Fiddle

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

5 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related