Changing Form Attributes Before Submission

Question

I'm working on something that involves ensuring the method of form submission is POST not GET when the method might have been omitted somehow and somewhere. A JS/jQuery function checks each form before submission for a particular class. If the class exists, it goes on to check the method. If the method is a GET, it should ignore it and submit the form. But if it is undefined or empty, it should proceed to set the method to POST then submit. This is the JQuery used. The HTML follows.

$(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>

Problem: The form method doesn't change on submission because there is a JS error somewhere in my code. I'm suspecting it has to do with the 'this' keyword. Maybe I used it wrongly. I've tried setting breakpoints so I can identify the issue but the form submits before I can step into the function (in my Developer's tool) and discover the problem. Can someone help me out?

Use `$(this)` instead of `this`. Look here: https://stackoverflow.com/questions/1051782/whats-the-difference-between-this-and-this — FloPinguin, Oct 19 '18 at 07:32
You can create a function and cell it on submit button click event. — saAction, Oct 19 '18 at 07:32

hossein sedighian · Answer 1 · 2018-10-19T11:33:10.527

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>

edited Oct 19 '18 at 11:33

answered Oct 19 '18 at 07:35

hossein sedighian

1,711
1
13
16

Don't want the form attribute, on submit to be in the HTML. Want the entire procedure as client-hidden as JS can get. – Georgina A Oct 19 '18 at 08:07
it is now run from js file – hossein sedighian Oct 19 '18 at 11:33

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

Found your console error. bootstrap js requires jquery so i have corrected the sequence as below

first : Jquery JS

second : Bootstrap JS

also use $(this) instead of just this

use attr for setting attributes instead of 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>

please check answer i have few changes – Dhaval Pankhaniya Oct 19 '18 at 09:34 — Dhaval Pankhaniya, Oct 19 '18 at 09:34

score 0 · Answer 3 · answered Oct 19 '18 at 07:52

0

I edited the snippet:

$(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;
      }
    }
  })
})

Use $(this) instead of 'this' and attr() instead of setAttribute().

answered Oct 19 '18 at 07:52

Georgina A

25
9

You don't have to do the modification when the form is submitted though. You may do it when the document is ready and the form will have the submit attribute you want. – Ali BARIN Oct 19 '18 at 07:57
@AliBARIN With document ready, any changes made to the form somehow after loading would not take effect, say changing your method from POST or nothing after loading the document. It is **important** that it is done before submission – Georgina A Oct 19 '18 at 08:06

Changing Form Attributes Before Submission

3 Answers3