Question

我有一个提交类型为图像的表单。每个图像都有不同的标题。我需要找出点击图片的标题。但是我在表单提交中的单击功能无效。

我的表格是：

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

如何在$("#logForm").submit(function())内获取点击图片的标题值？

如何使用点击图片的ID？

Answer 1

您可以使用event.target属性

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

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

<强> [UPDATE]

我刚才意识到它不起作用。我认为没有一个简单的解决方案。您必须跟踪输入上的click事件并稍后使用它。

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

[更新2] - .focus无效，但.click正在运作 http://jsfiddle.net/gjSJh/1/

Answer 2

我看到它的方式，你有多个提交按钮。而不是在提交时调用该函数，只需单击这些按钮即可调用它，以便您可以轻松访问用户选择的那个：

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

   //do your other functions here.

});

Answer 3

检查以下代码，您可以获得点击图片的标题。

单击

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

        return false;
    });
});

双击

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

        return false;
    });
});

Answer 4

//所有元素的运行时点击事件

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

如果您没有在警报中收到正确的消息，只需使用Firebug进行调试。

Answer 5

在渲染页面中添加以下内容

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

现在，在您的表单提交动作中添加以下行为和yupeee！...你明白了！....

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

jquery点击功能里面的表单提交功能

5 个答案: