0

NOTE: This is a very specific question regarding Javascript and HTML forms. I have searched and cannot find an answer for this particular question, which involves the Dojo framework, and does not involve JQuery. Please do not mark this as a "duplicate" of a JQuery question, because it does not involve JQuery.

I need to submit a form by clicking a button which is of type "button", not type "submit". However, I also need to include the name of the button that was clicked, which is not normally submitted under these circumstances. The reason for this change (from the original "submit" functionality) is because there can be upwards of a dozen buttons on this dynamic form and if they are all "submit" buttons, the users will press "enter" to move to the next field and will be confused when the form does something unexpected (like submitting) instead of moving to the next field.

The method I have come up with to do this is to change all the button type='submit' tags to button type='button' controls. I then added this small Javascript fragment (we use the Dojo library so this is Dojo syntax):

query("button[type='button']").on("click",function(e) {
    dom.byId("myform").submit();
}

This works but on the server side, it's not processed correctly. When a submit button is pressed, the form data (parsed by Chrome) looks like:

myInput1: 1
myInput2: Some Data
_button_Button23: addSomeFields

the last line is the button name and ID. When the form is submitted using the Javascript above, the last line is missing:

myInput1: 1
myInput2: Some Data

I need to add the last element to the form data before submitting it.

I have searched for this information but unfortunately all the existing examples use Jquery, which is not available to me in this case. How can I add this information to the form data using either Dojo or regular Javascript?

Community
  • 1
  • 1
user1071914
  • 3,295
  • 11
  • 50
  • 76
  • Why not set the buttons value attribute to a hidden form field element inside the above mentioned click event handler? – Runcorn May 19 '14 at 20:21
  • @Pawal - Unfortunately I don't have many choices on the server side either since we're using Spring Web Flow. The form values have to come into the server in very specific ways or the Web Flow stuff won't consume them. We've pretty much written ourselves into a corner. :( – user1071914 May 19 '14 at 20:38
  • @Pawal - I re-read your answer and it is in fact correct. The magic was that I needed to create the hidden field as a different type of input rather than a button, to add it as a "new field" I guess. If you want to post an answer below I'll mark it correct. – user1071914 May 19 '14 at 22:56
  • Let it be. Glad it worked out for you. :D – Runcorn May 19 '14 at 22:59

1 Answers1

0

you could add the button element to the form on submit, or create an hidden input element and add that to the form

var form = dom.byId('myform');
form.appendChild(e.target);
form.submit();
Icepickle
  • 12,689
  • 3
  • 34
  • 48