Question

I’m breeding over this problem now for a while and I can not find an answer.

I’m developing an application with the Twitter Bootstrap and PHP/Mysql, I have a simple form that I would like to have a jquery confirm modal on, if OK is clicked the form should be posted, if No is clicked nothing should happen.

Now I simplified the form and jquery already to the bare minimum, and it’s still not working.

This is the form I have now:

<div class="container-fluid">
    <div class="row-fluid">
        <form method="post" action="" data-confirm="Are you sure you want to delete?">
            <div class="span6">
                <div class="control-group">
                    <label class="control-label" for="inputIcon">Add New Network</label>
                        <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-tag"></i></span>
                            <input class="input-xlarge span6" id="inputIcon" type="text" placeholder="Network Name" name="network">
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputIcon">Network Timezone</label>
                        <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-globe"></i></span>
                            <?php echo $this->timezones; ?>
                        </div>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="submit" name="save_network" class="btn btn-primary"><i class="icon-ok icon-white"></i> Save Network</button>
                </div>      
            </div>

---

This is the jquery I’m using:

/* confirmation dialogs */
$(document).ready(function() {
    $('form[data-confirm]').submit(function() {
        var form = this;
        if (!$('#dataConfirmModal').length) {
            $('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div>');
        }
        $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
        $('#dataConfirmModal').modal({
            show: true
        });
        $('a#dataConfirmOK').click(function() {
            $("form").submit();
        });
        return false;
    });
});

---

And this is the function in my controller which invokes the model

<?php

    // if settings form was submitted, save settings data
    if(isset($_POST['save_network']))
    {
        $this->model->insert_network('reports', $_POST);
    }

?>

I don’t want ajax or so, just a simple form submit, the weird thing is that when I submit the form manually, it works perfectly. The data from the form is saved in the database, but when I use jquery .submit(); the form is submitted but nothing is saved.

Any help would be highly appreciated.

Answer 1

in my controller I check if the form was submitted by checking if the name value for the button is set:

if(isset($_POST['save_network']))
{
$this->model->insert_network('reports', $_POST);
}

AND WHEN YOU SUBMIT A FORM WITH JQUERY THE BUTTON IS NEVER CLICKED; HENCE: THRERE IS NO BUTTON NAME SET… UGH

Sorry for screaming 😀 But this kept me busy for a good 6 hours, before I discovered that this really is the issue… A lesson learned I will NEVER forget!

Hopefully this helps someone else: If you submit a form with jquery, and you check if a form was submitted in php by looking at the button name… That is the problem you are having jquery submits the form direct so only the name values of the form fields are set, not that from the input button itself.

---

So instead of checking if a form was submitted by using:

if(isset($_POST['save_network']))

one should maybe better check like this:

if($_SERVER['REQUEST_METHOD'] == "POST")