在 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

首先，您应该从 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

的网址。我想看看它是如何工作的。

Answer 2

您可以在

e.preventDefault()

中使用

Javascript

。

<form onsubmit="preview(event)">
    ...
</form>

const preview = (e) => {
    e.preventDefault();
    const form = $(e.target);

    form.find("input").forEach(inp => {
        console.log(inp.value)
    })
}