Question

我正在做的工作涉及确保表单提交的方法是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错误，因此提交时form方法不会更改。我怀疑它与'this'关键字有关。也许我用错了。我已经尝试设置断点，以便可以识别问题，但是在我进入功能（在开发人员的工具中）之前先提交表单，然后发现问题。有人可以帮我吗？

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

Answer 2

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

first：Jquery JS

second：Bootstrap 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>

Answer 3

我编辑了代码段：

$(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（）。

提交前更改表单属性

3 个答案: