jquery click function inside form submit function

Question

I have a form with number of submit type as images. Each image has a different title. I need to find out the title of the clicked image. But my click function inside form submit is not working.

My form is:

  <form action='log.php' id='logForm' method='post' >
  <?
   for($j=1;$j<=5;$j++)
   {
    ?>
   <input type="image" src="<?=$img;?>" title="<?=$url;?> id="<?="image".$j?> class="images" />
    <?
    }
    ?>
   </form>

Jquery:

    $("#logForm").submit(function(e)
    {


  $(".advt_image").click(function(event) {
        var href=event.target.title;
    });





           var Form = { };
            Form['inputFree'] = $("#inputFree").val();
         //   if($("#freeTOS").is(":checked"))
                    Form['freeTOS'] = '1';

            $(".active").hide().removeClass('active');
            $("#paneLoading").show().addClass('active');


var url="http://"+href;

      $.post('processFree.php', Form, function(data)
            {
                    if(data == "Success")
                    {
                            $("#FreeErrors").html('').hide();
                            swapToPane('paneSuccess');

                     setTimeout( function() {  location=url }, 2500 );


                    return;




                    }

                    swapToPane('paneFree');
                    $("#FreeErrors").html(data).show();
            });

            return false;
    });

How can I get the title value of clicked image inside this $("#logForm").submit(function())?

How can I use the id of clicked image for that?

Community · Accepted Answer · 2017-05-23 12:20:05Z

3

You can use event.target property

$("#logForm").submit(function(e)
    alert($(e.target).attr('title'));
});

http://api.jquery.com/event.target/

[UPDATE]

I just realized it wouldn't work. I don't think there is a simple solution to this. You have to track the click event on the input and use it later.

jQuery submit, how can I know what submit button was pressed?

$(document).ready(function() {
    var target = null;
    $('#form :input[type="image"]').click(function() {
        target = this;
        alert(target);
    });
    $('#form').submit(function() {
        alert($(target).attr('title'));
    });
});

[Update 2] - .focus is not working, but .click is working http://jsfiddle.net/gjSJh/1/

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Jul 3, 2012 at 5:20

Joyce Babu

20.9k13 gold badges66 silver badges103 bronze badges

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

6 Comments

Zendie Over a year ago

Thanks for you reply. I am new to jquery. could you please give me an example? can I use this event.target inside $("#logForm").submit(function() {}); ?

Zendie Over a year ago

Sorry..alert message is blank :(

Imdad Over a year ago

The target of submit event will be the form. how it can be the image button?

Joyce Babu Over a year ago

@Zendie - Did you see my update? The JSFiddle example is working.

Zendie Over a year ago

Yes..i have seen..but couldn't get the title yet. :(

|

Chris · Accepted Answer · 2012-07-03 05:44:58Z

0

The way i see it, you have multiple submit buttons. Instead of calling the function on submit, call it on the click of these buttons so you can easily access the one the user chose:

$('input.images').click(function(e) {
    e.preventDefault(); //stop the default submit from occuring
    alert($(this).attr('title');

   //do your other functions here.

});

answered Jul 3, 2012 at 5:44

Chris

7161 gold badge6 silver badges12 bronze badges

Comments

selladurai · Accepted Answer · 2012-07-03 06:07:37Z

0

// Runtime click event for all elements

$(document).on('vclick', '.control', function (e) { // .control is classname of the elements
    var control = e.target;
    alert(e.currentTarget[0].id);
});

if you are not getting proper message in alert, just debug using Firebug.

answered Jul 3, 2012 at 6:07

selladurai

6,81714 gold badges59 silver badges89 bronze badges

Comments

Hkachhia · Accepted Answer · 2012-07-03 06:18:41Z

0

Check following code you can get the title of clicked image.

Single click

$(document).ready(function()
{
    $('#logForm').submit(function(e){
         $(".images").click(function(event) {
            alert(event.target.title);
        });

        return false;
    });
});

Double click

$(document).ready(function()
{
    $('#logForm').submit(function(e){
         $(".images").dblclick(function(event) {
            alert(event.target.title);
        });

        return false;
    });
});

edited Jul 3, 2012 at 6:18

answered Jul 3, 2012 at 5:56

Hkachhia

4,5458 gold badges44 silver badges79 bronze badges

7 Comments

Zendie Over a year ago

.images is class of input type images?

Hkachhia Over a year ago

Ya you can get the title of clicked images using class

Hkachhia Over a year ago

Plz complete double cot of title and id of images in your for loop

Zendie Over a year ago

yes, I have corrected title quote. But click event is not working within $('#logForm').submit(function(e){ }

Hkachhia Over a year ago

Declare href variable globally instead of click function because you can use this local variable outside the function

|

Dhrumil Bhankhar · Accepted Answer · 2012-07-03 11:12:32Z

0

add following ondomready in your rendering page

$(document).ready(function(){
    $("form input[type=image]").click(function() {
        $("input[type=image]", $(this).parents("form")).removeAttr("clicked");
        $(this).attr("clicked", "true");
    });
});

Now in your form's submitt action add follwing behaviour and yupeee!... you got it!....

$("#logForm").submit(function(e)
    {
        var title = $("input[type=image][clicked=true]",e.target).attr("title");
        .....
        .....
    });

answered Jul 3, 2012 at 11:12

Dhrumil Bhankhar

1,3411 gold badge14 silver badges15 bronze badges

Collectives™ on Stack Overflow

jquery click function inside form submit function

5 Answers 5

6 Comments

Comments

Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related