-1

I AM NOT TRYING TO SUBMIT A FORM USING JAVASCRIPT!!" The above remark is misleading, inappropriate and confused

I have a html form that contains several elements (all with unique #id) which when clicked using the mouse correctly submits the form with the action=value pair.

<html><body><form id="frm-table" name="frm-table" method=get> 
<!-- the form has an action url to call php script that interprets passed values and serves new dynamic page -->
<!-- @20140820 - #id and #name added to form -->
<button id="cancel-btn" type="submit" name="action" value="cancel"><img src="http://foo.localhost/img/cancel16.png" alt="Cancel" title="Cancel" class="btn" name="btn_c" /></button>
<!--  several other inputs eg type=text and buttons type=submit -->
</form></body>

I have a js script that captures a document ESC keydown and as example: displays an alert to confirm capture.

    document.onkeydown = function(evt) {
        evt = evt || window.event;
        var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
        if (evt.keyCode == 27) {
            if (document.getElementById('cancel-btn') != null) {
//          alert('Esc key pressed.');   //just to test capturing ESC key - OK

// testing suggestion 201408211700
           document.getElementById('frm-table').action = 'http://foo.localhost/index.php?page=bg'
           document.getElementById('frm-table').submit();   //suggestion does not work - form not submitted

//         document.getElementById('cancel-btn').click();    //original does not work
            }
            evt.returnValue=false;
        }
        if ((evt.keyCode == 13) && (node.type=="text"))  {return false;}
    };

When the alert is replaced by a .click() nothing happens.

I do not understand why the native click event is not firing.

I am aware there is no click event on a button element, however it does accept and action a mouseclick on it. Calling a function to submit the form (by adding a listener event to the button does not work - it submits the form but the posted values do not include the button action=value pair.

So is there another js command to trigger the button element''s native functionality? Is important to note that the button is one of several type=submit buttons all of which give a different action-value pair.

[Ed] In an attempt to clarify: I am not trying to add a handler to the button element just trying to replicate the native type=submit function of the button. (mouse clicking the button submits the form with the important action=value pair without any js) I only have the option of adding javascript at my disposal not changing the dynamic generation of the page as it is part of a much larger application.

So although I thank those who have responded, the answers, so far, they do not resolve the question.

Tested in Firfox31 and IE9

kimmik
  • 21
  • 2
  • 8
  • 1
    That is because the ` – putvande Aug 19 '14 at 10:41
  • The action of the button when clicked with the mouse submits the value of the button with the form. It is this clcik action that I wish to replicate with the ESC key. There are other buttons in the form and other fields. I do not wish to reset the fields on the form. – kimmik Aug 19 '14 at 10:56
  • 1
    possible duplicate of [How to submit a form using javascript?](http://stackoverflow.com/questions/9855656/how-to-submit-a-form-using-javascript) –  Aug 19 '14 at 14:41
  • @Jhawins - No it is not. **Nothing** to do with adding onclick event handler to a – kimmik Aug 19 '14 at 14:50
  • @Kimmik yeah, actually you just don't understand your own question. –  Aug 19 '14 at 15:42
  • @Jhawins - Why add such an **offensive** comment? I am new here, your "reputation" suggests you should know better. Everyone else has at least attempted to be helpful. Your suggestion is completely inappropriate as an answer to the question. – kimmik Aug 19 '14 at 15:56
  • @kimmik I didn't attempt to answer any questions. I flagged your question as a duplicate, in fact I didn't even type out the "possible duplicate of. . ." text, that's automatic. The question I marked as a duplicate answers your question. My reputation is minimal for the amount of time I have been here and yes, I should've known better than to reply to you at all but I have not been "offensive" and flagging my comment as such will only lead to a declined flag. There's a reason this question is downvoted. –  Aug 19 '14 at 16:09
  • @Jhawins The question you "flagged" has nothing to do with my question. It is an entirely different subject. That "flag" is obstructive as it leads others away from providing an answer. I am afraid I find your previous comment offensive as it suggests that I know nothing and my English is poor. That is offensive. I also have no way to resolve this using chat but understand that this is not the place to undertake a conversation. – kimmik Aug 19 '14 at 16:33
  • Hi I created a fiddle for your problem, can you tell me what exactly you require as it seems to be fine http://jsfiddle.net/kz640usu/ – V31 Aug 20 '14 at 14:59
  • @V31 - the fiddle works but not when transferred to the actual problem. I cannot add a different action to the form - there is already an action url placed there by the application. But if I understand it all that the form action="/echo/jsonp" does is to echo the parameter. It still does not seem to be passed to the html form. The only changed line you made in the js is console.log("here"); ? – kimmik Aug 20 '14 at 15:49
  • you have an action parameter which is not getting invoked at the server with the correct form values? – V31 Aug 20 '14 at 15:58
  • @v31 - how is that possible when simply mouse clicking the button works perfectly? ie the action=cancel is sent/received and the appropriate actions taken? – kimmik Aug 20 '14 at 16:26

1 Answers1

2

That is because the <button> does not have an onclick handler on it, so it won't be triggered.

Instead of 

document.getElementById('cancel-btn').click();

you can just do

document.forms[0].reset();

which will also reset the form.

Unless the button that is called cancel-btn actually has to submit the form in which case you need:

document.forms[0].submit();
putvande
  • 15,068
  • 3
  • 34
  • 50
  • The last thing I want to happen is to reset the form. Totally not wanted. The form correctly submits Note type=submit when the button is clicked. – kimmik Aug 19 '14 at 10:58
  • 1
    Than use the `document.forms[0].submit()`. – putvande Aug 19 '14 at 11:08
  • Have just tried that but all it does is submit the form. The values submitted with the form do not contain the vital "action" information that is submitted when mouse clicking the button. – kimmik Aug 19 '14 at 11:16