javascript 如何使用jquery对话框按钮提交表单?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17801099/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 09:40:57  来源:igfitidea点击:

How to submit a form using jquery dialog button?

phpjavascriptjqueryajaxcodeigniter

提问by rochellecanale

Hello guys just want to ask about how can i process a form submission using the jquery dialog button. In my code I have a button that when you click. It will pop up a form in a dialog box. Below is the jquery buttons for OK and CANCEL. My problem is I can't submit my form the only option that I have is to create a submit button inside my form. But i want to use the jquery button instead. Im using CodeIgniter I hope you can help me.

大家好,我想问一下如何使用 jquery 对话框按钮处理表单提交。在我的代码中,我有一个按钮,当您单击时。它将在对话框中弹出一个表单。下面是确定和取消的 jquery 按钮。我的问题是我无法提交表单,我唯一的选择是在表单中创建一个提交按钮。但我想改用 jquery 按钮。我正在使用 CodeIgniter 我希望你能帮助我。

My view (showAllSuppliers.php)

我的观点(showAllSuppliers.php)

 /* FOR ADD PAGE */    
    $(".hero-unit input[name=add_supplier]").on('click',function(){
        $('#popup').load("<?php echo site_url("supplier_controller/addNewSupplier/"); ?>").dialog({
            title: "Add New Supplier",
            autoOpen: true,
            width: 800,
            modal:true,
            position: "center",
            buttons: {
                OK: function(){
                     $("#addSupplier").submit(); //HOW CAN I SUBMIT MY FORM USING THIS?
                },
                CANCEL: function() {
                    $(this).dialog( "close" );
                }
            }
        });
    });

my form (addNewSupplier.php)

我的表单(addNewSupplier.php)

<?php
$attr = array('id'=>'addSupplier');
echo form_open('supplier_controller/insertNewSupplier');  
..
.. 
..
... MY TEXTBOX FIELDS HERE
..
..
//echo "<input type='submit' value='ADD' />"; ANOTHER OPTION FOR SUBMISSION
echo form_close();
?>

my controller function(supplier_controller.php)

我的控制器功能(supplier_controller.php)

 public function insertNewSupplier(){

        $this->supplier_model->insertNewSupplierDetail();
        redirect('supplier_controller/index','refresh');

 }

采纳答案by Nil'z

Try by just changing this line and your usual js:

只需更改此行和您常用的 js 即可尝试:

$attr = array('id'=>'addSupplier');
echo form_open('supplier_controller/insertNewSupplier', $attr);

If still does not submits the form then try to submit by ajax call.

如果仍然没有提交表单,则尝试通过ajax调用提交。

$(".hero-unit input[name=add_supplier]").on('click',function(){
    $('#popup').load("<?php echo site_url("supplier_controller/addNewSupplier/"); ?>").dialog({
        title: "Add New Supplier",
        autoOpen: true,
        width: 800,
        modal:true,
        position: "center",
        buttons: {
            OK: function(){
                 $.ajax({
                    url     : '<?=base_url()?>supplier_controller/insertNewSupplier',
                    type    : 'POST',
                    data    : $("#addSupplier").serializeArray(),
                    success : function(resp){
                        alert("Submitted !!!");
                        $(this).dialog( "close" );
                    },
                    error   : function(resp){
                        //alert(JSON.stringify(resp));
                    }
                 });
            },
            CANCEL: function() {
                $(this).dialog( "close" );
            }
        }
    });
});

回答by Silvanu

If you want to use classic form submission instead of ajax call, write these code lines for the buttonsparameter:

如果要使用经典表单提交而不是 ajax 调用,请为按钮参数编写以下代码行:

buttons: {
            OK: function(){
                 $(this).dialog().find('form').submit();
            },
            CANCEL: function() {
                $(this).dialog( "close" );
            }
        }

回答by SasaT

You need ajax call

你需要ajax调用

$('#submit').click(function (){
        var first_name = $('#first_name').val();
        $.ajax({
            url : '/supplier_controller/insertNewSupplier,
            type : 'post',
                    data : first_name,
            success : function(){
                        //do something;
                        console.log(first_name);
                    }           
                })
                    return false;
            });

That's gonna work if you ad id to submit button and to your input. But you can also call them via html tags. It's just an idea or example for you.

如果您将 id 广告为提交按钮和输入,那将会起作用。但是您也可以通过 html 标签调用它们。这对你来说只是一个想法或例子。