How to put Modal window with gif in the form?

Asked

Viewed 342 times

1

I have a form that I programmed using Phpmailer and I would like that when the user fills the fields and clicks to send, instead of redirecting to another thank you page I wanted to be displayed a kind of "dialog" or better to say a modal window with a thank you text inside. And also before appearing the modal wanted to be displayed a gif on the screen for a few seconds indicating that the form is being sent.

I took a look at this post here, and my code was as follows:

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery('#ajax_form').submit(function () {
                var dados = jQuery(this).serialize();

                jQuery.ajax({
                    type: "POST",
                    url: "contato.php",
                    data: dados,
                    success: function (data)
                    {
                        alert(data);
                    }
                });

                return false;
            });
        });
    </script>
</head>

<div id="formulario">
    <form action="email.php" method="POST" id="ajax_form">
        <ul>
            <li><input type="text" name="Nome" id="nome" placeholder="  Digite seu nome" required name=nome  maxlength="50"></li>
            <li><input  type="email" name="Email" id="email" placeholder="  Digite seu Email" required name=email maxlength="100"></li>
            <li><input type="text" name="Nickname" placeholder="  Digite seu Nickname" required name=nickname maxlength="20"></li>
            <li>
                <select name="Games">
                    <option value ="the-elder" selected>  --- Selecione um jogo ---</option>
                    <option value ="the-elder">The Elder Scrols Online</option>
                    <option value ="archage">ArcheAge</option>
                    <option value ="worlofwarcraft">World of War Craft </option>
                    <option value ="forsaken">Forsaken World</option>
                    <option value ="leagueoflegends">League of Legends</option>
                    <option value ="dota">Dota 2</option>
                    <option value ="smite">Smite</option>
                    <option value ="warface">Warface</option>
                    <option value ="cs">CS-GO</option>
                    <option value ="bf">Battle Field</option>
                    <option value ="cod">Call of Dutty</option>
                </select>
            </li>
            <li><textarea placeholder="  Mensagem" name="Mensagem" required name=mensagem maxlength="300"></textarea></li>
            <li><input type=submit value="Enviar" id="enviar" name="Enviar"/></li>
        </ul>
    </form>
</div>

When I click send this appears on my screen:

jquery ajax

  • It would be interesting if you put the tests you did as you tried to do understand

  • so I have a code friend but I have no idea how to implement it I have this code with me just do not know how to use in this case,

  • 2

    well your current code is something simply copied from another question your ... it is interesting to put tests that you did to where you got.... the way this question of yours asks this kind ... Do it for me ... that nobody will do

  • ok friend I will edit my question for better understanding just a second I will post tbm my dialog code so I can get better

  • @Otto friend edited my npost and put my dialog code in html to see how it was done and if there is any way to implement it in my upload button

  • 1

    So it’s something, good take a look at this post from Bruno http://www.wbruno.com.br/ajax/enviar-formulario-para-php-refresh-jquery-ajax/, I find a much better way to implement using ajax for this

  • amig followed the steps la of the link that Oce passed me and edited my post again a glance of a strange error alias if this was a sahsuasa error

  • 1

    Dude, you’ve already made some 4 derivations of this same question. You’d better at least try to look for the minimum before asking... Well, start by taking out the alert( data ); after the success, soon after search on modal in ajax, to put exactly in the place of alert( data ); , there are several types of modals depending on your taste.

  • You have several questions in a single, confusing one!? The question of showing an image while the form is sent has already been answered here by Sergio. Now, regarding his code, he noticed that the attributes name of their inputs do not have quotation marks? Are name=foo when it should be name="foo". Fix this and see if it solves your problem. :)

Show 4 more comments
No answers

Browser other questions tagged jquery ajax

You are not signed in. Login or sign up in order to post.