按钮提交前的Javascript函数

Posted 2023-02-22

【中文标题】按钮提交前的Javascript函数

【英文标题】：Javascript function before button submit

【发布时间】：2020-01-13 03:16:19

【问题描述】：

我必须在点击按钮时调用 asp-action 之前调用一个 js 函数

<form asp-action="Index" method="post">
                @html.AntiForgeryToken()
              var x = jsfunction();
                <div class="form-group">
                    <input type="submit" value=@Localizer["Button"] class="btn Button"  />
                </div>
            </form>

我想在点击提交按钮时调用 js 函数，然后它应该继续到控制器操作方法

【参考方案1】：

你可以尝试如下：

<form id='myForm' asp-action="Index" method="post">
            @Html.AntiForgeryToken()
          var x = jsfunction();
            <div class="form-group">
                <input id='submitBTN' type="button" value=@Localizer["Button"] class="btn Button"  />
            </div>
        </form>

并通过 jquery 或 js 调用它的点击事件”

<script>
  $('#submitBTN').on('click', function () 
    jsfunction();
    $('#myForm').submit();
   );
</script>

【参考方案2】：

使用表单的submit 事件：

const form = document.getElementById('myForm');
const checkbox = document.getElementById('check');

form.addEventListener('submit', e => 
  if (!checkbox.checked) 
    // can cancel the submit here if you want
    e.preventDefault();
    alert('not checked');
  
  // do other stuff here before posting to the server
);

<form id="myForm" method="post" action="#submit">
  <label style="display: block">
    <input id="check" type="checkbox" />
    <span>proceed</span>
  </label>
  <button>Submit</button>
</form>