如何从php更新这些数字？

时间：2019-01-22 15:44:32

标签： javascript php html

所以我有一个html表单，其中有24个复选框，每个复选框上都有一个数字（一个复选框是一个房间，而其数字是一个自由空间符号） 我想要的是，如果某人选中了他/她必须选中的所有复选框，则php应该更新正确的复选框（房间）的数量（可用空间）。

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Piarista Kollégium - Stúdiumi jelentkezés</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />

</head>
<body>

<div class="topnav">

<div class="topnav-centered">
  <a href="#home" class="active">Jelentkezés</a>
</div>

<a href="updates.html">Frissítések</a>

<div class="topnav-right">
  <a href="login.html">Bejelentkezés</a>
</div>
</div>
<div id="head">
    <img src="logo.png">
</div>
<h2>Üdvözöllek, XY!</h2>
</div>


<form class="asd" id="checkbox" action="index.php"  method="post">
    <table>
      <thead>
          <tr>
            <th></th>
              <th>1.</th>
              <th>2.</th>
              <th>3.</th>
              <th>4.</th>
              <th>5.</th>
              <th>6.</th>
          </tr>
        </thead>

        <tbody>
            <tr>
              <th>Hétfő</th>
                <td><input type="checkbox" id="he1" onclick="checkingFunction(this)" name="hetfo"><label id="he1" for="he1">40</label></td>
                <td><input type="checkbox" id="he2" onclick="checkingFunction(this)" name="hetfo"><label id="he2" for="he2">40</label></td>
                <td><input type="checkbox" id="he3" onclick="checkingFunction(this)" name="hetfo"><label id="he3" for="he3">40</label></td>
                <td><input type="checkbox" id="he4" onclick="checkingFunction(this)" name="hetfo"><label id="he4" for="he4">40</label></td>
                <td><input type="checkbox" id="he5" onclick="checkingFunction(this)" name="hetfo"><label id="he5" for="he5">40</label></td>
                <td><input type="checkbox" id="he6" onclick="checkingFunction(this)" name="hetfo"><label id="he6" for="he6">40</label></td>
            </tr>
            <tr>
              <th>Kedd</th>
              <td><input type="checkbox" id="ke1" onclick="checkingFunction(this)" name="kedd"><label id="ke1" for="ke1">40</label></td>
              <td><input type="checkbox" id="ke2" onclick="checkingFunction(this)" name="kedd"><label id="ke2" for="ke2">40</label></td>
              <td><input type="checkbox" id="ke3" onclick="checkingFunction(this)" name="kedd"><label id="ke3" for="ke3">40</label></td>
              <td><input type="checkbox" id="ke4" onclick="checkingFunction(this)" name="kedd"><label id="ke4" for="ke4">40</label></td>
              <td><input type="checkbox" id="ke5" onclick="checkingFunction(this)" name="kedd"><label id="ke5" for="ke5">40</label></td>
              <td><input type="checkbox" id="ke6" onclick="checkingFunction(this)" name="kedd"><label id="ke6" for="ke6">40</label></td>
            </tr>
            <tr>
              <th>Szerda</th>
              <td><input type="checkbox" id="sze1" onclick="checkingFunction(this)" name="szerda"><label id="sze1" for="sze1">40</label></td>
              <td><input type="checkbox" id="sze2" onclick="checkingFunction(this)" name="szerda"><label id="sze2" for="sze2">40</label></td>
              <td><input type="checkbox" id="sze3" onclick="checkingFunction(this)" name="szerda"><label id="sze3" for="sze3">40</label></td>
              <td><input type="checkbox" id="sze4" onclick="checkingFunction(this)" name="szerda"><label id="sze4" for="sze4">40</label></td>
              <td><input type="checkbox" id="sze5" onclick="checkingFunction(this)" name="szerda"><label id="sze5" for="sze5">40</label></td>
              <td><input type="checkbox" id="sze6" onclick="checkingFunction(this)" name="szerda"><label id="sze6" for="sze6">40</label></td>
            <tr>
              <hr>
              <th>Csütörtök</th>
              <td><input type="checkbox" id="csu1" onclick="checkingFunction(this)" name="csutortok"><label id="csu1" for="csu1">40</label></td>
              <td><input type="checkbox" id="csu1" onclick="checkingFunction(this)" name="csutortok"><label id="csu2" for="csu2">40</label></td>
              <td><input type="checkbox" id="csu1" onclick="checkingFunction(this)" name="csutortok"><label id="csu3" for="csu3">40</label></td>
              <td><input type="checkbox" id="csu1" onclick="checkingFunction(this)" name="csutortok"><label id="csu4" for="csu4">40</label></td>
              <td><input type="checkbox" id="csu1" onclick="checkingFunction(this)" name="csutortok"><label id="csu5" for="csu5">40</label></td>
              <td><input type="checkbox" id="csu1" onclick="checkingFunction(this)" name="csutortok"><label id="csu6" for="csu6">40</label></td>
            </tr>
        </tbody>
    </table>
    <input type="submit" class="button" value="Jelentkezés elküldése">
