预览数据表单

Preview data form

本文关键字：表单 数据表 数据      更新时间：2023-09-26

我需要一些帮助，我有一个表单，在"发送"按钮之前有一个选择类型"check"，如果取消选中，人们点击"发送"，表单会显示一个弹出窗口，预览表单中的所有数据，如果选中，人们单击"发送"这是正常发送，但我想改变这一点，我想把选择复选框改为"预览"按钮，当人们点击显示带有预览的弹出窗口时，发送按钮将继续正常发送表单。

这是带有规则if is check或uncheck的弹出窗口的代码。

    function check_form() {
    var url = "process_estaform.php"; // the script where you handle the form input.
        $.ajax({
           type: "POST",
           url: url,
           data: $("#estafrm").serialize(), // serializes the form's elements.
           success: function(data)
           {
               $("#dialog").html(data);
               if($("#senditornot").prop("checked") === false ) {
               $("#dialog").attr("title","This dialog box will automatically close.");
               $("#dialog").dialog();
               $("#dialog").delay(5000).fadeOut("slow",function(){ $('#dialog').dialog('close'); }).css('display','block');
               }
               else {
            $("#dialog").delay(5000).fadeOut("slow").css('display','block');
               }
           },
           error :function() {
               $("#dialog").html(data);
               $("#dialog").attr("title","This dialog box will automatically close.");
               if($("#senditornot").prop("checked") === false ) {
               $("#dialog").dialog();
               $("#dialog").delay(5000).fadeOut("slow",function(){ $('#dialog').dialog('close'); }).css('display','block');
               }
               else {
            $("#dialog").delay(5000).fadeOut("slow").css('display','block');
               }
           }
         });
    }

代码html。

    <div class="container">
    <input type="checkbox" name="sendit" id="senditornot" />
    </div>
    <br>
    <div class="container">
    <div align="center">
    <input type="submit" id="submitter" value="Submit" />
    </div>
    </div>

img表单

在函数check_form之前添加以下内容。

$("#preview").click(function()
{
    var previewData = $("#estafrm").serialize();
    $("#dialog").html(previewData);
})

在code.html 中添加预览按钮

<input type="button" name="preview" id="preview" value="preview" />

添加了完整的代码。

<html lang="en">
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        function check_form() {
        var url = "process_estaform.php"; // the script where you handle the form input.
        $.ajax({
        type: "POST",
            url: url,
            data: $("#estafrm").serialize(), // serializes the form's elements.
            success: function(data)
            {
               $("#dialog").html(data);
               if($("#senditornot").prop("checked") === false ) {
               $("#dialog").attr("title","This dialog box will automatically close.");
               $("#dialog").dialog();
               $("#dialog").delay(5000).fadeOut("slow",function(){ $('#dialog').dialog('close'); }).css('display','block');
               }
               else {
            $("#dialog").delay(5000).fadeOut("slow").css('display','block');
               }
            },
            error :function() {
               $("#dialog").html(data);
               $("#dialog").attr("title","This dialog box will automatically close.");
               if($("#senditornot").prop("checked") === false ) {
               $("#dialog").dialog();
               $("#dialog").delay(5000).fadeOut("slow",function(){ $('#dialog').dialog('close'); }).css('display','block');
               }
               else {
            $("#dialog").delay(5000).fadeOut("slow").css('display','block');
               }
            }
            });
        }
        $("#preview").click(function(){
            var previewData = $("#estafrm").serialize();
            console.log(previewData);
            $("#dialog").html(previewData);
            alert(previewData);
        })
    })
</script>
<body>
    <form name="estafrm" id="estafrm">
     <div class="container">
        <input type="text" name="name" id="name"  value=""/>
        <input type="checkbox" name="sendit" id="senditornot" />
        </div>
        <br>
        <div class="container">
        <div align="center">
        <input type="submit" id="submitter" value="Submit" />
        <input type="button" name="preview" id="preview" value="preview" />
        </div>
    </div>
</form>
相关文章：