javascript - Merging checkboxes into one field in form

Question

I would like to ask for help with function that merge checkboxes into one field. In question Combine checkbox values into string before submitting form I have found one but I would like it to start onsubmit with another function that checks if the form was filled correctlty.

Form:

<form id="formularz_wspolpraca" name="Zapis na poradnik" method="post" target="_top" onsubmit="return SprawdzFormularz(this) && mergeFunction(this)">
   <input type="text" id="email" name="email"/>
   <input type="text" id="imie" name="imie"/>
   <input type="text" id="nazwisko" name="nazwisko"/>
   <input type="text" maxlength="12" size="12" id="pole_1" name="pole_1"/>
   <input class="checkbox_wspolpraca" type="Checkbox" name="pole_3a" value="polecajacy"> 
   <input class="checkbox_wspolpraca" type="Checkbox" name="pole_3b" value="projektant"> 
   <input class="checkbox_wspolpraca" type="Checkbox" name="pole_3c" value="instalator"> 
   <input class="checkbox_wspolpraca" type="Checkbox" name="pole_3d" value="ekspert"> 
   <input type="hidden" name="pole_3" id="pole_3">
   <input id="pp" type="checkbox" name="pp" checked=""/>
   <input type="submit"  value="Wyślij">
</form>

Merge function:

function mergeFuntion(event) {
   event.preventDefault();
   var boxes = document.getElementsByClassName('checkbox_wspolpraca');
   var checked = [];
   for (var i = 0; boxes[i]; ++i) {
      if (boxes[i].checked) {
        checked.push(boxes[i].value);
      }
   }
   var checkedStr = checked.join(' ');
   document.getElementById('pole_3').value = checkedStr;
   return true;
}

Check function:

function SprawdzFormularz(f) {
   if (f.email.value == "") {
      alert("Nie poda\u0142e\u015b/a\u015b adresu e-mail.");
      return false;
   }
   if (((f.email.value.indexOf("@", 1)) == -1) ||   (f.email.value.indexOf(".", 1)) == -1) {
      alert("Poda\u0142e\u015b/a\u015b b\u0142\u0119dny adres e-mail.");
      return false;
   }
   if (f.imie.value == "") {
      alert("Wype\u0142nij pole Imi\u0119. ");
      return false;
   }
   if (f.nazwisko.value == "") {
      alert("Wype\u0142nij pole Nazwisko. ");
      return false;
   }
   if (f.pole_1.value == "") {
      alert("Wype\u0142nij pole Nr telefonu. ");
      return false;
   }
   if ((f.pole_3a.checked == false) && (f.pole_3b.checked == false) && (f.pole_3c.checked == false) && (f.pole_3d.checked == false)) {
      alert("Wybierz zakres wsp\u00f3\u0142pracy");
      return false;
   }
   if (f.pp.checked == false) {
      alert("Musisz zgodzi\u0107 si\u0119 z Polityk\u0105 Prywatno\u015bci.");
      return false;
   }
   return true;
}

Check function is working without a problem but i can't get merge one to work as well. Can someone point out what am I doing wrong with merge function? I'm quite new to javascript so that could be some rookie mistake. Thanks in advance.

score 1 · Accepted Answer · answered Feb 15 '17 at 07:31

In onsubmit you are running SprawdzFormularz first and it returns true if all the checks pass. This means that it will submit the form, before the merge function is run.

You need to run the merge function inside the check function before returning true so that the form does not submit before you have combined the string and set the necessary value.

function SprawdzFormularz(f) {

    // ....


    var boxes = document.getElementsByClassName('checkbox_wspolpraca');
    var checked = [];
    for (var i = 0; boxes[i]; ++i) {
        if (boxes[i].checked) {
            checked.push(boxes[i].value);
        }
    }
    var checkedStr = checked.join(' ');
    document.getElementById('pole_3').value = checkedStr;

    return true;
}

javascript - Merging checkboxes into one field in form

1 Answers1