</form>
</div>

<script type="text/javascript" src="main.js"></script>
</body>
</html>


var hetfoTomb = document.forms['checkbox'].elements[ 'hetfo' ];
var keddTomb = document.forms['checkbox'].elements[ 'kedd' ];
var szerdaTomb = document.forms['checkbox'].elements[ 'szerda' ];
var csutortokTomb = document.forms['checkbox'].elements[ 'csutortok' ];
var button = document.querySelector(".button");

var kotelezo = 2;
var hetfoC = 0;
var keddC = 0;
var szerdaC = 0;
var csutortokC = 0;

var h1hely = 40;
var h2hely = 40;
var h3hely = 40;
var h4hely = 40;
var h5hely = 40;
var h6hely = 40;

var k1hely = 40;
var k2hely = 40;
var k3hely = 40;
var k4hely = 40;
var k5hely = 40;
var k6hely = 40;

var sze1hely = 40;
var sze2hely = 40;
var sze3hely = 40;
var sze4hely = 40;
var sze5hely = 40;
var sze6hely = 40;

var csu1hely = 40;
var csu2hely = 40;
var csu3hely = 40;
var csu4hely = 40;
var csu5hely = 40;
var csu6hely = 40;

function checkingFunction(checkbox) {
  var change = checkbox.nextElementSibling;
  //HÉTFŐ
   if (change.id == "he1" || change.id == "he2" || change.id == "he3" || change.id == "he4" || change.id == "he5" || change.id == "he6") {
     enableIfItShould(hetfoC, hetfoTomb);
   } else if (change.id == "ke1" || change.id == "ke2" || change.id == "ke3" || change.id == "ke4" || change.id == "ke5" || change.id == "ke6") {
     enableIfItShould(keddC, keddTomb);
   } else if (change.id == "sze1" || change.id == "sze2" || change.id == "sze3" || change.id == "sze4" || change.id == "sze5" || change.id == "sze6") {
     enableIfItShould(szerdaC, szerdaTomb);
   } else if (change.id == "csu1" || change.id == "csu2" || change.id == "csu3" || change.id == "csu4" || change.id == "csu5" || change.id == "csu6") {
     enableIfItShould(csutortokC, csutortokTomb);
   }

  if (change.id == "he1") {
    if (checkbox.checked) {
      h1hely--;
      hetfoC++;
      disableIfFull(hetfoC, hetfoTomb);
    } else {
      h1hely++;
      hetfoC--;
    }
    change.innerHTML = h1hely;
  }
  else if (change.id == "he2") {
    if (checkbox.checked) {
      h2hely--;
      hetfoC++;
      disableIfFull(hetfoC, hetfoTomb);
    } else {
      h2hely++;
      hetfoC--;
    }
    change.innerHTML = h2hely;
  }
  else if (change.id == "he3") {
    if (checkbox.checked) {
      h3hely--;
      hetfoC++;
      disableIfFull(hetfoC, hetfoTomb);
    } else {
      h3hely++;
      hetfoC--;
    }
    change.innerHTML = h3hely;
  }
  else if (change.id == "he4") {
    if (checkbox.checked) {
      h4hely--;
      hetfoC++;
      disableIfFull(hetfoC, hetfoTomb);
    } else {
      h4hely++;
      hetfoC--;
    }
    change.innerHTML = h4hely;
  }
  else if (change.id == "he5") {
    if (checkbox.checked) {
      h5hely--;
      hetfoC++;
      disableIfFull(hetfoC, hetfoTomb);
    } else {
      h5hely++;
      hetfoC--;
    }
    change.innerHTML = h5hely;
  }
  else if (change.id == "he6") {
    if (checkbox.checked) {
      h6hely--;
      hetfoC++;
      disableIfFull(hetfoC, hetfoTomb);
    } else {
      h6hely++;
      hetfoC--;
    }
    change.innerHTML = h6hely;
  }
  //KEDD
  if (change.id == "ke1") {
    if (checkbox.checked) {
      k1hely--;
      keddC++;
      disableIfFull(keddC, keddTomb);
    } else {
      k1hely++;
      keddC--;
    }
    change.innerHTML = k1hely;
  }
  else if (change.id == "ke2") {
    if (checkbox.checked) {
      k2hely--;
      keddC++;
      disableIfFull(keddC, keddTomb);
    } else {
      k2hely++;
      keddC--;
    }
    change.innerHTML = k2hely;
  }
  else if (change.id == "ke3") {
    if (checkbox.checked) {
      k3hely--;
      keddC++;
      disableIfFull(keddC, keddTomb);
    } else {
      k3hely++;
      keddC--;
    }
    change.innerHTML = k3hely;
  }
  else if (change.id == "ke4") {
    if (checkbox.checked) {
      k4hely--;
      keddC++;
      disableIfFull(keddC, keddTomb);
    } else {
      k4hely++;
      keddC--;
    }
    change.innerHTML = k4hely;
  }
  else if (change.id == "ke5") {
    if (checkbox.checked) {
      k5hely--;
      keddC++;
      disableIfFull(keddC, keddTomb);
    } else {
      k5hely++;
      keddC--;
    }
    change.innerHTML = k5hely;
  }
  else if (change.id == "ke6") {
    if (checkbox.checked) {
      k6hely--;
      keddC++;
      disableIfFull(keddC, keddTomb);
    } else {
      k6hely++;
      keddC--;
    }
    change.innerHTML = k6hely;
  }
//SZERDA
  if (change.id == "sze1") {
    if (checkbox.checked) {
      sze1hely--;
      szerdaC++;
      disableIfFull(szerdaC, szerdaTomb);
    } else {
      sze1hely++;
      szerdaC--;
    }
    change.innerHTML = sze1hely;
  }
  else if (change.id == "sze2") {
    if (checkbox.checked) {
      sze2hely--;
      szerdaC++;
      disableIfFull(szerdaC, szerdaTomb);
    } else {
      sze2hely++;
      szerdaC--;
    }
    change.innerHTML = sze2hely;
  }
  else if (change.id == "sze3") {
    if (checkbox.checked) {
      sze3hely--;
      szerdaC++;
      disableIfFull(szerdaC, szerdaTomb);
    } else {
      sze3hely++;
      szerdaC--;
    }
    change.innerHTML = sze3hely;
  }
  else if (change.id == "sze4") {
    if (checkbox.checked) {
      sze4hely--;
      szerdaC++;
      disableIfFull(szerdaC, szerdaTomb);
    } else {
      sze4hely++;
      szerdaC--;
    }
    change.innerHTML = sze4hely;
  }
  else if (change.id == "sze5") {
    if (checkbox.checked) {
      sze5hely--;
      szerdaC++;
      disableIfFull(szerdaC, szerdaTomb);
    } else {
      sze5hely++;
      szerdaC--;
    }
    change.innerHTML = sze5hely;
  }
  else if (change.id == "sze6") {
    if (checkbox.checked) {
      sze6hely--;
      szerdaC++;
      disableIfFull(szerdaC, szerdaTomb);
    } else {
      sze6hely++;
      szerdaC--;
    }
    change.innerHTML = sze6hely;
  }

  if (change.id == "csu1") {
    if (checkbox.checked) {
      csu1hely--;
      csutortokC++;
      disableIfFull(csutortokC, csutortokTomb);
    } else {
      csu1hely++;
      csutortokC--;
    }
    change.innerHTML = csu1hely;
  }
  else if (change.id == "csu2") {
    if (checkbox.checked) {
      csu2hely--;
      csutortokC++;
      disableIfFull(csutortokC, csutortokTomb);
    } else {
      csu2hely++;
      csutortokC--;
    }
    change.innerHTML = csu2hely;
  }
  else if (change.id == "csu3") {
    if (checkbox.checked) {
      csu3hely--;
      csutortokC++;
      disableIfFull(csutortokC, csutortokTomb);
    } else {
      csu3hely++;
      csutortokC--;
    }
    change.innerHTML = csu3hely;
  }
  else if (change.id == "csu4") {
    if (checkbox.checked) {
      csu4hely--;
      csutortokC++;
      disableIfFull(csutortokC, csutortokTomb);
    } else {
      csu4hely++;
      csutortokC--;
    }
    change.innerHTML = csu4hely;
  }
  else if (change.id == "csu5") {
    if (checkbox.checked) {
      csu5hely--;
      csutortokC++;
      disableIfFull(csutortokC, csutortokTomb);
    } else {
      csu5hely++;
      csutortokC--;
    }
    change.innerHTML = csu5hely;
  }
  else if (change.id == "csu6") {
    if (checkbox.checked) {
      csu6hely--;
      csutortokC++;
      disableIfFull(csutortokC, csutortokTomb);
    } else {
      csu6hely++;
      csutortokC--;
    }
    change.innerHTML = csu6hely;
  }
}

