目標
図１のようにテキストの入力・追加・削除ができる機能があり、そこで入力されたリスト情報を図２のように表示させたいです。
図１(l1.php)
図２(l2.php)
問題点
l1.php の12行目より、入力された情報を l2.php へ送信しようと思ったのですが、まず「＋追加」ボタンを押すと l2.php へ遷移してしまうため、「＋追加」ボタンが正常に機能しなくなってしまいました。
追加ボタンを正常に機能させながら、「送信」ボタンで l2.php へ送信する方法を教えて頂けると幸いです。
PHP(l1.php)
1<!DOCTYPE html>2<html lang="ja">3<head>4 <meta charset="UTF-8">5 <meta http-equiv="X-UA-Compatible" content="IE=edge">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>Document</title>8 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">9</head>10<body>11 12<form action="l2.php" method='POST'>13 <div class="container">14 <table>15 <tbody>16 <tr>17 <td><input type="text" name="param1"></td>18 <td><button class="remove">✕</button></td>19 </tr>20 <tr>21 <td><input type="text" name="param2"></td>22 <td><button class="remove">✕</button></td>23 </tr>24 </tbody>25 </table>26 <button id="addRow">+ 追加</button>27 </div>28 <input type='submit'></button>29</form>30 31<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>32<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>33<script>34 $(function(){35 $('#addRow').click(function(){36 var html = '<tr><td><input type="text" name="param3"></td><td><button class="remove">✕</button></td></tr>';37 $('tbody').append(html);38 });39 40 $(document).on('click', '.remove', function(){41 $(this).parents('tr').remove()});42 });43</script>44</body>45</html>
0 コメント