How Send a Form with JavaScript When Input Name Is "Submit"

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 send a form with Javascript when input name is submit?

Worth noting: It's often a lot easier to just change the input name to something other than "submit". Please use the solution below only if that's really not possible.

You need to get the submit function from a different form:

document.createElement('form').submit.call(document.getElementById('redirectForm'));

If you have already another <form> tag, you can use it instead of creating another one.

Why Form doesn't submit with javascript if an input field's name is submit

The problem is that the submit button has the name submit and this clash is overriding the form's submit() function.

If you remove the name="submit" attribute, this will work.

Here is some more information on conflicts:

http://jibbering.com/faq/names

http://paulsec.github.io/blog/2014/03/09/dealing-with-html-submits-conflict

Send form data to Javascript on submit

Something like this?

document.getElementById('theform').onsubmit = function() { 
    console.log(document.getElementById('searchTerm').value);
    return false;
};

JSFiddle here: https://jsfiddle.net/km7rt62v/

It's important to return false; to prevent default behaviour at the end of your submit handler, as otherwise the form will post and reload the page.

As others have demonstrated, it is also possible to use the onsubmit html attribute of the form element, it's a personal preference, but I prefer a cleaner separation between JS and HTML.

Edit: Since I got accepted answer and the question is tagged with jQuery, here's the jQuery equivalent:

$('#theform').submit(function() { 
    console.log($('#searchTerm').val());
    return false;
});

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.

1. A button

   <button>submit</button>
   

2. A link

   <a href="#">submit</a>
   

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

Why does a HTML form not send with the name=submit and type=submit using JQuery

You're having issues because the name being submit is overriding the form.submit() function reference for that <form>, instead submit_button.submit refers to that button, rather than the DOM submit() function.

Read this post for more and also this doesn't work even when dhe id is submit .

Read here for this also

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.

---

Related Topics