This is a tutorial to build a form that when entering data into the form, will automatically return the content you just entered.
1. Building the html form:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <form class="form-info" action="" method="post"> <table> <tr> <td>氏名</td> <td><input type="text" id="name" name="name" value=""></td> <td>性別</td> <td> <div class="radio-male"><input type="radio" name="sex" value="1" checked><span> 男性</span></div> <div class="female"><input type="radio" name="sex" value="0"><span> 女性</span></div> </td> </tr> <tr> <td>電話番号</td> <td><input type="tel" name="phone" value=""></td> <td>メールアドレス</td> <td><input id="email" type="text" name="email" value=""></td> </tr> </table> <div class="list-button"> <button id="btn-add" type="submit" class="btn" >検素</button> </div> </form> |
2. Building ajax code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { var delay = 2000; var targeturl = '<?= Router::url(["controller"=>"homes","action"=>"getStates"]); ?>'; $('#btn-add').click(function(e){ e.preventDefault(); var name = $('#name').val(); if(name == ''){ $('.message_box').html( '<span style="color:red;">Enter Your Name!</span>' ); $('#name').focus(); return false; } var email = $('#email').val(); if(email == ''){ $('.message_box').html( '<span style="color:red;">Enter Email Address!</span>' ); $('#email').focus(); return false; } if( $("#email").val()!='' ){ if( !isValidEmailAddress( $("#email").val() ) ){ $('.message_box').html( '<span style="color:red;">Provided email address is incorrect!</span>' ); $('#email').focus(); return false; } } $.ajax ({ type: "POST", url: "app/webroot/ajax.php", // nhập link của trang xử lí dữ liệu data: "name="+name+"&email="+email, success: function(data) { setTimeout(function() { $('.message_box').html(data); }, delay); location.reload(); } }); }); }); // Check email nhập function isValidEmailAddress(emailAddress) { var pattern = /^([a-zd!#$%&'*+-/=?^_`{|}~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]+(.[a-zd!#$%&'*+-/=?^_`{|}~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]+)*|"((([ t]*rn)?[ t]+)?([x01-x08x0bx0cx0e-x1fx7fx21x23-x5bx5d-x7eu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|\[x01-x09x0bx0cx0d-x7fu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))*(([ t]*rn)?[ t]+)?")@(([a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|[a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF][a-zd-._~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]*[a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]).)+([a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|[a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF][a-zd-._~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]*[a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]).?$/i; return pattern.test(emailAddress); }; </script> |
3. Build ajax.php to handle data input into the database
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <?php /* Author: Javed Ur Rehman Website: https://www.allphptricks.com */ if ( ($_POST['name']!="")){ $name = $_POST['name']; var_dump($name); echo $name; } $username = "root"; // Khai báo username $password = ""; // Khai báo password $server = "localhost"; // Khai báo server $dbname = "dadabase_cakephp"; // Khai báo database // Kết nối database tintuc $connect = new mysqli($server, $username, $password, $dbname); //Nếu kết nối bị lỗi thì xuất báo lỗi và thoát. if ($connect->connect_error) { die("Không kết nối :" . $conn->connect_error); exit(); } //Khai báo giá trị ban đầu, nếu không có thì khi chưa submit câu lệnh insert sẽ báo lỗi $name = ""; $sex = 0; $phone = ""; $email = ""; //Lấy giá trị POST từ form vừa submit if ($_SERVER["REQUEST_METHOD"] == "POST") { if(isset($_POST["name"])) { $name = $_POST['name']; } if(isset($_POST["sex"])) { $sex = $_POST['sex']; } if(isset($_POST["phone"])) { $phone = $_POST['phone']; } if(isset($_POST["email"])) { $email = $_POST['email']; } $sex = (int)$sex; //Code xử lý, insert dữ liệu vào table $sql = "INSERT INTO customers (NAME, sex, phone, email) VALUES ('$name', '$sex', '$phone', '$email')"; if ($connect->query($sql) === TRUE) { echo "Thêm dữ liệu thành công"; } else { echo "Error: " . $sql . "<br>" . $connect->error; } } //Đóng database $connect->close(); ?> |