Form with two submit buttons with different actions

Question

so I have a form that has 3 buttons

        <td >
            <input type="submit" id="stSave" class="button button_save pointer" value=""/>
            <input type="submit"  id="stSaveReturn" class="button button_save_return pointer" value=""/>
            <button id="stCancel" class="button button_cancel pointer simplemodal-close"></button>
        </td>

When I click save. It saves and the modal stays open. great

When i hit cancel it closes. great

however I can't figure out how to go about Making it so when i click save and return it will submit the form and then close the modal. I tried to add an onclick() event but that triggers before the submit it seems.

Here is what my form deceleration looks like.

<form:form method="post" action="${CTX_PATH}/admin/statepost" commandName="detailsDto" enctype="multipart/form-data">

Answer 1

You could use jQuery to listen to the submit event of your stSaveReturn input.

For example:

$('#stSaveReturn').submit(function(e) {
    e.preventDefault();

    $('#modal').modal('hide');
    return false;
});

Answer 2

You can intercept the form submit event and perform a modal close. If you are concerned the iframe may be destroyed before the submit actually happens, you can delay the modal close with a setTimeout() call (although this feels overcomplicated).

See sample code below:

 //using jquery $('#whatever_is_your_form_id').on('submit', function(event){ if(event.target.id === 'stSaveReturn'){ //either do immediate modal close $('#modal_element_id').modal('hide'); //or delay the modal close for 50millisecs or more setTimeout(function closeModal(){ $('#modal_element_id').modal('hide'); }, 50); //close after 50ms } }); 

 <td > <input type="submit" id="stSave" class="button button_save pointer" value=""/> <input type="submit" id="stSaveReturn" class="button button_save_return pointer" value=""/> <button id="stCancel" class="button button_cancel pointer simplemodal-close"></button> </td>