Question

我正在创建一个简单的表单，允许您输入数据，然后将其发送到数据库。特别是，我需要从您那里了解如何创建动态表格，该表格允许我输入用户指定的人数。基本上，如果用户要添加3个人，则必须显示3个新字段以输入“姓名”，“姓氏”和“电子邮件”，如果要添加5个新字段，则为5个。

我写了这个，但是在我的index.php中不起作用。

// Funzione che permette di aggiungere elementi al form (in questo caso rate)
function Aggiungipersone(person) {
  var numero_persone = person.value;
  var box = document.getElementById('box_person');
  if (numero_persone == "") {
    box.innerHTML = '';
  } else {
    if (isNaN(numero_persone) == true) {
      box.innerHTML = '';
    } else {
      var righe = "";

      // Inserisco una riga ad ogni ciclo
      for (i = 1; i <= numero_persone; i++) {
        righe = righe + "Persona n°" + i + " : <input type='text' name='iname" + i + " size='10' value='" + Cognome + "' type='text' name='isurname' size='10' value=''/><br/>";
      }
      // Aggiorno il contenuto del box che conterrà gli elementi aggiunti
      box.innerHTML = righe;
    }
  }
}

Inserire i dati richiesti:<br><br>
<form method="post" action="input.php">
  <b> Richiedente Conferenza:</b><br><br> Nome:
  <input type="text" name="name" size="20"><br> Cognome:
  <input type="text" name="surname" size="20"><br> Email: <input type="email" name="email" size="20"><br> Oggetto Conferenza:<br><textarea name="testo" rows="5" cols="40" placeholder="Specificare oggetto Videoconferenza"></textarea><br>


</form>

更新

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Prenotazione Videoconferenza</title>
<script src="utils.js"></script>
</head>

<body>
<?php
$( document ).ready(function() {
    $("#add").click(function(){

      var val1 =$("#n1").val();
      for(var i=0;i<val1;i++){
      $("#start").append($("#first").clone());
      }
    });
});
?>

Inserire i dati richiesti:<br><br>
<form method="post" action="input.php">
<b> Richiedente Conferenza:</b><br><br>
Nome:<input type="text" name="name" size="20"><br>
Cognome:<input type="text" name="surname" size="20"><br>
Email: <input type="email" name="email" size="20"><br>
Oggetto Conferenza:<br><textarea name="testo" rows="5" cols="40" placeholder="Specificare oggetto Videoconferenza"></textarea><br>

</form>
</body>
</html>

我在utilis.js中插入：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="n1" value="1"><br>

<a href="#" id="add">Add</a>

<div id="start">
  <div id="first">
    Nome:<input type="text" name="name" size="20"><br> Cognome:
    <input type="text" name="surname" size="20"><br> Email: <input type="email" name="email" size="20"><br>
    <br>
  </div>
</div>

Answer 1

// content of external javascript file: 

$(document).ready(function() {
  $("#add").click(function(e) {
    e.preventDefault(); // stop the link
    var val1 = $("#n1").val();
    for (var i = 0; i < val1; i++) {
      $("#start").append($("#first").clone());
    }
  });
});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>Prenotazione Videoconferenza</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- here is the external file -->
  <script src="utils.js"></script>
</head>

<body>

  <input type="text" id="n1" value="1"><br>

  <a href="#" id="add">Add</a>

  <div id="start">
    <div id="first">
      Nome:<input type="text" name="name[]" size="20"><br> Cognome:
      <input type="text" name="surname[]" size="20"><br> Email: <input type="email" name="email[]" size="20"><br>
      <br>
    </div>
  </div>
</body>

</html>

提交表单后，您将把数组放入php文件，您可以像这样访问

if($_POST['name']){ foreach($_POST['name'] as $name) { echo $name; } }

Answer 2

1）与VueJS-demo on code pen

2） jQuery

const tmpl = $('#tmpl').html().trim()

$('#btn-add').click(() => {
    let peopleCount = +$('#people-count').val(),
        html = Array(peopleCount)
            .fill(tmpl)
            .join('')
    $('#form-items').append(html)
})

$('#form')
    .submit(() => {
        alert('Submit form by ajax or remove this mathod for default behavior')
        return false;
    })
    .delegate('.btn-del', {
        click() {
            $(this).closest('.row').remove()
        },
    })

<div id="app">
    <div>
        <div>
            <button id="btn-add">Add new user</button>
            <label>Number of People:</label>
            <input type="number" id="people-count" value="1" min="1">
        </div>
        <form id="form">
            <div id="form-items" data-empty="Users list is empty"></div>
            <button>Send</button>
        </form>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/x-template" id="tmpl">
    <div class="row">
        <label>
            Name:
            <input class="people" name="name[]">
        </label>
        <label>
            Surname:
            <input class="people" name="surname[]">
        </label>
        <label>
            Email:
            <input type="email" class="people" name="email[]">
        </label>
        <button class="btn-del">Delete</button>
    </div>
</script>

<style>
    .people {
        width: 80px;
    }
    #form-items:empty + button {
        display: none;
    }
    #form-items:empty:before {
        content: attr(data-empty);
        display: block;
    }
</style>

Answer 3

您将需要以下内容：

$("#people").on("keyup", function() {
  $("#form").html(""); // clear the form
  var people = $(this).val();
  for(i=1;i<=people;i++) {
     $("#form").append("<input type='text' name='name[]' placeholder='Name Person "+i+"'><br>");
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>Number of People:</label>
<input type="number" id="people">
<div id="form"></div>

如您所见，输入名称带有[]，表示它们是数组。。这意味着在服务器端脚本上，您将收到必须通过的数组

foreach($_POST["names"] as $name) {
    // do whatever
}

提交值的动态表格

3 个答案: