簡體   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