提交前更改表单属性答案

【问题标题】：Changing Form Attributes Before Submission提交前更改表单属性
【发布时间】：2019-03-24 01:37:03
【问题描述】：

我正在做一些事情，涉及确保表单提交的方法是 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”关键字有关。也许我用错了。我已经尝试设置断点，以便我可以识别问题，但在我可以进入函数（在我的开发人员工具中）并发现问题之前提交了表单。有人可以帮帮我吗？

【问题讨论】：

使用$(this) 而不是this。看这里：stackoverflow.com/questions/1051782/…
您可以创建一个函数并在提交按钮单击事件上将其单元格。

标签： javascript jquery html forms validation

【解决方案1】：

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>

【讨论】：

不希望表单属性在提交时位于 HTML 中。希望整个过程像 JS 一样隐藏在客户端。
现在从js文件运行

【解决方案2】：

发现您的控制台错误。 bootstrap js requires jquery 所以我已经更正了如下顺序

第一：Jquery JS

第二个：引导 JS

也使用 $(this) 而不仅仅是 this

使用 attr 来设置属性而不是 setAttribute

$('form').submit(function() {
        if ($(this).find(':submit').is('.ckh-method')) 
        {debugger;
            if (($(this).attr('method') !== "GET" && $(this).attr('method') == "") || $(this).attr('method') == undefined) {
                $(this).attr('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://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script  src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.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>
        </form>
        </div>
</body>

</html>

【讨论】：

请检查答案我有一些变化

【解决方案3】：

我编辑了sn-p：

$(document).ready({
  $('form').submit(function() {
    if ($(this).find(':submit').is('.chk-method')) {
      if (($(this).attr('method') !== "GET" && $(this).attr('method') == "") || $(this).attr('method') == undefined) {
        $(this).attr('method', 'POST');
        return true;
      }
    }
  })
})

使用 $(this) 代替 'this' 和 attr() 代替 setAttribute()。

【讨论】：

提交表单时不必进行修改。当文档准备好并且表单将具有您想要的提交属性时，您可以这样做。
@AliBARIN 准备好文档后，加载后以某种方式对表单所做的任何更改都不会生效，比如在加载文档后从 POST 更改您的方法或什么都不做。重要在提交之前完成