Show bootstrap popover after submitting form that is in modal

Question

I have a form, that is in remote modal window. Here is the modal in index.html:

<a data-toggle="modal"  href="contact.html" data-target="#myModal">Contact Me</a>
<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>
    </div>
</div>

Than here is acctual form in contact.html:

<script>
    $('#pop').popover({content: 'Message send.'},'click');    
</script>

<form id="contactform" method="post" action="data/send_mail.php">
    <!--
    here is whole form content
    -->
    <button type="submit" value="Submit" class="btn btn-custom" data-toggle="popover" data-placement="right" id="pop">Send</button>
</form>

Now my problem is: I need to show bootstrap popover after not clicking on the submit button but when the form is really send. I do the validation in browser(no php regular expressions or jQuery validate, simply in browser). My approach was following (after gathering the data from from and creating message in send_mail.php):

@mail($email_to, $email_subject, $email_message, $headers);
    /* Here should be something that will make my popover show, like: echo ('$('#pop').popover('show')');*/
sleep(2);
echo "<meta http-equiv='refresh' content=\"0; url=../index.html\">";

But this second command (in comment does not work). I am total newbie in php, so I try to make my solutions as simple as possible. I hope that I have explained my problem properly. Thx...

Answer 1

Instead of putting an action to the form you can just leave it blank and do the submit call using jquery.

SCRIPT

This script will be able communicate with your data/send_mail.php and by getting the value from the html input which has an id of name we can pas that as a parameter to the send_mail.php.

<script type="text/javascript">
    $('#myButton').on('submit', function(){
            var data_value = $('#name').val();
            var data_value2 = $('#name2').val();
            var data_value3 = $('#name3').val();
            var url = 'data/send_mail.php';
        $.ajax({
                type: "GET",
            url: url,
            data:{'data_to_pass':data_value,
                           'second_data': data_value2,
                            'third_data': data_value3},
            success:function(){   
                $('#pop').popover('show'); 
            }
        });
    });
</script>

the complete URL will be data/send_mail.php?data_to_pass=data_value

HTML

<form>
    <input id="name" type="text" placeholder="input something here" required />
    <button id="button" type="button" value="Submit" class="btn btn-custom" data-toggle="popover" data-placement="right" id="pop">Send</button>
</form>

Hope this helps.