如何创建一个输入类型'button'就像type='submit'

how to make an input type'button' act like type='submit'?

本文关键字：button type submit 就像 输入 创建 何创建 一个 类型      更新时间：2023-09-26

我有3个输入类型:

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

当用户选择决赛者时，Modal(弹出窗口)显示并询问附加问题，但如果选中半决赛者或拒绝者，则在点击"提交"按钮时提交表单。这就是为什么我不能使用type="submit"

谢谢…

更新:下面是显示模态

的js
//finalist Modal
$(document).ready(function(){
$(".submitButton").click(function(){
    if($('#finalist').is(':checked')) { 
        $("#myModalFinalist").modal('show');
    }
  });
 });

使用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的沙箱，表单实际上不会提交。

这是我使用的:感谢@Quentin我可以弄清楚!

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

$(document).ready(function(){

$(".submitButton").click(function(event){
    if($('#finalist').is(':checked')) {
        event.preventDefault();
        $("#myModalFinalist").modal('show');
    }
  });
});
相关文章：