How to submit a form using jquery dialog button?

php javascript jquery ajax codeigniter

12,934

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

12,934

Author by

rochellecanale

Updated on June 04, 2022

Comments

rochellecanale almost 2 years

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

 }

rochellecanale almost 11 years

The previous example works only for submit button. Is there a way how can i get the button id of the jquery ui dialog button?
rochellecanale almost 11 years

i did that. After i fill up the fields and click the OK button there's an alert pop up but the form does not go to my controller.
Nil'z almost 11 years

what does it alerted?
Nil'z almost 11 years

change this line : data : $("#addSupplier").serializeArray(), to data : {'data' : $("#addSupplier").serializeArray()}, and this alert("Submitted !!!"); to alert("Submitted !!!"+resp);. On your controller write print_r($_POST);die; in the first line. Let me know the alert it gave.
rochellecanale almost 11 years

when i clicked the OK button a pop up appeared displaying the word Submitted and a sets of array.
Nil'z almost 11 years

Yeah right. Now you just need to pass that array in your model and write the code for the insert. That's it. Your form is submitted ! :D
Nil'z almost 11 years

Accept the answer if it helped you.
rochellecanale almost 11 years

one more question how can i pass the array in my model?
rochellecanale almost 11 years

as of now my controller contains the print_r($_POST);
rochellecanale almost 11 years

How can i access or pass it in my model?
rochellecanale almost 11 years

Should i directly call it like $this->input->post('sample_name'); ?
Nil'z almost 11 years

write : $this->model_name->function_name($this->input->post('data'))‌. In your model declare a function like function function_name($form_array){//your code here}
rochellecanale almost 11 years

what does $this->input->post('data') means? is it my textfield name? so if i have many text field i need to call my model according to the number of the textboxes.
rochellecanale almost 11 years

or should i place $this->input->post('data') in an array and pass it to my model?
Nil'z almost 11 years

let us continue this discussion in chat