Question

jquery新手。如何使用“保存”按钮和“保存 - 退出”按钮创建一个简单的表单？

我现在拥有的东西在某种程度上“有效”。但是当我发布时，请单击“保存 - 退出”。然后返回/ messages。使用表单并单击保存 - 退出它发布并保留在页面上。但是，如果我重复，那么它会发布并退出。

JQUERY

var BASE = 'http://localhost/sym/messages';

$('#xhrSave').submit(function() {

    event.preventDefault();

    $('[name="save_continue"]').click(function() {
        window.location = '#';
    });

    $('[name="save_exit"]').click(function() {
        window.location = BASE;
    });

    var url = $(this).attr('action');
    var data = $(this).serialize();

    $.ajax({
        type: 'post',
        url: url,
        dataType: 'json',
        data: data,
        success: function(data) {

            $('#message_list').append('<div>' + data.message + '<a class="delete" rel="'+ data.id +'" href="#">Delete</a></div>');

        }

    });

    // clear textbox
    $('#form_message').val('');

});

HTML

<form action="<?=URL::to('messages/xhrSave')?>" method="post" id="xhrSave">

<input type="text" name="message" value="" id="form_message" />

<button type="submit" name="save_continue" class="save_form">Save</button>
<button type="submit" name="save_exit" class="save_form">Save-Exit</button>

Answer 1

有很多方法可以做到这一点，没有一个可以说是最好的，只是按照我一般使用的方式。

将您的HTML更改为：

<input type="text" name="message" value="" id="form_message" />

<button type="submit" name="save_continue" class="save_continue save_form">Save</button>
<button type="submit" name="save_exit" class="save_exit save_form">Save-Exit</button>

和js：

function myajaxcall(type){
                     var url = $(this).attr('action');
        var data = $(this).serialize();

        $.ajax({
            type: 'post',
            url: url,
            dataType: 'json',
            data: data,
            success: function(data) {

                $('#message_list').append('<div>' + data.message + '<a class="delete" rel="'+ data.id +'" href="#">Delete</a></div>');
                //one way to redirect
               if(type=="exit")
               window.location = "thepageyouwanttogo.php"

            }

        });
}
$('.save_continue').click(function() {
        myajaxcall("continue")
});
$('.save_exit').click(function() {
        myajaxcall("exit")
});

注意：我没有在ajax中检查过您的js，只是将其复制为问题

Jquery ajax保存按钮和保存退出按钮

1 个答案: