CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-modal
user605505
user605505

Reputation: 59

jquery form .submit event not triggered

i am trying to trigger on submit event on a form and validate it. two things are not working in my code the first one is that the onsubmit event is not triggered, the second one is that input field of type email is not validated i used html5 input type email and required but still to no a vale. i do not know what am i doing wrong. here is the code:

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Learn PHP CodeIgniter Framework with AJAX and Bootstrap</title>
    <link href="<?php echo base_url('assests/bootstrap/css/bootstrap.min.css')?>" rel="stylesheet">
    <link href="<?php echo base_url('assests/datatables/css/dataTables.bootstrap.css')?>" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <h3>Contacts</h3>
        <br />
        <button class="btn btn-success" onclick="add_contact()"><i class="glyphicon glyphicon-plus"></i> Add Contact</button>
        <br />
        <br />
        <table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th style="width:0px;"></th>
                    <th>first name</th>
                    <th>last name</th>
                    <th>phone</th>
                    <th>email</th> 
                    <th style="width:125px;">Action</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($contacts as $contact){?>
                    <tr>
                        <td style="width:0px;"><?php echo $contact->id;?></td>
                        <td><?php echo $contact->first_name;?></td>
                        <td><?php echo $contact->last_name;?></td>
                        <td><?php echo $contact->phone;?></td>
                        <td><?php echo $contact->email;?></td>
                        <td>
                            <button class="btn btn-warning" onclick="edit_contact(<?php echo $contact->id;?>)"><i class="glyphicon glyphicon-pencil"></i></button>
                            <button class="btn btn-danger" onclick="delete_contact(<?php echo $contact->id;?>)"><i class="glyphicon glyphicon-remove"></i></button>
                        </td>
                    </tr>
                 <?php }?>
            </tbody> 
            <tfoot>
                <tr>
                    <th style="width:0px;">ID</th>
                    <th>first name</th>
                    <th>last name</th>
                    <th>phone</th>
                    <th>email</th>
                    <th>Action</th>
                </tr>
            </tfoot>
        </table> 
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="<?php echo base_url('assests/bootstrap/js/bootstrap.min.js')?>"></script>
    <script src="<?php echo base_url('assests/datatables/js/jquery.dataTables.min.js')?>"></script>
    <script src="<?php echo base_url('assests/datatables/js/dataTables.bootstrap.js')?>"></script> 
    <script type="text/javascript">
        $(document).ready( function () {
            $('#table_id').DataTable();
            $('#form').submit(function(event) {
                save();
                event.preventDefault();
            });
        } );
        var save_method; //for save method string
        var table;


        function add_contact()
        {
            save_method = 'add';
            $('#form')[0].reset(); // reset form on modals
            $('#modal_form').modal('show'); // show bootstrap modal
            //$('.modal-title').text('Add Person'); // Set Title to Bootstrap modal title
        }

        function edit_contact(id)
        {
            save_method = 'update';
            $('#form')[0].reset(); // reset form on modals

            //Ajax Load data from ajax
            $.ajax({
                url : "<?php echo site_url('contacts/ajax_edit/')?>/" + id,
                type: "GET",
                dataType: "JSON",
                success: function(data)
                {
                    $('[name="id"]').val(data.id);
                    $('[name="first_name"]').val(data.first_name);
                    $('[name="last_name"]').val(data.last_name);
                    $('[name="phone"]').val(data.phone);
                    $('[name="email"]').val(data.email);


                    $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
                    $('.modal-title').text('Edit Contact'); // Set title to Bootstrap modal title

                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert('Error get data from ajax');
                }
            });
        }

        function save()
        {
            console.log("submitting");
            var url;
            if(save_method == 'add')
            {
                url = "<?php echo site_url('contacts/contact_add')?>";
            }
            else
            {
              url = "<?php echo site_url('contacts/contact_update')?>";
            }
            if($('#form')[0].checkValidity())
            // ajax adding data to database
                $.ajax({
                    url : url,
                    type: "POST",
                    data: $("#form").serialize(),
                    dataType: "JSON",
                    //contentType: 'application/json; charset=utf-8',
                    success: function(data)
                    {
                        //console.log(url);
                        //if success close modal and reload ajax table
                        $('#modal_form').modal('hide');
                        location.reload();// for reload a page
                    },
                    error: function (jqXHR, textStatus, errorThrown)
                    {
                        alert('Error adding / update data');
                    }
                });
            else
            {
                return false;
            }
        }

        function delete_contact(id)
        {
            if(confirm('Are you sure delete this data?'))
            {
            // ajax delete data from database
                $.ajax({
                    url : "<?php echo site_url('contacts/contact_delete')?>/"+id,
                    type: "POST",
                    dataType: "JSON",
                    success: function(data)
                    {

                       location.reload();
                    },
                    error: function (jqXHR, textStatus, errorThrown)
                    {
                        console.log(errorThrown);
                        alert('Error deleting data');
                    }
                });
            }
        }

    </script>

    <!-- Bootstrap modal -->
    <div class="modal fade" id="modal_form" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h3 class="modal-title">Contact Form</h3>
                </div>
                <div class="modal-body form">
                    <form action="#" id="form" class="form-horizontal" onsubmit="save();">
                        <input type="hidden" value="" name="id"/>
                        <div class="form-body">
                            <div class="form-group">
                                <label class="control-label col-md-3">first name</label>
                                <div class="col-md-9">
                                    <input name="first_name" placeholder="first name" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">last name</label>
                                <div class="col-md-9">
                                  <input name="last_name" placeholder="last name" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">phone</label>
                                <div class="col-md-9">
                                    <input name="phone" placeholder="phone" class="form-control" type="text"> 
                                </div>
                            </div>
                            <div class="form-group">
                                    <label class="control-label col-md-3">email</label>
                                    <div class="col-md-9">
                                        <input type="email" name="email" placeholder="email" class="form-control requiredField" required>
                                    </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <input type="submit" id="btnSave" class="btn btn-primary" value="save">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- End Bootstrap modal --> 
</body>

Upvotes: 0

Views: 208

Answers (2)

emsoff
emsoff

Reputation: 1605

You need your submit button to be within the form element. Right now it is placed outside of the form. 

<form action="#" id="form" class="form-horizontal" onsubmit="save();">
    <!-- Form stuff -->
    <div class="modal-footer">
        <input type="submit" id="btnSave" class="btn btn-primary" value="save">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
    </div>
</form>

Example. Note that the PHP won't work, but you'll see the form submit.

Upvotes: 1

Vikrant Jain
Vikrant Jain

Reputation: 135

you have a form in modal box which you want to submit.

Upvotes: 0

Related Questions