CODEWITHSUNDEEP
phpjavascriptjqueryajaxcodeigniter
rochellecanale
rochellecanale

Reputation: 205

How to submit a form using jquery dialog button?

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.

My view (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)

<?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)

 public function insertNewSupplier(){

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

 }

Upvotes: 2

Views: 13058

Answers (3)

Silvanu
Silvanu

Reputation: 601

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

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

Upvotes: 0

Nil&#39;z
Nil&#39;z

Reputation: 7475

Try by just changing this line and your usual 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.

$(".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" );
            }
        }
    });
});

Upvotes: 2

SasaT
SasaT

Reputation: 731

You need ajax call

$('#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.

Upvotes: 0

Related Questions