Jquery UI:使用submit方法提交特定表单

发布于 2024-12-28 18:59:13 字数 2260 浏览 0 评论 0原文

我有一个关于 Jquery ui 对话框的问题。

我有/我做了什么:我有多种形式(取决于从mysql结果返回的结果)。表单看起来像这样:

<form action="?" method="POST" id="form1">

    <input type="text" name="title"/>

     .................................
      other inputs
     .................................

     <input type="submit" class="delete" id="delete" name="delete" value="delete"/>

</form>

相同的表单,但仅表单的 id 为“form2”,或者取决于查询(form3、form4 等......)

jquery 代码

$(document).ready(function(){

                var $dialog = $('<div></div>').html('<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Do you really want to delete it?')

                .dialog({

                            autoOpen:false,

                            resizable: false,

                            height:140,

                            modal: true,

                            title:'Confirm delete',

                            buttons: {

                                "Yes": function(){

                                *********************************       
                                document.forms["form1"].submit();
                                *********************************

                                $(this).dialog("close");   

                                },

                                "No": function(){

                                    $(this).dialog("close");

                                }

                            }

                });

                $('#delete').click(function(){

                            $dialog.dialog('open');

                            return false;

                });

    });

我是什么想要实现什么? 我想仅针对删除按钮所在的表单触发提交操作。我的意思是,如果用户单击 form1 上的删除按钮,则只应提交 form1。我用星号突出显示了 Jquery 代码中的一行。 在该特定行上,当用户单击删除按钮时,应检索相应表单或表单索引的 id(删除按钮所属的)并仅提交该特定表单。

我面临的问题: 我可以对表单 ID 进行硬编码,但我无法准确知道表单的数量,因为它取决于搜索词。所以我试图动态检索它。是否可以?

ps 在删除按钮单击事件上,如果我选择 $('#delete'),则它仅适用于一种表单。如果我使用 $('.delete'),它会提交所有表单还是可能会覆盖? (我猜因为在执行 var_dump($_POST) 时它返回一个空数组)

任何帮助将不胜感激。如果需要更多信息,我可以提供。

I have a Question regarding Jquery ui dialog boxes.

What i have/i did: I have multiple forms(depending upon the result returned from mysql result). the forms looks like this:

<form action="?" method="POST" id="form1">

    <input type="text" name="title"/>

     .................................
      other inputs
     .................................

     <input type="submit" class="delete" id="delete" name="delete" value="delete"/>

</form>

the same form but only with id of the form as 'form2', or depending on the query (form3, form4 etc....)

jquery codes

$(document).ready(function(){

                var $dialog = $('<div></div>').html('<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Do you really want to delete it?')

                .dialog({

                            autoOpen:false,

                            resizable: false,

                            height:140,

                            modal: true,

                            title:'Confirm delete',

                            buttons: {

                                "Yes": function(){

                                *********************************       
                                document.forms["form1"].submit();
                                *********************************

                                $(this).dialog("close");   

                                },

                                "No": function(){

                                    $(this).dialog("close");

                                }

                            }

                });

                $('#delete').click(function(){

                            $dialog.dialog('open');

                            return false;

                });

    });

What i want to achieve?
I want to trigger the submit action for only the form in which the delete button is in. What i meant is, if user clicks the delete button on form1, then only form1 should be submitted. I have highlighted one line in Jquery code with stars. on that particullar line, when the user clicks the delete button, the id of the corresponding form or form index should retrieved (to which the delete button belongs) and submit only that particular form.

the problem i am facing:
i can hardcode the form ids but there is no way i can exactly know the number of form as it depends on the search term. So i am trying to retrieve it dynamically. is it possible?

p.s. on the delete button click event, if i select $('#delete'), it'l work for only one form. If i use $('.delete'), it is submitting all forms or may be over writing? (i guess because on doing var_dump($_POST) it is returning an empty array)

Any help would be appreciated. and if more information needed, i can provide.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

屋顶上的小猫咪 2025-01-04 18:59:13

@itachi

你不能给多个elememts相同的id。
更改您的代码如下

$('.delete').click(function(e){
    e.preventDefault();  
    currentForm = $(this).parent('form').get(0);
    $dialog.dialog('open');
    return false;
});

buttons: {

    "Yes": function(){
        if(currentForm){
            currentForm.submit();
        }
        $(this).dialog("close");   
    },
    "No": function(){
        $(this).dialog("close");
    }
}

您可以在此处查看运行演示

@itachi

you can't give same id to multiple elememts.
change your code as below

$('.delete').click(function(e){
    e.preventDefault();  
    currentForm = $(this).parent('form').get(0);
    $dialog.dialog('open');
    return false;
});

and

buttons: {

    "Yes": function(){
        if(currentForm){
            currentForm.submit();
        }
        $(this).dialog("close");   
    },
    "No": function(){
        $(this).dialog("close");
    }
}

you can view running demo here

怼怹恏 2025-01-04 18:59:13

希望这会对您有所帮助

$(this).parent('form').attr('name')
$(this).parent('form').serialize() 
$('.delete').click(function(){

   alert($(this).parent('form').attr('name'));
   alert($(this).parent('form').serialize());

});

,谢谢

May this will help you

$(this).parent('form').attr('name')
$(this).parent('form').serialize() 
$('.delete').click(function(){

   alert($(this).parent('form').attr('name'));
   alert($(this).parent('form').serialize());

});

Thank you

缺⑴份安定 2025-01-04 18:59:13

该功能可以是

<script>
function submitform(formname){
$(document).ready(function() {
    $(("#"+formname)).submit(function() {
        $.post('page.php', $(this).serialize(), function(data) {
            $("#cart").append(data);
        });
        return false;
    });
}); 
}
</script>

表单提交按钮

您可以在渲染表单时指定表单名称

<button class="large-6 columns" type="submit" onclick="javascript:submitform('formname')">Select</button>

The function can be

<script>
function submitform(formname){
$(document).ready(function() {
    $(("#"+formname)).submit(function() {
        $.post('page.php', $(this).serialize(), function(data) {
            $("#cart").append(data);
        });
        return false;
    });
}); 
}
</script>

Form submit button

You can give form name while rendering your form

<button class="large-6 columns" type="submit" onclick="javascript:submitform('formname')">Select</button>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文