Q&A
目標
図１のようにテキストの入力・追加・削除ができる機能があり、そこで入力されたリスト情報を図２のように表示させたいです。
図１(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>
回答1件
0
ベストアンサー
とりあえずbuttonタグがサブミットとして機能している箇所があるのでそこを修正するところから
HTML
1<button id="addRow">+ 追加</button> 2↓↓↓ 3<button id="addRow" type="button">+ 追加</button>
投稿2023/02/07 08:41
総合スコア109981
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/02/07 09:04