0

私はあなたの助けが必要です。私はほとんどそこにいます.. :)

送信前にフォームをプレビューしたい。しかし、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);

私はあなたからの応答を得ることを願っています.

どうもありがとうございました。

4

2 に答える 2

0

まずonSubmit="return preview(this);"、w3c 標準に違反しているため、HTML コードから削除する必要があります。<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>

あったらURL$.confirm教えてください。それがどのように機能するか見てみたいと思います。

于 2013-04-15T03:50:37.033 に答える
0

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)
    })
}
于 2021-10-16T08:17:52.640 に答える