javascript - 提交前更改表单属性

标签 javascript jquery html forms validation

我正在研究一些涉及确保表单提交方法是 POST 而不是 GET 的方法,当该方法可能以某种方式在某处被省略时。 JS/jQuery 函数在提交特定类之前检查每个表单。如果该类存在,它将继续检查该方法。如果方法是 GET,则应忽略它并提交表单。但如果未定义或为空,则应继续将方法设置为 POST 然后提交。 这是使用的 JQuery。 HTML 如下。

$(document).ready(function() {

      $('form').submit(function() {
        if (this.find(':submit').is('.ckh-method')) {
          if ((this.attr('method') !== "GET" && this.attr('method') == "") || this.attr('method') == undefined) {
            this.setAttribute('method', 'POST');
            return true;
          }
        }
      })
    });
<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://fontawesome-free/web-fonts-with-css/css/fontawesome-all.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <div class="container">
    <form class="form-horizontal" role="form" action="phpFile.php" method="">
      <div class="row">
        <div class="col-sm-12">
          <div class="input-group">
            <span class="input-group-addon"> 
           <i class="fa fa-user-alt"></i>
        </span>
            <input type="text" class="form-control" placeholder="Username" name="username" id="username" required="required" value=''>
          </div>
        </div>
        <div class="col-sm-12">
          <div class="input-group">
            <span class="input-group-addon"> 
          <i class="fa fa-lock"></i>
        </span>
            <input type="password" class="form-control" placeholder="Password" name="password" id="password" required="required" value=''>
          </div>
        </div>
        <p class="conditions col-sm-12"><a href="anotherPage.html">Forgot Username or Password?</a>
          <div class="text-center col-sm-12 error"></div>
        </p>
        <div class="col-sm-12" id="btn-hold">
          <button type="submit" class="btn btn-success  btn-block ckh-method">Log In</button>
        </div>
        <div class="col-sm-12">
          <a type="button" class="btn btn-link btn-block" href="proceed.php">Sign Up</a>
        </div>
      </div>
    </form>
  </div>
</body>

</html>

问题:表单方法在提交时没有更改,因为我的代码中某处存在 JS 错误。我怀疑它与“this”关键字有关。也许是我用错了。我尝试设置断点,以便可以识别问题,但在我可以进入函数(在我的开发人员工具中)并发现问题之前,表单已提交。有人可以帮我吗?

最佳答案

var frm = document.getElementById("form1")
frm.addEventListener("submit" ,checkmethod )

function checkmethod(event){
    event.preventDefault();
   if(frm.method !="GET") frm.method = "POST";
   frm.submit();
}
<form id="form1" action="" >

    <button type="submit">submit</button>

 </form>

关于javascript - 提交前更改表单属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52887650/

相关文章:

javascript - 我可以一起使用不同的 Promise 实现吗?

javascript - html 5 canvas LineTo() 线条颜色问题

javascript - 测试localStorage是否已满

javascript - 克隆应用了fineuploader的元素

javascript - 如何使用 Javascript 将事件添加到 html 标签

javascript - Cypress 测试在本地是绿色的,但在 Gitlab CI 中失败

javascript - 根据选择选项值禁用输入字段 Angularjs

javascript - 文档准备好后jquery做简单的动画

javascript - onclick 在表中添加新行

javascript - 为什么我可以通过一些但不是全部的 NodeList forEach?