javascript中的预览表单

我需要你的帮助。我快到了……）

我想在提交前预览我的表格。但是form.submit（）；不起作用

这是我的密码：

HTML:

名字：
姓氏：

Javascript:

<script>
  function preview(form){
  var dia_log;
  $( "label" ).each(function(i,val) { 
  dia_log +=$(this).text() + " " + $(this).next().val()+"<br/>";
     });
  dia_log =dia_log.replace('undefined', '');

    $.confirm({
        'title'     : 'Are all these information is correct?',
        'message'   : dia_log,
        'buttons'   : {
            'Yes'   : {
                'class' : 'blue',
                'action': function(){
                form.submit();
                }
            },
            'No'    : {
                'class' : 'gray',
                'action': function(){}  
            }
        }
    });

    return false;

    }
</script>

功能预览（表格）{
变径测井；
$（“标签”）。每个（函数（i，val）{
dia_log+=$（this.text（）+“”+$（this.next（）.val（）+“
”；
});
直径日志=直径日志。替换（'未定义'，''）；
美元。确认({
“标题”：“所有这些信息都正确吗？”，
“消息”：dia_log，
“按钮”：{
“是的”：{
“类”：“蓝色”，
“操作”：函数（）{
表单提交（）；
}
},
“否”：{
“类”：“灰色”，
“操作”：函数（）{}
}
}
});
返回false；
}

JQuery：

(function($){

$.confirm = function(params){

    if($('#confirmOverlay').length){
        // A confirm is already shown on the page:
        return false;
    }

    var buttonHTML = '';
    $.each(params.buttons,function(name,obj){

        // Generating the markup for the buttons:

        //buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>';
        buttonHTML += '<input type="submit" class="button '+obj['class']+'" value="'+name+'"/>';

        if(!obj.action){
            obj.action = function(){};
        }
    });

    var markup = [
        '<div id="confirmOverlay">',
        '<div id="confirmBox">',
        '<h1>',params.title,'</h1>',
        '<p>',params.message,'</p>',
        '<div id="confirmButtons">',
        buttonHTML,
        '</div></div></div>'
    ].join('');

    $(markup).hide().appendTo('body').fadeIn();

    var buttons = $('#confirmBox .button'),
        i = 0;

    $.each(params.buttons,function(name,obj){
        buttons.eq(i++).click(function(){

            // Calling the action attribute when a
            // click occurs, and hiding the confirm.

            obj.action();
            $.confirm.hide();
            return true;
        });
    });
}

$.confirm.hide = function(){
    $('#confirmOverlay').fadeOut(function(){
        $(this).remove();
    });
}

})(jQuery);

（函数（$）{
$.confirm=函数（参数）{
if（$（'confirmOverlay'）。长度）{
//确认已显示在页面上：
返回false；
}
var buttonHTML=''；
$.each（参数按钮、函数（名称、对象）{
//为按钮生成标记：
//按钮HTML+=''；
按钮HTML+=''；
如果（！目标动作）{
obj.action=function（）{}；
}
});
变量标记=[
'',
'',
''，参数名称，''，
“”，参数消息“
”，
'',
钮扣，
''
].加入（“”）；
$（标记）.hide（）.appendTo（'body'）.fadeIn（）；
变量按钮=$（“#confirbox.button”），
i=0；
$.each（参数按钮、函数（名称、对象）{
按钮.eq（i++）.单击（函数（）{
//当
//单击“发生”，并隐藏“确认”。
obj.action（）；
$.confirm.hide（）；
返回true；
});
});
}
$.confirm.hide=函数（）{
$（“#confirmOverlay”）.fadeOut（函数（）{
$（this.remove（）；
});
}
})（jQuery）；

希望你能给我回复

---

非常感谢。

看看这篇文章

您将在这里获得所需的物品

---

首先，您应该从HTML代码中删除

onSubmit=“return preview（this）；”

，因为它违反了w3c标准。改为在表单中使用提交

<form action="" method="post" name="frmaction">
    <label>First Name:</label>
    <input name="fname" type="text" size="40" value="" />
    <label>Last Name:</label>
    <input name="lname" type="text" size="40" value="" />
    <button type="submit" name="submit">Submit</button>
</form>

---

请提供

$的url。如果有，请确认。我想看看它是如何工作的。
您正在创建一个无止境的循环
onsubmit
=preview，accept preview=submit。我已经知道怎么做了。但我希望在点击提交按钮时预览表单。如果我点击“是”或“确定”，那么表单将被提交。这与“是”中显示的内容相同，你是对的。但是form.submit（）什么也不做。它不执行我的代码。如何将css包含到dia_日志中？JQuery为此提供了将类样式添加到元素的函数
.addClass（）
。如果你想要一个css文件，你所要做的就是像这样包含它

<form action="" method="post" name="frmaction">
    <label>First Name:</label>
    <input name="fname" type="text" size="40" value="" />
    <label>Last Name:</label>
    <input name="lname" type="text" size="40" value="" />
    <button type="submit" name="submit">Submit</button>
</form>

<script type="text/javascript">
    //Register the click-submit event
    $('form').on('click', function(e) {
        e.preventDefault();
        preview($(this));
    });

    function preview(form){
        var dia_log;
        $( "label" ).each(function(i,val) { 
            dia_log += $(this).text() + " " + $(this).next().val() + "<br/>";
        });
        dia_log = dia_log.replace('undefined', '');

        if ( confirm("Are all these information is correct? " + dia_log) ) {
            alert('yes is clicked');
            form.submit();
        } else {
            alert('no is clicked');
        }

        /*
        In any case you should consider to remove the following alignment style because is unproductive!
        The eye is distracted by the alignment/appearance and not focuses at the important stuff.
        $.confirm({
            'title'     : 'Are all these information is correct?',
            'message'   : dia_log,
            'buttons'   : {
                'Yes'   : {
                    'class' : 'blue',
                    'action': function(){
                    form.submit();
                    }
                },
                'No'    : {
                    'class' : 'gray',
                    'action': function(){
                         //Here you had to apply return false;
                         return false;
                     }  
                }
            }
        });
        */
    }
</script>