javascript - 将复选框合并到表单中的一个字段中

时间:2017-02-15 07:21:55

标签: javascript html forms

我想请求将复选框合并到一个字段中的函数的帮助。问题Combine checkbox values into string before submitting 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>

合并功能:

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

检查功能:

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

检查功能没有问题,但我也无法合并。有人能指出我合并功能有什么问题吗?我对javascript很新,所以这可能是一些新手的错误。提前谢谢。

1 个答案:

答案 0 :(得分:1)

在onsubmit中,您首先运行SprawdzFormularz,如果所有检查都通过,则返回true。这意味着它将在合并函数运行之前提交表单。

您需要在返回true之前在check函数中运行merge函数,以便在组合字符串并设置必要值之前不提交表单。

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