javascript - 确认用户的输入并显示输出然后提交表单

标签 javascript php jquery forms

我想接受用户表单输入,要求用户确认并向他们显示他们的选择,然后只有在确认后才将表单提交到服务器。我不太确定该怎么做? 谢谢, 这是到目前为止我的代码:

<form id="myform" action="form.php" method="post">
    <?php
        echo "<ul>";

        foreach($dir as $item) {
            $items = basename($item);
            $str = str_replace("+", " ", $items);
            if (strpos($str, 'test') === false) {
                if (strlen($str) == 3) {
                    $strs = ucwords(strtoupper($str));
                    echo "<li><label><input type = 'checkbox' class='check-class' name='chk[]' id='strs[]' value=$items>$strs</label></li>";
                } else {
                    $strs = ucwords($str);
                    echo "<li><label><input type='checkbox' class='check-class' name='chk[]' id='strs[]' value=$items>$strs</label></li>";
                }
            }
        }

        echo "</ul>";
    ?>

    <div style="text-align:center">
        <input type="submit" style="font-face:'Comic Sams MS';font-size:larger;color:red;background-color:#FAF0E6;border:3pt ridge lightgrey;" value="Click to Submit">
    </div>
</form>

<div id="success"></div>

<script type="text/javascript">
    $(function() {
        $('#myform').submit(function() {
            $.ajax({
                data: $(this).serialize(),
                type: $(this).attr('method'),
                url: $(this).attr('action'),
                success: function(data) {
                    $('#success').html(data);
                }
            });
            return false;
        });
    });
</script>

表单.php

<html>
<table>
<?php


       #$b = str_replace("+"," ",$_POST['chk']);
    #echo "<script type='text/javascript'> test() </script>";
    echo "You have selected these Folders";


    foreach($_POST['chk'] as  $val)
    { echo "<tr>";
      echo "<td>";
      echo str_replace("+"," ",$val);
      echo "<tr>";
      echo "</td>";
    }

?>
</table>    
</html>

最佳答案

最简单的方法是使用window.confirm .

$('#myform').submit(function() {
    var selectedItemsText = '';
    $(this).find('input[type="checkbox"]:checked').each(function(){
        selectedItemsText  += $(this).val() +'\r';
    });

    if(confirm('Are you sure? You've selected:\r'+selectedItemsText)){
        $.ajax({
            data: $(this).serialize(),
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            success: function(data) {
                $('#success').html(data);
            }
        });
    }
    return false;
});

Check out this Fiddle.由于显而易见的原因,我省略了 AJAX。

有更好的方法可以做到这一点。您可以使用 jQuery UI Dialog (或等同物)例如。但对于快速、肮脏、简单的解决方案 - 只需使用confirm

关于javascript - 确认用户的输入并显示输出然后提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31326764/

相关文章:

javascript - 表格的分页符

javascript - 从 post 方法调用的文件元素在 jquery 中不可访问

javascript - 为什么 Jquery 不让我这样做

php - 为什么 strtotime() 和 date() 返回 1969-31-12?

php - 通过 AJAX 发送 PHP 变量

jquery - 图像 map 链接jquery的选择

jquery ajax 调用不起作用?!是firefox还是xss问题?

javascript - 将 Unix 时间戳转换为工作日

javascript - 预防变量的预准备语句/sql 注入(inject)

php - Wordpress 排队 Js 脚本