javascript - 如何使输入类型“按钮”的行为类似于类型 ='submit' ？

Question

我有 3 个输入类型的 radio :

<input type="radio"  name="status">Semi-Finalist
<input type="radio" id="finalist" name="status">Finalist
<input type="radio"  name="status">Reject
<input type="button" data-toggle="modal" data-target="#myModal" value="Submit">

当用户选择入围时，会出现模态(弹出窗口)并询问其他问题，但如果半决赛入围或拒绝选中后，单击“提交”按钮即可提交表单。这就是为什么我不能使用 type="submit"

谢谢...

更新:这是显示模态的 js

//finalist Modal
$(document).ready(function(){

$(".submitButton").click(function(){

    if($('#finalist').is(':checked')) { 
        $("#myModalFinalist").modal('show');
    }

  });
 });

Answer 1

使用type="submit"。

在编写 JavaScript 事件处理程序来决定是否需要显示其他问题时，有条件地调用 event.preventDefault() 来停止表单提交。

$("form [type='submit']").on('click', show_additional);

function show_additional(event) {
  if ($("[value=finalist]:checked").length) {
    event.preventDefault();
    alert("Also show additional fields now");
  } else {
    alert("Just submit normally");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <label>
    <input type="radio" name="status" value="semi">Semi-Finalist</label>
  <label>
    <input type="radio" name="status" value="finalist">Finalist</label>
  <label>
    <input type="radio" name="status" value="reject">Reject</label>
  <input type="submit" value="Submit">
</form>

注意:由于 Stackoverflow 的沙箱，该表单实际上不会在此演示中提交。