表单有两个提交按钮,具有不同的操作

时间:2017-08-22 14:56:40

标签: javascript jquery html forms

所以我有一个有3个按钮的表单

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

点击“保存”。它保存并且模态保持打开状态。大

当我点击取消时它会关闭。大

然而我无法弄清楚如何去做它当我点击保存并返回它将提交表格然后关闭模态。我尝试添加一个onclick()事件,但在提交它之前触发了它。

这是我的表格减速效果。

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

2 个答案:

答案 0 :(得分:0)

您可以使用jQuery来收听stSaveReturn输入的提交事件。

例如:

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

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

答案 1 :(得分:0)

您可以截取表单提交事件并执行模式关闭。如果您担心iframe可能会在提交实际发生之前被销毁,您可以通过setTimeout()调用延迟模态关闭(虽然这感觉过于复杂)。

请参阅以下示例代码:

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