Why is my modal data not getting sent to the server?

Question

I have a form and a modal. However, I want the info in the modal to be sent to the server. I have written an ajax call on the SEND button of transaction. However, the main form is getting submitted.

Here is my code-

    <script>

            $(document).ready(function(){
                $("#datepicker").datepicker({ dateFormat: 'dd/mm/yy', maxDate: 0 });

                $("input#submit_trans").click(function(){

                    alert("Submit trans clicked");

                    $.ajax({
                        type: "POST",
                        url: "dotransaction.php",
                        data: $('form.transaction').serialize(),
                        success: function(msg){
                            $("#thanks").html(msg);
                            $("#form-content").modal('hide');   
                        },
                        error: function(){
                            alert("Failed to process transaction");
                        }
                    });
                });
            });
    </script>


Here is my HTML code- 

    <div class="container">
        <form name = "profileForm" id="profile-form" enctype="multipart/form-data" action="update-profile.php" method="post">


</form>

<div class = "row text-center">
            <input class="btn btn-primary" id="submit-button" name="submit-button" type="submit" value="Save">

            <input class="btn btn-danger" id="reset-button" type="reset" value="Reset">


            <div id="addTransaction" class="modal fade" role="dialog" style="display: none;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <a class="close" data-dismiss="modal">×</a>
                            <h3>Add transaction</h3>
                        </div>

                        <div class="modal-body">
                            <form class="transaction" name="transaction">
                                <input type="hidden" name="trans_date" value=<?php echo date("Y-m-d H:i:s");?>><br>

                                <label>Payment mode</label>&nbsp;
                                <select class="form-control" name="trans_payment_mode" id="payment_mode" class="required">
                                    <option value="">Select</option>
                                    <option value="cash">Cash</option>
                                </select><br>

                                <label>Transaction amount</label>&nbsp;
                                <div id = "div_trans_amt">
                                    <label id="rs">Rs.</label>
                                    <input id = "trans_amt" type="text" name="trans_amt" class="input-xlarge"><br>
                                </div>

                                <label>Transaction details</label><br>
                                <textarea name="trans_details" class="input-xlarge" rows="5" cols="75" style="resize:none;"></textarea>

                                <input type="hidden" name="trans_cust_id" value=<?php echo $cid;?>><br>
                                <input type="hidden" name="trans_admin_person" value=<?php echo $aid;?>><br>
                            </form>
                        </div>

                        <div class="modal-footer">
                            <input class="btn btn-success" type="submit" value="Send" id="submit_trans">
                            <a href="#" class="btn" data-dismiss="modal">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>

            <div id="thanks">
                <p><a data-toggle="modal" style="margin-top: 15px;" data-target = "#addTransaction" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p>
            </div>
        </div>
    </div><div class = "row text-center">
            <input class="btn btn-primary" id="submit-button" name="submit-button" type="submit" value="Save">

            <input class="btn btn-danger" id="reset-button" type="reset" value="Reset">


            <div id="addTransaction" class="modal fade" role="dialog" style="display: none;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <a class="close" data-dismiss="modal">×</a>
                            <h3>Add transaction</h3>
                        </div>

                        <div class="modal-body">
                            <form class="transaction" name="transaction">
                                <input type="hidden" name="trans_date" value=<?php echo date("Y-m-d H:i:s");?>><br>

                                <label>Payment mode</label>&nbsp;
                                <select class="form-control" name="trans_payment_mode" id="payment_mode" class="required">
                                    <option value="">Select</option>
                                    <option value="cash">Cash</option>
                                </select><br>

                                <label>Transaction amount</label>&nbsp;
                                <div id = "div_trans_amt">
                                    <label id="rs">Rs.</label>
                                    <input id = "trans_amt" type="text" name="trans_amt" class="input-xlarge"><br>
                                </div>

                                <label>Transaction details</label><br>
                                <textarea name="trans_details" class="input-xlarge" rows="5" cols="75" style="resize:none;"></textarea>

                                <input type="hidden" name="trans_cust_id" value=<?php echo $cid;?>><br>
                                <input type="hidden" name="trans_admin_person" value=<?php echo $aid;?>><br>
                            </form>
                        </div>

                        <div class="modal-footer">
                            <input class="btn btn-success" type="submit" value="Send" id="submit_trans">
                            <a href="#" class="btn" data-dismiss="modal">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>

            <div id="thanks">
                <p><a data-toggle="modal" style="margin-top: 15px;" data-target = "#addTransaction" href="#add-transaction" class="btn btn-primary">Add Transaction</a></p>
            </div>
        </div>
    </div>

I am getting the form data; if I console my transactio modal's form data. However, the ajax call is not going to dotransaction.php' its going to s update-profile.php. Please help.

Answer 1

I believe the from action attribute is pointing to update-profile.php

<form name = "profileForm" id="profile-form" enctype="multipart/form-data" action="update-profile.php" method="post">

So prevent the default action of the submit button, so that the form does not submit

$("#submit_trans").click(function(e){

    e.preventDefault();
    // other code here

Also for the selector you can just use $("#submit_trans") as an ID is unique in a page and should be.