4

I have a HTML form where one of the inputs is called named submit I also have a nicely formatted HTML element inside the form which is supposed to submit the form on click.

I noticed that form.submit is overridden by the input field which is named submit so I can't call form.submit() anymore.

I've searched for an answer, the general response is to rename the input. However I cannot do that. submit most appear as a parameter with a value in the request body.

Example code:

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

Keep in mind that my constraints are the following:

  • the element which the users clicks to submit the form is contains other formatted elements
  • submit is a required parameter in the request body
  • the request method must be POST
  • cannot make any modifications to the back-end

PS: this is my first question on stack overflow, love this site.

Improve this question
3
  • Just a side note, you don't have an input with an attribute called submit, but with the name submit ;) Commented Dec 16, 2014 at 12:02
  • Please checkout the updated version of my answer. Commented Dec 16, 2014 at 16:36
  • @vbo Please read the "Background" regarded in the question that you meant carefully to know that the two questions are different. Commented Dec 16, 2014 at 16:43

3 Answers 3

Reset to default
2

You can try calling

document.forms[0].submit();

assuming there is only one form on the document, or if that doesn't work, you can try calling the click method on the button

form.submit.click();

Hope that helps

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Sounds like a good plan. Unfortunately I have a variable number of forms, usually between 0 and 200 so I'll need to find then one I want to submit. form.submit.click() however seems like a good alternative.
1

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

Improve this answer

2 Comments

adding [] seems like a weird hack, however your second solution look promising, I'll test it soon :)
it works! thank you, the best solution is to create a hidden submit button and to trigger the click event of the submit button
0

I tried a little something that might be of help. Since we clearly are unable to use the form.submit(), we can submit your form details using a synchronous AJAX call.

The jQuery code to tell you what I'm talking about:

<script>
function submitForm(){      
  $.ajax({
     url:  "http://example.com/search",
     data: {
         submit : $("#submit").val()
     },
     success: function(){alert("It worked!");},
     error: function (xhr, textStatus, errorThrown){alert(errorThrown)},
     async: false
  });
}
</script>

And the HTML:

<form id="form1" name="form1" method="POST">
    <input type="hidden" id="submit" name="submit"/>
    <input type="button" value="Submit" onclick="javascript:submitForm()">
</form>
Improve this answer

1 Comment

Sorry, forgot to specify this, I'm submitting the form to another domain. As far as I know AJAX does not allow this plus I also want to navigate to that site, not to process the response using Javascript.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.