<form id="myForm" method="post"> <div> <label for="pref">都道府県</label> <select id="pref" name="pref"> <option value="01">北海道</option> <option value="02" selected>青森県</option> <option value="03">岩手県</option> </select> </div> <div> <label for="comment">コメント</label> <textarea id="comment" name="comment" required></textarea> </div> <div> <button type="submit">登録</button> </div> </form>
document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); // デフォルトのフォーム送信を防ぐ var pref = document.getElementById('pref').value; var comment = document.getElementById('comment').value; fetch('submit.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'pref=' + encodeURIComponent(pref) + '&comment=' + encodeURIComponent(comment) }) .then(response => response.text()) .then(data => { alert('データが正常に送信されました'); }) .catch(error => { console.error('エラーが発生しました:', error); }); });
submit.php
<?php $servername = "localhost"; $username = "your_username"; $password = "your_password"; $dbname = "your_database"; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("接続に失敗しました: " . $conn->connect_error); } $pref = $_POST['pref']; $comment = $_POST['comment']; $sql = "INSERT INTO your_table (pref, comment) VALUES ('$pref', '$comment')"; if ($conn->query($sql) === TRUE) { echo "新しいレコードが作成されました"; } else { echo "エラー: " . $sql . "<br>" . $conn->error; } $conn->close(); ?>