Javascript 在表单上添加动态输入时遇到问题_Javascript_Php_Html_Input_Dynamic

Javascript 在表单上添加动态输入时遇到问题

javascript php html input dynamic

Javascript 在表单上添加动态输入时遇到问题,javascript,php,html,input,dynamic,Javascript,Php,Html,Input,Dynamic,我还是个学生，所以我在学习php和html5，我在做一个练习，我必须提交老师的名字和姓氏，他们的工资，以及每门课程有多少学生，如果一门课程有20名以上的学生，老师将获得10%的加薪，但只有一次，因此，如果老师有超过一门课程，有20名学生，他只会得到10%的加薪问题是，老师可以有1门、2门甚至5门课，但每次都会改变，所以我正在学习动态输入，到目前为止，代码只适用于1门课，但当我添加另一个输入并提交时，只识别第一个输入，而不是动态输入，我看了很多视频，读了很多指南，但似乎什么都不起作用，所以我认为

我还是个学生，所以我在学习php和html5，我在做一个练习，我必须提交老师的名字和姓氏，他们的工资，以及每门课程有多少学生，如果一门课程有20名以上的学生，老师将获得10%的加薪，但只有一次，因此，如果老师有超过一门课程，有20名学生，他只会得到10%的加薪

问题是，老师可以有1门、2门甚至5门课，但每次都会改变，所以我正在学习动态输入，到目前为止，代码只适用于1门课，但当我添加另一个输入并提交时，只识别第一个输入，而不是动态输入，我看了很多视频，读了很多指南，但似乎什么都不起作用，所以我认为我做错了什么，但不知道是什么

这是我的密码 Html:

建议您考虑使用<代码> name =“猿[] ] <代码>字段，然后将每个字段作为ArayOK递送，我不知道发生了什么，我试图在每个名称上加上“[]”，并修改了代码，但它给了我4个不同的错误，所以我惊慌并将其改回，现在它确实发送了动态输入，但这意味着我的代码中还有其他错误，对吗？因为计数应该是4美元而不是5美元？

    <!DOCTYPE html>
<html lang="es">
<head>
    <title>Formulario Profesores</title>
    <meta charset="utf-8">
    <meta charset="viewport" content="width=device-width, initial-scale=1">
    <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/customcss.css" rel="stylesheet">
</head>

<body class="bg-grdnt">
    <header>
        <h1 class="text-center">Formulario Profesores</h1>
    </header>

<div class="card bg-primary form-cntr" id="formulario">
    <div class="card-header bg-primary text-light text-center">
        Formulario
    </div>
    <div class="form-group">
        <form class="p-3 bg-light" id="form1" action="action.php" method="POST">
            <h4 class="card-title text-center">Calculo de Salario de Profesores</h4>
            <div class="form-group text-justify">
                <label>Nombre</label><br>
                <input class="form-control" type="text" name="nom" id="nom">
            </div>
            <div class="form-group text-justify">
                <label>Apellido</label><br>
                <input class="form-control" type="text" name="ape" id="ape">
            </div>
            <div class="form-group text-justify">
                <label>Sueldo</label><br>
                <input class="form-control" type="number" name="sue" id="sue">
            </div>
            <div class="form-group text-justify" id="contenedor_secciones">
                <p>Estudiantes por Secciones: (max. 5 Secciones)</p>
                <div class="form-inline" id="sec">
                <label>Seccion 1</label>
                <input class="form-control mx-sm-3" type="number" name="sez_1" id="sez_1" value="">
                </div>
            </div>
            <div class="form-group">
                <input type="button" class="btn btn-primary" id="add" value="Agregar Secciones">
            </div>
            <br>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" id="formsub" value="Calcular">
            </div>
        </form>
    </div>
</div>

    <footer>

    </footer>
    <script src="assets/bootstrap/js/bootstrap.js"></script>
    <script src="assets/javascript/jquery-3.5.1.js"></script>
    <script src="assets/javascript/customjs.js"></script>
</body>

</html>

    $(document).ready(function(){
    var maxField = 5;
    var addButton = $('#add');
    var wrapper = $('#contenedor_secciones'); 
    var x = 1; 
    //var fieldHTML = '<div class="form-inline" id="sec'+x+'"><label>Seccion '+x+'</label><input class="form-control mx-sm-3" type="number" name="seccion" id="sez" value=""><input type="button" class="btn btn-primary mx-sm-3" id="delete" value="-">'; //New input field html 

    $(addButton).click(function(){
        if(x < maxField){ 
            x++;
            $(wrapper).append('<div class="form-inline" id="sec'+x+'"><label>Seccion '+x+'</label><input class="form-control mx-sm-3" type="number" name="sez_'+x+'" id="sez_'+x+'" value=""><input type="button" class="btn btn-primary mx-sm-3" id="delete" value="-">'); 
        }
        else{
            alert("Numero maximo de secciones alcanzado");
        }
    });
    

    $(wrapper).on('click', '#delete', function(e){
        e.preventDefault();
        $('#sec'+x).last().remove();
        x--; 
    });
});

<?php

  $nombre = test_input($_POST["nom"]);
  $apellido = test_input($_POST["ape"]);
  $sueldo = test_input($_POST["sue"]);
  $cont= count($_POST);
  $tr= ($_POST["sez_2"]);

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
};

if ($cont=4) {
  $s1="sez_1";
  if ($_POST[$s1]!='') {
    $ss1= test_input($_POST[$s1]);
    if ($ss1>20) {
      $bon = ($sueldo * 0.1);
      $nsue = ($sueldo+$bon);
      echo "$nombre $apellido <br>";
      echo "Usted tiene un sueldo de: $sueldo<br>";
      echo "Pero como maneja una o mas secciones de 20 alumnos<br>Obtendra una bonificiacion de: $bon<br>";
      echo "Haciendo que su nuevo sueldo sea de $nsue";
      echo "$tr";
    }
    else{
      echo "$nombre $apellido <br>";
      echo "Usted tiene un sueldo de: $sueldo";
    };
  };
};



?>

.bg-grdnt{
    background-image:linear-gradient(#8080ff, #e6e6ff);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.form-cntr{
    width: 25rem;
    margin-left: auto;
    margin-right: auto;
    margin-right: auto;
    border:2px solid #0388fc;
}