Show bootstrap popover after submitting form that is in modal

Ludo

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...

rockStar

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to reset a bootstrap modal after submitting the form in jquery?

Close a bootstrap modal 5 after asynchronously submitting a form with vue js

How to open a bootstrap modal box after submitting a form by barcode scanner

Bootstrap modal submitting my form

Form not submitting after bootstrap confirmation

Deactivate popover over form in modal bootstrap

How to display a bootstrap modal on submitting a form?

I want to open modal after submitting form?

jQuery modal not showing after submitting form

Show a bootstrap popover after finish typing

Django/Bootstrap Modal not submitting

form in modal not submitting with jquery

Modal box on submitting a form

Redirect to a new page after submitting Bootstrap contact modal

How to prevent the modal from closing after submitting form

Show Details in Bootstrap Modal Form, .net core

Angular - Show Bootstrap Modal on Form Submit condition

Show a form-control input inside a Bootstrap Popover

Page is reloading after bootstrap modal('show')

show bootstrap modal after content is loaded

Modal box not show after form validation check

Show modal dialog after form submitted

Django bootstrap modal after form submission

Trigger bootstrap modal after django form submission

Show red border for all invalid fields after submitting form angularjs

How to show a success dialog box after submitting the form in html?

How can I show the output vertically after submitting the html form?

Loading dynamic content into Bootstrap Popover after form submit

Bootstrap form not submitting as POST