小贝子编程

使用带有验证的 php 在弹出窗口中预览表单详细信息



我需要为预览按钮添加弹出窗口。当用户单击预览按钮时，应显示表单的验证以及包含详细信息的弹出窗口。如果字段为空，则应显示必需字段，然后在用户输入后弹出所有要显示的详细信息。在我的代码中，当用户单击预览按钮时，弹出窗口和必需两者都可以协同工作。

这是代码。

  <form method="post" align="center" action="">
                                <div class="login">
                                    <div class="login-form">
                                        <h3>Title:</h3>
                                        <input type="text" name="title" required="required" /><br />
                                        <h3>Image:</h3>
                                        <input type="text" name="image"  required="required"/>
                                        <br />
                                        <h3>Date:</h3>
                                        <input type="text" id="filter-date" name="date"  required="required"/>
                                        <br />
                                        <h3>Description:</h3> 
                                        <textarea rows="2" cols="40" name="description" type="text"  required="required">
                                        </textarea>
                                        <br />
                                        <button id="myBtn">Open Modal</button>

                                    </div>
                                </div>
                            </form>
                            <div id="myModal" class="modal">
      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..</p>
      </div>
    </div>
    <script>
    // Get the modal
    var modal = document.getElementById('myModal');
    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    // When the user clicks the button, open the modal 
    btn.onclick = function() {
        modal.style.display = "block";
    }
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    </script>
                    </div>
                    </div>
                    </body>
                </html>


 $(function() {
        //----- OPEN
        $('[data-popup-open]').on('click', function(e)  {
            if ($('input:text[name="title"]').val().length == 0 || $('input:text[name="image"]').val().length == 0 || $('input:text[name="date"]').val().length == 0 || !$.trim($("textarea").val())) {
               alert('Fill all the fields');
               return false;
            }else {
                var targeted_popup_class = jQuery(this).attr('data-popup-open');
                $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
                e.preventDefault();
            }
        });
        //----- CLOSE
        $('[data-popup-close]').on('click', function(e)  {
            var targeted_popup_class = jQuery(this).attr('data-popup-close');
            $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
            e.preventDefault();
        });
    });
  /* Outer */
        .popup {
            width:100%;
            height:100%;
            display:none;
            position:fixed;
            top:0px;
            left:0px;
            background:rgba(0,0,0,0.75);
        }
        /* Inner */
        .popup-inner {
            max-width:700px;
            width:90%;
            padding:40px;
            position:absolute;
            top:50%;
            left:50%;
            -webkit-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
            box-shadow:0px 2px 6px rgba(0,0,0,1);
            border-radius:3px;
            background:#fff;
        }
        /* Close Button */
        .popup-close {
            width:30px;
            height:30px;
            padding-top:4px;
            display:inline-block;
            position:absolute;
            top:0px;
            right:0px;
            transition:ease 0.25s all;
            -webkit-transform:translate(50%, -50%);
            transform:translate(50%, -50%);
            border-radius:1000px;
            background:rgba(0,0,0,0.8);
            font-family:Arial, Sans-Serif;
            font-size:20px;
            text-align:center;
            line-height:100%;
            color:#fff;
        }
        .popup-close:hover {
            -webkit-transform:translate(50%, -50%) rotate(180deg);
            transform:translate(50%, -50%) rotate(180deg);
            background:rgba(0,0,0,1);
            text-decoration:none;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" align="center" action="">
    <div class="login">
        <div class="login-form">
            <h3>Title:</h3>
            <input type="text" name="title" required="required" /><br />
            <h3>Image:</h3>
            <input type="text" name="image"  required="required"/>
            <br />
            <h3>Date:</h3>
            <input type="text" id="filter-date" name="date"  required="required"/>
            <br />
            <h3>Description:</h3>
            <textarea rows="2" cols="40" name="description"  required="required">
                                        </textarea>
            <br />
            <a class="btn" data-popup-open="popup-1" href="#">  <button id="myBtn">Open Modal</button></a>
        </div>
    </div>
</form>
<div class="popup" data-popup="popup-1">
    <div class="popup-inner">
        <div class="modal-content">
            <p>Some text in the Modal..</p>
        </div>
        <p><a data-popup-close="popup-1" href="#">Close</a></p>
        <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
    </div>
</div>

$(function() {
        //----- OPEN
        $('[data-popup-open]').on('click', function(e)  {
            if ($('input:text[name="title"]').val().length == 0 || $('input:text[name="image"]').val().length == 0 || $('input:text[name="date"]').val().length == 0 || !$.trim($("textarea").val())) {
               alert('Fill all the fields');
               return false;
            }else {
                var targeted_popup_class = jQuery(this).attr('data-popup-open');
                $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
                e.preventDefault();
            }
        });
        //----- CLOSE
        $('[data-popup-close]').on('click', function(e)  {
            var targeted_popup_class = jQuery(this).attr('data-popup-close');
            $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
            e.preventDefault();
        });
    });
   /* Outer */
        .popup {
            width:100%;
            height:100%;
            display:none;
            position:fixed;
            top:0px;
            left:0px;
            background:rgba(0,0,0,0.75);
        }
        /* Inner */
        .popup-inner {
            max-width:700px;
            width:90%;
            padding:40px;
            position:absolute;
            top:50%;
            left:50%;
            -webkit-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
            box-shadow:0px 2px 6px rgba(0,0,0,1);
            border-radius:3px;
            background:#fff;
        }
        /* Close Button */
        .popup-close {
            width:30px;
            height:30px;
            padding-top:4px;
            display:inline-block;
            position:absolute;
            top:0px;
            right:0px;
            transition:ease 0.25s all;
            -webkit-transform:translate(50%, -50%);
            transform:translate(50%, -50%);
            border-radius:1000px;
            background:rgba(0,0,0,0.8);
            font-family:Arial, Sans-Serif;
            font-size:20px;
            text-align:center;
            line-height:100%;
            color:#fff;
        }
        .popup-close:hover {
            -webkit-transform:translate(50%, -50%) rotate(180deg);
            transform:translate(50%, -50%) rotate(180deg);
            background:rgba(0,0,0,1);
            text-decoration:none;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" align="center" action="">
    <div class="login">
        <div class="login-form">
            <h3>Title:</h3>
            <input type="text" name="title" required="required" /><br />
            <h3>Image:</h3>
            <input type="text" name="image"  required="required"/>
            <br />
            <h3>Date:</h3>
            <input type="text" id="filter-date" name="date"  required="required"/>
            <br />
            <h3>Description:</h3>
            <textarea rows="2" cols="40" name="description"  required="required">
                                        </textarea>
            <br />
            <a class="btn" data-popup-open="popup-1" href="#">  <button id="myBtn">Open Modal</button></a>
        </div>
    </div>
</form>
<div class="popup" data-popup="popup-1">
    <div class="popup-inner">
        <div class="modal-content">
            <p>Some text in the Modal..</p>
        </div>
        <p><a data-popup-close="popup-1" href="#">Close</a></p>
        <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
    </div>
</div>

    $(function() {
        //----- OPEN
        $('[data-popup-open]').on('click', function(e)  {
            var targeted_popup_class = jQuery(this).attr('data-popup-open');
            $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
            e.preventDefault();
        });
        //----- CLOSE
        $('[data-popup-close]').on('click', function(e)  {
            var targeted_popup_class = jQuery(this).attr('data-popup-close');
            $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
            e.preventDefault();
        });
    });
 /* Outer */
        .popup {
            width:100%;
            height:100%;
            display:none;
            position:fixed;
            top:0px;
            left:0px;
            background:rgba(0,0,0,0.75);
        }
        /* Inner */
        .popup-inner {
            max-width:700px;
            width:90%;
            padding:40px;
            position:absolute;
            top:50%;
            left:50%;
            -webkit-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
            box-shadow:0px 2px 6px rgba(0,0,0,1);
            border-radius:3px;
            background:#fff;
        }
        /* Close Button */
        .popup-close {
            width:30px;
            height:30px;
            padding-top:4px;
            display:inline-block;
            position:absolute;
            top:0px;
            right:0px;
            transition:ease 0.25s all;
            -webkit-transform:translate(50%, -50%);
            transform:translate(50%, -50%);
            border-radius:1000px;
            background:rgba(0,0,0,0.8);
            font-family:Arial, Sans-Serif;
            font-size:20px;
            text-align:center;
            line-height:100%;
            color:#fff;
        }
        .popup-close:hover {
            -webkit-transform:translate(50%, -50%) rotate(180deg);
            transform:translate(50%, -50%) rotate(180deg);
            background:rgba(0,0,0,1);
            text-decoration:none;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" align="center" action="">
    <div class="login">
        <div class="login-form">
            <h3>Title:</h3>
            <input type="text" name="title" required="required" /><br />
            <h3>Image:</h3>
            <input type="text" name="image"  required="required"/>
            <br />
            <h3>Date:</h3>
            <input type="text" id="filter-date" name="date"  required="required"/>
            <br />
            <h3>Description:</h3>
            <textarea rows="2" cols="40" name="description" type="text"  required="required">
                                        </textarea>
            <br />
            <a class="btn" data-popup-open="popup-1" href="#">  <button id="myBtn">Open Modal</button></a>
        </div>
    </div>
</form>
<div class="popup" data-popup="popup-1">
    <div class="popup-inner">
        <div class="modal-content">
            <p>Some text in the Modal..</p>
        </div>
        <p><a data-popup-close="popup-1" href="#">Close</a></p>
        <a class="popup-close" data-popup-close="popup-1" href="#">x</a>
    </div>
</div>

将id添加到 myFrm 的形式这是 ajax 代码：

您必须提及写入相应验证代码的相应文件的 URL......

<script>
    jQuery('#myBtn').click(function(){
        var data = jQuery('form#myFrm').serialize();
        jQuery.ajax(function(){
            data: data,
            url: '<url path to php file>',
            method: 'post',
            success: function(res){
                jQuery('.modal-content-inner').html(res);
            }
        });
    });
</script>
<!-- Updated Your Modal content -->
<div class="modal-content">
    <span class="close">&times;</span>
    <div class="modal-content-inner"></div>
</div>


$(document).ready(function(){
  var $title = $('#title')
  var $image = $('#image')
  var $filterDate = $('#filterDate')
  var $description = $('#description')
  
  $('#myForm').validate({
  submitHandler: function(form) {
    // some other code
    // maybe disabling submit button
    // then:
   // $(form).submit();
   $('.title').text($title.val())
   $('.image').text($image.val())
   $('.filterDate').text($filterDate.val())
   $('.description').text($description.val())
   $( ".modalDialog" ).dialog();
  }
  });
  
  
})
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form method="post" align="center" id="myForm">
                                <div class="login">
                                    <div class="login-form">
                                        <h3>Title:</h3>
                                        <input type="text" name="title" id="title" required/><br />
                                        <h3>Image:</h3>
                                        <input type="text" name="image" id="image"  required/>
                                        <br />
                                        <h3>Date:</h3>
                                        <input type="text" id="filterDate" name="date"  required/>
                                        <br />
                                        <h3>Description:</h3> 
                                        <textarea rows="2" cols="40" name="description" id="description" required>
                                        </textarea>
                                        <br />
                                        <button type="submit" id="myBtn">Open Modal</button>
                                    </div>
                                </div>
                            </form>
                            
<div class="modalDialog" title="Preview" style="display:none;">
  <p>Title : <span class="title"></span></p>
  <p>Image :<span class="image"></span></p>
  <p>Date : <span class="filterDate"></span></p>
  <p>description : <span class="description"></span></p>
  
</div>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium