CODEWITHSUNDEEP
javascriptjqueryhtmlforms
rybo111
rybo111

Reputation: 12598

jQuery - submit button by clicking containing div

My form submits by clicking one of two buttons.

<form method="post" action="http://testing.com">
  <div class="container red">
    <button type="submit" name="some_name" value="some_value">Btn</button>
  </div>
  <div class="container blue">
    <button type="submit" name="some_other_name" value="some_other_value">Btn</button>
  </div>
</form>

If the user clicks the containing div, I want it to submit the button. I have tried the following:

$("div.container").click(function(){
  $(this).find("button").click();
});

And I have also tried .submit() but neither seem to work. I know there are alternative methods such as using hidden inputs and submitting the form itself, but I'm curious how to specifically submit via a button.

As you can see from this fiddle, clicking the button works. Clicking the div does nothing.

Upvotes: 2

Views: 1062

Answers (5)

hemanth
hemanth

Reputation: 1043

Try 

$(this).parent().submit();

Fiddle

Update:

To avoid infinite recursion use stopPropagation()

$("div.container").click(function(){
         $(this).children('button').click();
});

$("button").click(function(e){
    e.stopPropagation();
});

Fiddle 2

Upvotes: 2

Ian Clark
Ian Clark

Reputation: 9357

Try logging your output and you'll find your problem:

$(".container").on("click", function() {
    console.log("Clicking");
    $("button", this).click();
});

Produces 1000 log events and then dies due to too much recursion. Clearly the child .click() is firing the event which then propagates to the parent and the initial handler is run again.

The other proposed solutions to simply submit the form are incorrect, as that will not post the key-value pair associated with the button you would want to click. The best approach I can think of is to use .one() such that the event on the parent is immediately destroyed. That way you'll retain posting the value of the unique button, but you'll avoid the recursion, (see Fiddle):

$(".container").one("click", function() {
    $("button", this).click();
});

Upvotes: 2

Andrew Templeton
Andrew Templeton

Reputation: 1696

Updated with native click: http://jsfiddle.net/SLkX2/7/

Oooh, what a tricky one. It's a problem with using:

$(someElement).click();

This does not actually simulate a native click event, like the submit button needs. It make a jquery click, it's a pretty nuanced problem. To simulate a real mouse click exactly as a user makes:
(warning, ugly low level code)

$("div.container").click(function(){
    var evt = document.createEvent("MouseEvents"); 
    evt.initMouseEvent("click", true, true, window, 0, 0, 
        0, 0, 0, false, false, false, false, 0, null); 
    $(this).find("button")[0].dispatchEvent(evt);
});

Upvotes: 1

Yury Tarabanko
Yury Tarabanko

Reputation: 45106

Try

$("div.container").click(function(){
    $(this).closest('form').submit();
});

http://jsfiddle.net/tarabyte/SLkX2/5/

Upvotes: -1

jcvegan
jcvegan

Reputation: 3170

Try to set that form a name, like "myForm"

<form id="myForm" method="post" action="http://testing.com">
    <div class="container red">
        <button type="submit" name="some_name" value="some_value">Btn</button>
    </div>
    <div class="container blue">
        <button type="submit" name="some_name" value="some_value">Btn</button>
    </div>
</form>

Then change a litle bit your javascript, using the form submit() method

$("div.container").click(function(){
    $("#myForm").submit();
});

http://jsfiddle.net/SLkX2/4/

Upvotes: -1

Related Questions