Why is my modal data not getting data from the form?

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-

$(document).ready(function(){

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

                e.preventDefault();

                alert("Submit trans clicked"+""+$('form.transaction').serialize());

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

Here is my modal:

<div class="container">

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


        <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">
                <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"></div>

            <div class="row text-center">
                <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>

        </form>

My call is going to my server's doTransaction.php perfectly however, it is not showing me the form data in the alert. Please help

`$('form.transaction').serialize()` in place of this can you send hardcode json or string — vijay, Jan 07 '16 at 05:18
You can use like this var payment=$('#payment_mode').val(); and send by ajax — shiva chauhan, Jan 07 '16 at 05:38
@shivachauhan I tried that.. however, I am still getting an error on serverside — Nevermore, Jan 07 '16 at 05:40
console.log($('#profile-form, .transaction form').serialize()); — devpro, Jan 07 '16 at 05:41
Did you check out the form data is passing or not in the network mode and what is error on server? — shiva chauhan, Jan 07 '16 at 05:42
with the help of devpro.. the form data is now getting posted — Nevermore, Jan 07 '16 at 05:57

score 1 · Accepted Answer · answered Jan 07 '16 at 05:44

1

You are using Nested Forms so you can get serialize value by using this:

$('#profile-form, .transaction form').serialize();

But you must need to test it on cross browsers. It will work fine on FireFox and Chrome, don't know about IE.

For more explanation here is my testing code:

<form id="test">
    <input type="hidden" name="one" value="1">

    <form class="test2">
        <input type="hidden" name="one2" value="1">      
    </form>

</form>

<script type="text/javascript">
    console.log($('#test, .test2 form').serialize());
</script>

Result in console:

one=1&one2=1

answered Jan 07 '16 at 05:44

devpro

16,184
3
27
38

Form data is getting posted. I am getting reponse from server as well. However, onsuccess method doesnt hide the dialog as it is supposed to do. – Nevermore Jan 07 '16 at 06:13
@Nevermore: use this $(this).modal('hide'); – devpro Jan 07 '16 at 06:20
1

I did $('#addTransaction').modal('hide'); and it worked. – Nevermore Jan 07 '16 at 06:34
1

you are genius mate @Nevermore – devpro Jan 07 '16 at 06:34

Chintan Mirani · Answer 2 · 2016-01-07T05:54:42.703

0

Form must not be nested. as per the w3 standard

4.10.3 The form element

Content model:

Flow content, but with no form element descendants.

Here is the link Form

edited Jan 07 '16 at 05:54

answered Jan 07 '16 at 05:30

Chintan Mirani

1,464
9
18

@Chintan I want the form data which is inside my transaction modal's form not the profile-form data. – Nevermore Jan 07 '16 at 05:35
ah, I didn't notice. – Chintan Mirani Jan 07 '16 at 05:53

score 0 · Answer 3 · edited May 23 '17 at 11:52

0

Is it valid to have a html form inside another html form?

Nested form elements are the cause of your problem. I put my modals wherever I want in the document. The bottom of your container div does just fine.

edited May 23 '17 at 11:52

Community

1
1

answered Jan 07 '16 at 05:30

MackProgramsAlot

583
1
3
16

I undertand .. However, I was getting my form data previously and now I am not getting the form data. – Nevermore Jan 07 '16 at 05:34
1

Clean up your html. Then use .submit (). Return false. – MackProgramsAlot Jan 07 '16 at 05:37

Why is my modal data not getting data from the form?

3 Answers3