繁体   English   中英

Bootstrap Modal Popup Jquery Post验证如何?

[英]Bootstrap Modal Popup Jquery Post validation how?

我正在尝试创建一个带有验证的弹出窗口和表单,但由于某种原因我的模式没有出现。

<div id="thanks" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
  <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Redeem Points</h4>
    </div>
    <div class="modal-body">
     <form class="form-horizontal"  class="contact" name="commentform" method="post" action="<?php bloginfo('template_url'); ?>/sendredeempoints.php" enctype="multipart/form-data">
            <div class="form-group">
            <h3>You may only redeem the maxium points of : <?php echo $maxpoints;?></h3>
                <input type="hidden" name="playerid" value="<?php echo $playerId;;?>" />
                  <input type="number"  valuemax="<?php echo $maxpoints;?>" name="points" class="form-control" placeholder="How many points do you wish to redeem." />                  
                   <label class="control-label col-md-4" for="Comments">Comments?</label>


        </div>
        <div class="form-group">
                <div class="col-md-6">
                    <button title="" data-original-title="" type="submit" value="Submit" class="btn btn-custom pull-right" id="send_btn">Send</button><div style="top: -4px; left: 279px; display: block;" class="popover fade right in"><div class="arrow"></div><h3 style="display: none;" class="popover-title"></h3><div class="popover-content">Thank You</div></div>
                </div>
            </div>
        </form>
    </div><!-- End of Modal body -->
    </div><!-- End of Modal content -->
    </div><!-- End of Modal dialog -->
</div><!-- End of Modal -->

我正在使用下面的jquery转到我的处理文件,但是由于某种原因,我的模式对话框没有显示出来,只是使div向上可见,但是没有对话框? 是的,我确实在主题标题中安装了lattest引导程序和js

<script>
 $(function () {
     //twitter bootstrap script
     $("button#submit").click(function () {
         $.ajax({
             type: "POST",
             url: "process.php",
             data: $('form.contact').serialize(),
             success: function (msg) {
                 $("#thanks").html(msg)
                 $("#form-content").modal('hide');
             },
             error: function () {
                 alert("failure");
             }
         });
     });
 });
</script>

Process.php

<?php         
$playerid = $_POST['playerid']; // required        
$points = $_POST['points']; // required
$mymessage = $_POST['userMessage']; // required    
$email_from='davidbuckleyni@gmail.com';
$email_subject = $_POST['mysubject'];
$email_to =$_POST['toEmail'];

$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $mymessage, $headers);
?>

Edit Ok,div现在看起来正常,但是它只是拒绝执行ajax请求,即使php与该php文件位于同一目录中,也使我进入了在wordpress中找不到的页面。

引导模态无法显示。 如果要显示模态,则必须调用它。

单击按钮时显示模式:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#thanks">
    Show modal
</button>

页面加载后显示模式:

$(window).load(function () {
        $('#thanks').modal('show');
    })

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM