How exactly work this form submission JavaScript?

Question

I am very new in JavaScript and I have the following doubt about how exactly work this script that submit a form:

So in my html I have the following form:

<form id="actionButton<%=salDettaglio.getCodice()%>" action="salwf.do?serv=1" method="post">
    <button id="accept" name="ctrl" value="Accept" type="submit" class="acceptButton" onclick="sottometti(this,'<%=salDettaglio.getCodice()%>')">ACCEPT ICON BUTTON</button>
    <button id="cancel" name="ctrl" value="Cancel" type="submit" class="cancelButton" onclick="sottometti(this)">CANCEL ICON BUTTON</button>
    <button id="sap" name="ctrl" value="SAP" type="submit" class="sapButton" onclick="sottometti(this)">SAP ICON BUTTON</button>

    <input id="testId<%=salDettaglio.getCodice()%>" name="test" type="hidden">
</form>

So the submission of this form is directed towards a page salwf.do and each time pass a parameter named serv and having 1 as value (is this a GET?)

Then inside the form I have 3 buttons having different id and different values and the input tag (that I think it is what I am submitting, is it right?)

As you can see when the user click on a button is called the sottometti(this) script that take as parameter the reference to the object that have generated the click (in this case the clicked button)

And this is this JavaScript code:

function sottometti(obj,id){
    document.getElementById('testId'+id).value = obj.value;
    document.getElementById('actionButton'+id).submit()
}

So how exactly work this script?

I think that it do the following thing (but I am not sure about it and maybe I am missing something).

It take 2 input parameters: the clicked button reference (obj) and the id string (that represent a code of a Java object, but this is not important now).

Using:

document.getElementById('testId'+id)

it retrieve the reference of the input tag of the form and set the value (what I want submit) with the button value (that can be: Accept or Cancel or Sap)

Then by:

document.getElementById('actionButton'+id)

retrieve my form and submit it

So the value of the clicked button will be submitted to the salwf.do servlet as POST.

Is it my reasoning correct or am I missing something?

Tnx

mplungjan · Accepted Answer · 2014-12-02T14:04:56.807

1

Yes your reasoning is correct, but you have some issues.

you only pass the ID from one of the buttons - the accept one
For all buttons you seem to want to add Accept/Cancel/SAP to a hidden field called testAccept, testCancel or testSAP and submit a form with ID actionButtonAccept, actionButtonCancel, actionButtonSAP but do not have either the field nor the form in the Cancel/SAP situation.
do not submit in a click event of a submit button

I would do

function sottometti(obj){
  obj.form.test.value = obj.value;
  // obj.form.submit(); // all the buttons are submit buttons
}

edited Dec 02 '14 at 14:04

answered Dec 02 '14 at 13:35

mplungjan

169,008
28
173
236

what kind of issues can I have? – AndreaNobili Dec 02 '14 at 13:43

score 1 · Answer 2 · edited May 23 '17 at 11:57

1

Be careful about one thing. Here you attach JavaScript to button[type=submit] and you execute form submit. So in fact you submit it twice.

If you want to prevent submission you should at least return false in your callback function (best is anyhow to use event.preventDefault();) like in that answer https://stackoverflow.com/a/23646215/2802756

edited May 23 '17 at 11:57

Community

1
1

answered Dec 02 '14 at 13:46

Lukasz Marek Sielski

424
3
7

How exactly work this form submission JavaScript?

2 Answers2