Question

New to jquery. How can I have a simple form with a Save button and a Save-Exit button?

What I have right now does ‘work’ in a way. But when I post then click save-exit. Then go back to /messages. Use the form and click save-exit it posts and stays on the page. But then if I repeat then it will post and exit.

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

There are lots of ways of doing this thing , none can be said the best , just putting what way I use in general.

Change your html to this :

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

and 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")
});

NOTE:I haven’t checked your js in the ajax just copied it for question