Q&A
目標
図1のようにテキストの入力・追加・削除ができる機能があり、そこで入力されたリスト情報を図2のように表示させたいです。
図1(l1.php)
図2(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>
回答1件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/02/07 09:04