jquery ajax form submit with twitter bootstrap modal

Question

i'm developing a chat and i want that the clients click on the button "Click here and start ur chat" and will open the form and after submit form "Start Chat"...

But i can't submit using ajax, i checked the console log, nothing appears strange!

<!DOCTYPE html>
<html>
<head>
    <title>Start Chat</title>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" media="all" href="css/chat.css" />
    <link type="text/css" rel="stylesheet" media="all" href="css/bootstrap.css" />
</head>
<body>
    <center> 

            <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Click here and start ur chat
    </button>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Write ur info below</h4>
              </div>
              <div class="modal-body">
                <form action="" method="POST" id="form">                    
                    <table width="100%">
                        <tr>                        
                            <td>Name: </td> <td><input type="text" name="name" placeholder="Name"></td>
                        </tr>
                        <th>&nbsp;</th>
                        <tr>                        
                            <td>Mail: </td> <td><input type="text" name="mail" placeholder="Mail"></td>
                        </tr>
                    </table>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="start">Start Chat</button>
              </div>
            </div>
          </div>
        </div>
            <!-- javascript:chatWith('3','Ronaldo') -->

    </center>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/chat.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){   

            $("#start").click(function(){
                $("#form").submit(function(e){

                    $.ajax({

                        url: "dateRecd.php",
                        type: "POST",
                        data: $(this).serialize(),

                        success: function(data){
                            alert(data);
                        //  chatWith('9','name');
                        }


                    });

                });
            });     
        });
    </script>
</body>
</html>

You for sure need to preventDefault if you Ajax the form. Also Now you just assign the submit handler. It is not executed — mplungjan, Jan 17 '14 at 17:37
did your schema like this : start(click) => show modal => click submit chat; ? — Faytraneozter, Jan 17 '14 at 17:40

score 2 · Answer 1 · edited Jul 08 '14 at 06:00

Instead submit in the form, kindly try with the "click" action.

$(document).ready(function(){   

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

            $.ajax({

                url: "dateRecd.php",
                type: "POST",
                data: $(this).serialize(),

                success: function(data){
                    alert(data);
                //  chatWith('9','name');
                }


            });

        });
    //});     
});

score 2 · Answer 2 · edited May 23 '17 at 12:08

In fact, what happens when you click the button "start" ? As you add a click handler to the "start" button, as following :

$("#form").submit(function(e){
//...
}

you add a sumbit handler of the form when you click the button. nothing more, no submit, no ajax action.

To get what you want, there are 2 simple ways:

in the click handler of the button, delete the form submit handler, and do the ajax submit, like what @Thiru says;
delete the button click handler, use form submit handler, like @Faytraneozter propoese.

But the second way doesn't work. why?

Firstly, you have 4 buttons in your page, how does your page know which button clicked should fire the submit action? You should add type="submit" to the button, so that your page knows that when you click this button, you mean to submit the form.

Secondly, when you fire the submit action of the form, it is submitted by HTML, NOT ajax. You should add the line e.preventDefault to prevent the submit by HTML. Here is https://stackoverflow.com/a/1357151/1165178 a answer which explains well e.preventDefault.

score 1 · Answer 3 · edited Mar 10 '15 at 11:13

1

just remove the #start click

    $(document).ready(function(){   

        //$("#start").click(function(){ // that will done a double verification
            $("#form").submit(function(e){

                $.ajax({

                    url: "dateRecd.php",
                    type: "POST",
                    data: $(this).serialize(),

                    success: function(data){
                        alert(data);
                    //  chatWith('9','name');
                    }


                });

            });
        //});     
    });
</script>

edited Mar 10 '15 at 11:13

Md Riad Hossain

291
4
21

answered Jan 17 '14 at 17:44

Faytraneozter

865
2
10
18

2

Change this To this Start Chat An put it INSIDE the
tag
– Rogerio Chaves Jan 22 '14 at 12:35
shouldn't you put async:false? – CrabbyPete Nov 20 '17 at 03:43

jquery ajax form submit with twitter bootstrap modal

3 Answers3