button.addEventListener("click", function() {
  for (var i = 0; i < hetfoTomb.length; i++) {
    if (hetfoTomb[i].checked) {
      hetfoC++;
    }
  }
  for (var i = 0; i < keddTomb.length; i++) {
    if (keddTomb[i].checked) {
      keddC++;
    }
  }
  for (var i = 0; i < szerdaTomb.length; i++) {
    if (szerdaTomb[i].checked) {
      szerdaC++;
    }
  }
  for (var i = 0; i < csutortokTomb.length; i++) {
    if (csutortokTomb[i].checked) {
      csutortokC++;
    }
  }
  if (hetfoC >= kotelezo && keddC >= kotelezo && szerdaC >= kotelezo && csutortokC >= kotelezo) {
    alert("Tovább a véglegesítéshez!");
  } else {
    alert("Hiba");
  }
})

function disableIfFull(dayCounter, dayTomb) {
  if (dayCounter == kotelezo) {
    for (var i = 0; i<6; i++) {
      if (dayTomb[i].checked) {
        dayTomb[i].disabled = false;
      } else {
        dayTomb[i].disabled = true;
      }
    }
  }
}

function enableIfItShould(dayCounter, dayTomb) {
  if (dayCounter == kotelezo) {
    for (var i = 0; i < 6; i++) {
      if (dayTomb[i].disabled) {
        dayTomb[i].disabled = false;
      }
    }
  }
}

我要寻找的是更新正确标签中的正确输入（复选框）编号。 我知道只有在将其提交给php时才会发生，我正在寻找应该在提交数据后在php中更新这些数字的逻辑）

0 个答案:

没有答案
相关问题
最新问题