bootbox confirm not working when inside a <form> tag

Question

I've the following code

html:

<div class="portlet-body">
<div class="table">
    <table class="table table-advance table-hover">
    <thead>
        <tr>
            <th><strong>#</strong></th>
            <th><strong>Status</strong></th>
            <th><strong>Name</strong></th>
            <th><strong>Mobile No</strong></th>
            <th><strong>Phone No</strong></th>
            <th><strong>Email</strong></th>
            <th><strong>Litigation</strong></th>
            <th><strong>Address</strong></th>
            <th colspan="2"><strong>Actions</strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td><span class="label label-md label-danger">Rejected</span></td>
            <td>Mr Name One Ahmed</td>
            <td>441254226688</td>
            <td>441254226688</td>
            <td><a href="mailto:[email protected]">[email protected]</a></td>
            <td>N/A</td>
            <td>5 (Flat 12 ) Temple Street, <br />Nelson, Lanca's, BB95SS</td>

            <form method="post" action="/legalHQ/public/admin/PIClaimant.php" class="mysubmitClass" id="deleteform" >
                <td>
                    <input type="hidden" name="hidden_pi_claimant_id" value="9">
                    <input type="hidden" name="hidden_case_id" value="1">
                    <input type="submit" name="edit" id="btnEdit" class="btn purple btn-xs" value=" &nbsp; Edit &nbsp; " />
                </td>
                <td><input type="submit" name="delete" id="btnDelete" class="btn red btn-xs myconfirm" value=" Delete " /></td>
            </form>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td><span class="label label-md label-warning">Submitted</span></td>
            <td>Mr Name Two Ahmed</td>
            <td>441254226688</td>
            <td>441254226688</td>
            <td><a href="mailto:[email protected]">[email protected]</a></td>
            <td>Yes Litigation</td>
            <td>5 (Flat 2 ) Temple Street, <br />Nelson, Lanca's, BB95SS</td>

            <form method="post" action="/legalHQ/public/admin/PIClaimant.php" class="mysubmitClass" id="deleteform " >
                <td>
                    <input type="hidden" name="hidden_pi_claimant_id" value="10">
                    <input type="hidden" name="hidden_case_id" value="1">
                    <input type="submit" name="edit" id="btnEdit" class="btn purple btn-xs" value=" &nbsp; Edit &nbsp; " />
                    </td>
                <td><input type="submit" name="delete" id="btnDelete" class="btn red btn-xs myconfirm" value=" Delete " /></td>
            </form>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td><span class="label label-md label-success">Accepted and Signed</span></td>
            <td>Mr Name Five Ahmed</td>
            <td>441254226688</td>
            <td>441254226688</td>
            <td><a href="mailto:[email protected]">[email protected]</a></td>
            <td>N/A</td>
            <td>33 Temple Street, <br />Nelson, Lanca's, BB95SS</td>

            <form method="post" action="/legalHQ/public/admin/PIClaimant.php" class="mysubmitClass" id="deleteform " >
                <td>
                    <input type="hidden" name="hidden_pi_claimant_id" value="12">
                    <input type="hidden" name="hidden_case_id" value="1">
                    <input type="submit" name="edit" id="btnEdit" class="btn purple btn-xs" value=" &nbsp; Edit &nbsp; " />
                </td>
                <td><input type="submit" name="delete" id="btnDelete" class="btn red btn-xs myconfirm" value=" Delete " /></td>
            </form>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td><span class="label label-md label-success">Accepted</span></td>
            <td>Mr Name Seven Ahmed</td>
            <td>441254226688</td>
            <td>441254226688</td>
            <td><a href="mailto:[email protected]">[email protected]</a></td>
            <td>N/A</td>
            <td>5 (Flat 2 ) Temple Street, <br />Nelson, Lanca's, BB95SS</td>

            <form method="post" action="/legalHQ/public/admin/PIClaimant.php" class="mysubmitClass" id="deleteform " >
                <td>
                    <input type="hidden" name="hidden_pi_claimant_id" value="13">
                    <input type="hidden" name="hidden_case_id" value="1">
                    <input type="submit" name="edit" id="btnEdit" class="btn purple btn-xs" value=" &nbsp; Edit &nbsp; " />
                </td>
                <td><input type="submit" name="delete" id="btnDelete" class="btn red btn-xs myconfirm" value=" Delete " /></td>
            </form>
            </td>
        </tr>
    </tbody>
    </table>
</div>
</div>

jQuery is below:

$('.myconfirm').click(function(){
    bootbox.confirm("Are you sure?", function(result) {
       alert("Confirm result: "+result);
       // return (result) ? true : false;
    }); 
});

Now I've amended the code with all the forms and data its all fake data though but i want to delete record after confirm dialog box so i asked the question.

bootbox works fine if it is not wrapped around <form> tag, but when inside, it does not work.I don't know what is the issue.

Any Idea?

Answer 1

Working fiddle fiddle

Use following code:

$('.myconfirm').click(function(e){
    e.preventDefault();
    bootbox.confirm("Are you sure?", function(result) {
      // alert("Confirm result: "+result);
        if(result==true){

            $('form').submit();
        }
       // return (result) ? true : false;
    }); 
});

In bootstrap ,Check Which button on Confirm box is clicked? It can be either Yes ,or No. If the result is Yes then submit the form.But if user clicks on No/Cancel .Dont submit the form.