E js Dynami c Форма имеют все те же данные - PullRequest
Новая
       10

E js Dynami c Форма имеют все те же данные

0 голосов
/ 06 февраля 2020

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

Например, если я нажимаю «Измените во второй строке таблицы, он должен взять то, что находится во второй строке, и заполнить форму точками. Но он всегда заполняет ее, используя данные первой строки, независимо от того, где я нажимаю. Вот код: 

<% if(data.length){ 
    for(var i = 0;i < data.length;i++) { %>
<tr>
  <td><%=data[i].ID%></td>
  <td><%=data[i].NOM%></td>
  <td><%=data[i].EMPLACEMENT%></td>
  <td><%=data[i].UTILITE%></td>
  <td><%=data[i].MARQUE%></td>
  <td><%=data[i].MODELE%></td>
  <td><%=data[i].NUMEROSERIE%></td>
  <td><%=data[i].PROCESSEUR%></td>
  <td><%=data[i].MEMOIRE%></td>
  <td><%=data[i].OS%></td>
  <td><%=data[i].CATEGORIE%></td>
  <td><%=data[i].VALEUR%></td>
  <td>
      <div class="container">

          <!-- Trigger the modal with a button -->
          <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>

          <!-- Modal -->
          <div class="modal fade" id="myModal1" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modifier serveur</h5>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                  <form name="form1m" action="/update" method="post">
                    <div class="form-group">
                        <label for="Inputm">ID</label>
                        <input type="text" class="form-control" id="Inputm5" placeholder="ID" name="<%=data[i].ID%>" value="<%=data[i].ID%>" readonly>
                      </div>
                    <div class="form-group">
                      <label for="Inputm">Nom</label>
                      <input type="text" class="form-control" id="Inputm" placeholder="Nom" name="<%=data[i].NOM%>" value="<%=data[i].NOM%>">
                    </div>
                    <div class="form-group">
                      <label for="Input2m">Emplacement</label>
                      <input type="text" class="form-control" id="Input2m" placeholder="Emplacement" name="EMPLACEMENT" value="<%=data[i].EMPLACEMENT%>">
                    </div>
                    <div class="form-group">
                      <label for="Input3m">Utilité</label>
                      <input type="text" class="form-control" id="Input3m" placeholder="Utilité" name="UTILITE" value="<%=data[i].UTILITE%>">
                    </div>
                    <div class="form-group">
                      <label for="Input4m">Marque</label>
                      <input type="text" class="form-control" id="Input4m" placeholder="Marque" name="MARQUE" value="<%=data[i].MARQUE%>">
                    </div>
                    <div class="form-group">
                      <label for="Input5m">Modèle</label>
                      <input type="text" class="form-control" id="Input5m" placeholder="Modèle" name="MODELE" value="<%=data[i].MODELE%>">
                    </div>
                    <div class="form-group">
                      <label for="Input6m">Numéro de série</label>
                      <input type="text" class="form-control" id="Input6m" placeholder="Numéro de série" name="NUMEROSERIE" value="<%=data[i].NUMEROSERIE%>">
                    </div>
                    <div class="form-group">
                      <label for="Input7m">Processeur</label>
                      <input type="text" class="form-control" id="Input7m" placeholder="Processeur" name="PROCESSEUR" value="<%=data[i].PROCESSEUR%>">
                    </div>
                    <div class="form-group">
                      <label for="Input8m">Mémoire</label>
                      <input type="text" class="form-control" id="Input8m" placeholder="Mémoire" name="MEMOIRE" value="<%=data[i].MEMOIRE%>">
                    </div>
                    <div class="form-group">
                      <label for="Input9m">OS</label>
                      <input type="text" class="form-control" id="Input9m" placeholder="OS" name="OS" value="<%=data[i].OS%>">
                    </div>
                    <div class="form-group">
                      <label for="Input10m">Catégorie</label>
                      <input type="text" class="form-control" id="Input10m" placeholder="Catégorie" name="CATEGORIE" value="<%=data[i].CATEGORIE%>">
                    </div>
                    <div class="form-group">
                      <label for="Input11m">Valeur</label>
                      <input type="text" class="form-control" id="Input11m" placeholder="Valeur" name="VALEUR" value="<%=data[i].VALEUR%>">
                    </div>
                    <input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
                  </form>
                </div>
                </div>
              </div>

            </div>
          </div>

Вот как выглядят данные:

data

Данные различаются, но когда я нажимаю кнопку Изменить, отображаются данные только из первой строки .

Вот визуализированный HTML (для двух строк на моем последнем скриншоте): 

 <tr>
  <td>20</td>
  <td>test</td>
  <td>1</td>
  <td>S</td>
  <td>HP</td>
  <td>EWE</td>
  <td>DFERu</td>
  <td>weWE</td>
  <td>wesdf</td>
  <td>ESFDdddddddddddddddddddddddddddd</td>
  <td>Cdeqawed</td>
  <td>989</td>
  <td>
      <div class="container">

          <!-- Trigger the modal with a button -->
          <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>

          <!-- Modal -->

          <div class="modal fade" id="myModal1" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modifier serveur</h5>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                  <form name="form1m" action="/update" method="post">
                    <div class="form-group">
                        <label for="Inputm">ID</label>
                        <input type="text" class="form-control" id="Inputm5-7" placeholder="ID" name="ID" value="20" readonly>
                      </div>
                    <div class="form-group">
                      <label for="Inputm">Nom</label>
                      <input type="text" class="form-control" id="Inputm-7" placeholder="Nom" name="NOM" value="test">
                    </div>
                    <div class="form-group">
                      <label for="Input2m">Emplacement</label>
                      <input type="text" class="form-control" id="Input2m-7" placeholder="Emplacement" name="EMPLACEMENT" value="1">
                    </div>
                    <div class="form-group">
                      <label for="Input3m">Utilité</label>
                      <input type="text" class="form-control" id="Input3m-7" placeholder="Utilité" name="UTILITE" value="S">
                    </div>
                    <div class="form-group">
                      <label for="Input4m">Marque</label>
                      <input type="text" class="form-control" id="Input4m-7" placeholder="Marque" name="MARQUE" value="HP">
                    </div>
                    <div class="form-group">
                      <label for="Input5m">Modèle</label>
                      <input type="text" class="form-control" id="Input5m-7" placeholder="Modèle" name="MODELE" value="EWE">
                    </div>
                    <div class="form-group">
                      <label for="Input6m">Numéro de série</label>
                      <input type="text" class="form-control" id="Input6m-7" placeholder="Numéro de série" name="NUMEROSERIE" value="DFERu">
                    </div>
                    <div class="form-group">
                      <label for="Input7m">Processeur</label>
                      <input type="text" class="form-control" id="Input7m-7" placeholder="Processeur" name="PROCESSEUR" value="weWE">
                    </div>
                    <div class="form-group">
                      <label for="Input8m">Mémoire</label>
                      <input type="text" class="form-control" id="Input8m-7" placeholder="Mémoire" name="MEMOIRE" value="wesdf">
                    </div>
                    <div class="form-group">
                      <label for="Input9m">OS</label>
                      <input type="text" class="form-control" id="Input9m-7" placeholder="OS" name="OS" value="ESFDdddddddddddddddddddddddddddd">
                    </div>
                    <div class="form-group">
                      <label for="Input10m">Catégorie</label>
                      <input type="text" class="form-control" id="Input10m-7" placeholder="Catégorie" name="CATEGORIE" value="Cdeqawed">
                    </div>
                    <div class="form-group">
                      <label for="Input11m">Valeur</label>
                      <input type="text" class="form-control" id="Input11m-7" placeholder="Valeur" name="VALEUR" value="989">
                    </div>
                    <input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
                  </form>
                </div>
                </div>
              </div>

            </div>
          </div>





    <form name = form2 action="/delete" method="post">
      <input type="submit" name="20" value="Delete" class="btn btn-outline-danger" />
    </form>



    <!--20-->
    <!--<form action="/update" method="put">
      <input type="submit" name="20" value="Update" class="btn btn-outline-primary" />
    </form>
    <form action="" method="post">
      <input type="submit" name="Delete" value="Delete" class="btn btn-outline-danger" />
    </form>-->
  </td>
  <!--20-->
</tr>

<tr>
  <td>21</td>
  <td>r5y</td>
  <td>5ry</td>
  <td>r5y</td>
  <td>y5r</td>
  <td>w3</td>
  <td>ww3</td>
  <td>w3</td>
  <td>55</td>
  <td>6</td>
  <td>7</td>
  <td>677</td>
  <td>
      <div class="container">

          <!-- Trigger the modal with a button -->
          <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>

          <!-- Modal -->

          <div class="modal fade" id="myModal1" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modifier serveur</h5>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                  <form name="form1m" action="/update" method="post">
                    <div class="form-group">
                        <label for="Inputm">ID</label>
                        <input type="text" class="form-control" id="Inputm5-8" placeholder="ID" name="ID" value="21" readonly>
                      </div>
                    <div class="form-group">
                      <label for="Inputm">Nom</label>
                      <input type="text" class="form-control" id="Inputm-8" placeholder="Nom" name="NOM" value="r5y">
                    </div>
                    <div class="form-group">
                      <label for="Input2m">Emplacement</label>
                      <input type="text" class="form-control" id="Input2m-8" placeholder="Emplacement" name="EMPLACEMENT" value="5ry">
                    </div>
                    <div class="form-group">
                      <label for="Input3m">Utilité</label>
                      <input type="text" class="form-control" id="Input3m-8" placeholder="Utilité" name="UTILITE" value="r5y">
                    </div>
                    <div class="form-group">
                      <label for="Input4m">Marque</label>
                      <input type="text" class="form-control" id="Input4m-8" placeholder="Marque" name="MARQUE" value="y5r">
                    </div>
                    <div class="form-group">
                      <label for="Input5m">Modèle</label>
                      <input type="text" class="form-control" id="Input5m-8" placeholder="Modèle" name="MODELE" value="w3">
                    </div>
                    <div class="form-group">
                      <label for="Input6m">Numéro de série</label>
                      <input type="text" class="form-control" id="Input6m-8" placeholder="Numéro de série" name="NUMEROSERIE" value="ww3">
                    </div>
                    <div class="form-group">
                      <label for="Input7m">Processeur</label>
                      <input type="text" class="form-control" id="Input7m-8" placeholder="Processeur" name="PROCESSEUR" value="w3">
                    </div>
                    <div class="form-group">
                      <label for="Input8m">Mémoire</label>
                      <input type="text" class="form-control" id="Input8m-8" placeholder="Mémoire" name="MEMOIRE" value="55">
                    </div>
                    <div class="form-group">
                      <label for="Input9m">OS</label>
                      <input type="text" class="form-control" id="Input9m-8" placeholder="OS" name="OS" value="6">
                    </div>
                    <div class="form-group">
                      <label for="Input10m">Catégorie</label>
                      <input type="text" class="form-control" id="Input10m-8" placeholder="Catégorie" name="CATEGORIE" value="7">
                    </div>
                    <div class="form-group">
                      <label for="Input11m">Valeur</label>
                      <input type="text" class="form-control" id="Input11m-8" placeholder="Valeur" name="VALEUR" value="677">
                    </div>
                    <input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
                  </form>
                </div>
                </div>
              </div>

            </div>
          </div>

Можете ли вы мне помочь?

Спасибо

Ответы [ 2 ]

0 голосов
/ 06 февраля 2020

Я решил свою проблему, я изменил эти: 

id="myModal1"
data-target="#myModal1"

до этого: 

data-target="#myModal1-<%=i%>"
id="myModal1-<%=i%>"
0 голосов
/ 06 февраля 2020

хм, моя первая ставка была бы, что id s должны быть уникальными. Вы пытались заменить id="Input2m" на id="Input2m-<%=i%>"? (То есть добавление к нему индекса l oop).

...