How to Submit a Form Using JavaScript

How can I submit a form using JavaScript?

Set the name attribute of your form to "theForm" and your code will work.

How to submit a form using javascript

I was able to to it with:

var element = document.querySelector('#sell_form input[name="operation"]');  
    if (element) {  
        element.click();
    }

JavaScript submit form

Please make sure you are loading your html first like so:

<body>
  <form id="form">
    <input type="text" id="username" placeholder="Username" required>
    <input type="email" id="email" placeholder="Email" required>
    <input type="submit" value="Register">
  </form>
  <!--Javascript-->
  <script>
    var form = document.getElementById('form')

    form.addEventListener('submit',function(event){
      event.preventDefault()

      var username = document.getElementById("username").value
      console.log(username)
    
      var email = document.getElementById("email").value
      console.log(email)
    })
  </script>
</body>

creating and submitting a form with javascript

The problem is that createElement does not accept HTML. It accepts a tagname and returns a DOM element. You can then set the value attribute on this element to what you require.

function autoLogIn(un, pw) {
    var form = document.createElement("form");
    var element1 = document.createElement("input"); 
    var element2 = document.createElement("input");  

    form.method = "POST";
    form.action = "login.php";   

    element1.value=un;
    element1.name="un";
    form.appendChild(element1);  

    element2.value=pw;
    element2.name="pw";
    form.appendChild(element2);

    document.body.appendChild(form);

    form.submit();
}

Submitting form using Javascript with conditions, have to press submit twice

I did it like this...

    function checkuser() {
        let name = document.forms[0].name.value;
        let email = document.forms[0].email.value;
        let message = document.forms[0].message.value;
        if ((name == "admin") && (email == "admin@admin.com") && message == ("admin")) {
            alert("hey"); //SOME FUNCTION
        } else {
            document.forms[0].submit();
        }
      }

    <form method="post" action="login.php" id="form">
    
         <table align="center">
    
             <tr>
                 <th><label for="name"> Name : </label></th>
                 <td> <input type="text" height=100px id="name" name="name" placeholder="Enter your Name..." required> </td>
    
             </tr>
    
             <tr>
                 <th><label for="email"> Email : </label> </th>
                 <td><input type="email" id="email" name="email" placeholder="Enter your Email ID..." required></td>
             </tr>
    
             <tr>
                 <th><label for="phone"> Phone Number : </label> </th>
                 <td><input type="tel" id="phone" name="phone" placeholder="Enter your Phone no..." pattern="[0-9]{10}"></td>
             </tr>
    
             <tr>
                 <th><label for="message"> Message : </label> </th>
                 <td><textarea id="message" name="message" placeholder="Enter Message..." required></textarea></td>
             </tr>
    
         </table>
    
         <div class="buttons">
             <input type="button" value="Submit" onclick="checkuser();">
             <input type="reset" value="Reset" name="reset">
         </div>
    </form>

Submit a form using Javascript with input named submit

Keeping submit as a parameter by the following:

<input value="findItems" name="submit[]" type="hidden" />

Just add the square brackets [] to the attribute name and you will be able to get it on the server-side.

Updated:

Or

You can supply your form with <input type="submit"> and then triggering click event on it as follows:

<form action="http://google.com/search" method="POST">
    <!-- other generated parameters -->
    <input value="findItems" name="submit" type="hidden" />
    <a onclick="event.stopPropagation();" href="javascript:goo()">
        <!-- this is dinamically generated 
            and generally much more complex --->
        <strong>search</strong> 
    </a>
  <input type="submit" id="send" />
</form>

In the above code, we added input type of submit and assigned it to id send to allow accessing it from the DOM easily.

Also we added a function call goo() to the href of your search link. Now we will define that function and another function to trigger the event:

function goo(){     
       fireEvent(document.getElementById('send'),'click');
    }
    function fireEvent(obj, evt){
     var fireOnThis = obj;
     if( document.createEvent ) {
       var evObj = document.createEvent('MouseEvents');
       evObj.initEvent( evt, true, false );
       fireOnThis.dispatchEvent( evObj );
     }
      else if( document.createEventObject ) { //IE
       var evObj = document.createEventObject();
       fireOnThis.fireEvent( 'on' + evt, evObj );
     } 
}

Checkout this DEMO: http://jsbin.com/vecebo/1/

The submit button may be hide using CSS style="visibility: hidden"

The function of triggering the event is referenced from HERE

How to submit a form with JavaScript by clicking a link?

The best way

The best way is to insert an appropriate input tag:

<input type="submit" value="submit" />

The best JS way

<form id="form-id">
  <button id="your-id">submit</button>
</form>

var form = document.getElementById("form-id");

document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});

Enclose the latter JavaScript code by an DOMContentLoaded event (choose only load for backward compatiblity) if you haven't already done so:

window.addEventListener("DOMContentLoaded", function () {
  var form = document.... // copy the last code block!
});

The easy, not recommandable way (the former answer)

Add an onclick attribute to the link and an id to the form:

<form id="form-id">

  <a href="#" onclick="document.getElementById('form-id').submit();"> submit </a>

</form>

All ways

Whatever way you choose, you have call formObject.submit() eventually (where formObject is the DOM object of the <form> tag).

You also have to bind such an event handler, which calls formObject.submit(), so it gets called when the user clicked a specific link or button. There are two ways:

Recommended: Bind an event listener to the DOM object.

// 1. Acquire a reference to our <form>.
//    This can also be done by setting <form name="blub">:
//       var form = document.forms.blub;

var form = document.getElementById("form-id");

// 2. Get a reference to our preferred element (link/button, see below) and
//    add an event listener for the "click" event.
document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});

Not recommended: Insert inline JavaScript. There are several reasons why this technique is not recommendable. One major argument is that you mix markup (HTML) with scripts (JS). The code becomes unorganized and rather unmaintainable.
```
<a href="#" onclick="document.getElementById('form-id').submit();">submit</a>

<button onclick="document.getElementById('form-id').submit();">submit</button>
```

Now, we come to the point at which you have to decide for the UI element which triggers the submit() call.

A button
```
<button>submit</button>
```
A link
```
<a href="#">submit</a>
```

Apply the aforementioned techniques in order to add an event listener.

JavaScript post request like a form submit

Dynamically create `<input>`s in a form and submit it

/**
 * sends a request to the specified url from a form. this will change the window location.
 * @param {string} path the path to send the post request to
 * @param {object} params the parameters to add to the url
 * @param {string} [method=post] the method to use on the form
 */

function post(path, params, method='post') {

  // The rest of this code assumes you are not using a library.
  // It can be made less verbose if you use one.
  const form = document.createElement('form');
  form.method = method;
  form.action = path;

  for (const key in params) {
    if (params.hasOwnProperty(key)) {
      const hiddenField = document.createElement('input');
      hiddenField.type = 'hidden';
      hiddenField.name = key;
      hiddenField.value = params[key];

      form.appendChild(hiddenField);
    }
  }

  document.body.appendChild(form);
  form.submit();
}

Example:

post('/contact/', {name: 'Johnny Bravo'});

EDIT: Since this has gotten upvoted so much, I'm guessing people will be copy-pasting this a lot. So I added the hasOwnProperty check to fix any inadvertent bugs.

How to submit the form using javascript with this

Submit form using this.form.submit()

i.e in your case it will be like

<a href="#" onclick="this.form.submit();">Save</a>

But it highly recommended to use form name

otherwise if you are comfortable using jquery you can also use jquery closest function

$(field).closest("form").submit();

How to Submit a Form Using JavaScript

How can I submit a form using JavaScript?