javascript - Two functions handling a form

Question

I'm in need of help with some javascript handling a form. I'm quite new to this and don't know what to do next. I have two functions with a form: one to check if data is ok and another to merge checkboxes into one record. Is there a way to merge them into one fuction?

Form code:

<form id="formularz_wspolpraca"   name="Zapis na poradnik" method="post" target="_top" onsubmit="return SprawdzFormularz(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>

Check data 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;
  }
  form.submit();
  return true;
}

Merge checkboxes function:

var form = document.getElementById('formularz_wspolpraca');
try {
  form.addEventListener("submit", mergeFuntion, false);
} catch (e) {
  form.attachEvent("onsubmit", mergeFuntion);
}

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 false;
}

Looking forward to your responses, I'm quite lost.

Barmar · Accepted Answer · 2017-02-13T16:11:39.977

1

You can simply call both functions in the onsubmit:

onsubmit="return SprawdzFormularz(this) && mergeCheckboxes(this)"

If you want to run the merge function even if the checking function fails, you can set variables:

onsubmit="check = SprawdzFormularz(this); merge = mergeCheckboxes(this); return check && merge"

edited Feb 13 '17 at 16:11

answered Feb 13 '17 at 08:03

Barmar

741,623
53
500
612

If I do that, checking function works fine but merging doesn't work. Should I change something in code of the function? – krzsz Feb 13 '17 at 15:58
It only runs the merging code if the checking function succeeds, because `&&` is a short-circuiting operator. – Barmar Feb 13 '17 at 16:10
Sure I get it but even if checking suceeds merging wouldn't work. It sends empty field. Maybe there is a way to merge this functions into one? – krzsz Feb 13 '17 at 16:24
I just looked closer at your code. Why does the merge function always return `false`? – Barmar Feb 13 '17 at 16:51
I used function from response to this topic http://stackoverflow.com/questions/17935869/combine-checkbox-values-into-string-before-submitting-form . It worked alone but combined with other one created some problems. Im totally green in javascript, could be some rookie mistake. – krzsz Feb 13 '17 at 17:00
Returning false from an event handler is how you indicate that it should not execute the default action. That answer returns false because it's going to send the parameters using AJAX instead of normal form submission. – Barmar Feb 13 '17 at 19:06
So if I understand corectly, the problem is returning false in merging function because it does not complete. If I change it to true and run it with onsumbit all should ok? – krzsz Feb 14 '17 at 06:48
Give it a try and see what happens. – Barmar Feb 14 '17 at 17:09
Unfortunately merge function still doesn't work. Maybe it is something connected with event.preventDefault(); at the start of the function? I also removed form.submit(); from the original one, maybe restore it back? BTW I really appreciate that you are trying to help :) – krzsz Feb 14 '17 at 19:33
I haven't looked at the content of either function much. Your question was about how to call both functions, not how to fix the functions themselves. I think I've answered that as best as I can, I'm not planning on extending this to discussion of what the functions do. – Barmar Feb 14 '17 at 19:35

javascript - Two functions handling a form

1 Answers1