Question

我有一个表单，就是在远程模态窗口中。这是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>

这里是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>

现在我的问题是：我需要在不点击提交按钮后显示引导弹出框，但是当表单真的发送时。我在浏览器中进行验证（没有php正则表达式或jQuery验证，只需在浏览器中）。我的方法是关注（在收集数据并在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\">";

但是这第二个命令（在评论中不起作用）。我是php的新手，所以我尽量让我的解决方案尽可能简单。我希望我已正确解释了我的问题。 THX ...

Answer 1

不是将action放到表单中，而是将其留空并使用jquery执行提交调用。

<强> SCRIPT

此脚本可以与您的data/send_mail.php进行通信，并从html input获取id of name的值，我们可以将其作为参数传递给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>

完整的网址为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>

希望这有帮助。

在提交模态的表单后显示bootstrap popover

1 个答案: