Question

我需要一些帮助，我有一个表格，然后发送＆＃39;发送＆＃39;按钮有一个选择类型＆＃39;检查＆＃39;如果取消选中并且用户点击“发送”＃39;表单会弹出一个表单中所有数据的预览，如果选中该选项并且用户点击“发送”即可。这是发送正常，但我想改变它，我想将选择检查更改为按钮＆＃39;预览＆＃39;当人们点击显示弹出的预览时，发送按钮继续正常发送表格。

如果选中或取消选中，这是弹出规则的代码。

    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 form

Answer 1

在功能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>

预览数据表单

1 个答案: