Question

32

Bootstrap success alert upon form submition via javascript

rated 0 times [ 33] [ 1] / answers: 1 / hits: 33738 / 9 Years ago, sat, august 29, 2015, 12:00:00

I've been searching the internet for hours to try to understand how to make a dismissible green alert slide down (non-modal) when a user submits a form. I'm thinking it has something to do with form validation but not sure. Please help.

The code isn't working, because when I click submit on the form, nothing happens. The validation is not applying to the form. (the form action attribute has been left empty.) method=post

I am using a form processing script provided by the server (not sure if that makes a difference.)

so my question is: how can I link the submit button to send the form to the sever, then show a dismissible success alert via jQuery that will fit into a col-md-4?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

naomim

Add To Favorites

Follow

Total Points: 344

Total Questions: 95

Total Answers: 114

Location: Wales

Member since Mon, May 17, 2021

3 Years ago

answered 9 Years ago monetm · Accepted Answer

Here's a simplified way of how you can do it within a Bootstrap modal. All we're doing here is checking if the form has been submitted via jQuery, then showing the message in a modal.

Here's how to incorporate that with PHP

<!DOCTYPE html>

    <html lang=en>

    <head>

        <meta charset=utf-8>

        <meta http-equiv=X-UA-Compatible content=IE=edge>

        <title></title>

        <meta name=viewport content=width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0>

        <link href=http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css rel=stylesheet>

    </head>

    <body>



        <div class=container>



            <div id=messages class=hide role=alert>

              <button type=button class=close data-dismiss=alert aria-label=Close><span aria-hidden=true>&times;</span></button>

              <div id=messages_content></div>

            </div>



            <form id=form method=post>

                <button class=btn btn-default type=submit>Submit</button>

            </form>

        </div>



        <script src=http://code.jquery.com/jquery.js></script>

        <script src=http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js></script>



        <script>

            $('#form').submit(function(e) {

                $('#messages').removeClass('hide').addClass('alert alert-success alert-dismissible').slideDown().show();

                $('#messages_content').html('<h4>MESSAGE HERE</h4>');

                $('#modal').modal('show');

                e.preventDefault();

            });

        </script>



    </body>

</html>