Блог

Главная - Вопросы по программированию - Проблема с добавлением динамических входных данных в сообщение формы

Проблема с добавлением динамических входных данных в сообщение формы

#javascript #php #html #input #dynamic

#javascript #php #HTML #ввод #динамический

Вопрос:

я все еще студент, поэтому я изучаю php и html5, и я выполняю практическое упражнение, в котором я должен указать имя и фамилию преподавателя, его зарплату и количество студентов, которые у них есть на каждом курсе, если на курсе более 20 студентов, преподаватель получит повышение зарплаты на 10%, но только один раз, поэтому не имеет значения, если у преподавателя более 1 курса с 20 студентами, он получит повышение зарплаты на 10% только один раз.

Дело в том, что у преподавателя может быть 1, 2 или даже 5 курсов, но он каждый раз меняется, поэтому я учусь делать динамические входные данные, пока что код работает с 1 курсом, но когда я добавляю другой ввод и выполняю отправку, распознает только первый ввод, а не динамический, я посмотрел много видео, прочитал много руководств, но, похоже, ничего не работает, поэтому я думаю, что я сделал что-то не так, но не знаю, что

Это мой код Html:

     <!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>

customjs

     $(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--; 
    });
});

Action.php

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



?>

Я пытался повторить сообщение второго ввода, чтобы увидеть, получаю ли я данные, но это не работает, поэтому, если кто-нибудь может мне помочь, указав мне правильное направление или написав правильный код, я действительно ценю это.

кстати, я студент, говорящий по-испански, поэтому какой-то текст или код может быть на испанском.

Редактировать: это Customcss.css, который я использую, я забыл добавить его (я не знаю, важно ли это, поэтому вот оно).

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

Комментарии:

1. Предлагаю вам рассмотреть возможность присвоения имен полям с помощью name="ape[]" Затем каждое поле доставляется в виде массива

2. Хорошо, я не знаю, что произошло, я попытался добавить «[]» к каждому имени и изменил код, но это дало мне около 4 разных ошибок, поэтому я запаниковал и изменил его обратно, и теперь он отправляет динамический ввод, но это означает, что что-то еще не так в моем коде, верно? потому что счетчик должен работать с 4, а не с 5 $ _POST?