jquery 在javascript中预览表单

iezvtpos 于 2022-11-22 发布在 jQuery

关注(0)|答案(2)|浏览(145)

我需要你的帮助，请。我几乎在那里..：）
我想在提交前预览我的表单。但是form.submit（）;不起作用。
下面是我的代码：
于飞：

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

查询：

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

希望我能得到你的回应。
非常感谢您的光临。

jquery

来源：https://stackoverflow.com/questions/16007131/preview-form-in-javascript

2条答案

按热度按时间

nzk0hqpo1#

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

中的每一个
第二，当点击提交按钮时，你没有应用 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 的网址，如果你有它。我想看看它是如何工作的。

赞(0）回复(0）举报 2022-11-22

7fyelxc52#

您可以在 Javascript 中使用 e.preventDefault() 。
第一个

赞(0）回复(0）举报 2022-11-22