在javascript中预览表单

Question

我需要你的帮助。我几乎就在那里.. :)）

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

这是我的代码：

HTML：

<form action="" method="post" name="frmaction" onSubmit="return preview(this);">
<label>First Name:</label>
<input name="fname" type="text" size="40" value="" />
<label>Last Name:</label>
<input name="lname" type="text" size="40" value="" />
</form>

使用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>

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);

希望我收到你的回复。

非常感谢。

Answer 1

看一下这篇文章

你将在这里得到所需的东西......

http://kau-boys.com/137/web-development/form-preview-with-jquery-thickbox

http://buffernow.com/preview-form-before-submit-jquery-plugin/

Answer 2

首先，您应该从HTML代码中删除onSubmit="return preview(this);"，因为违反了w3c标准。而是在表单中使用提交<button>。

<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>

其次，当您点击提交按钮时，您不会应用e.preventDefault，而且我找不到$.confirm这样的插件。我建议使用默认的JavaScript confirm()。这是正确的代码：

<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>

如果您有，请提供$.confirm的网址。我想看看它是如何运作的。