Sending a post request via ajax is not working
Question
I want to send an Ajax request when clicking a button but it seems my request is never executed.
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>User Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src = "./actions.js"></script>
</head>
<body>
<div id="badFrm" class="container">
<h2><br>User Registration</h2>
<form id="Form" method="post">
<div class="form-group">
<label for="name">Name:</label>
<input type="name" class="form-control" id="name" placeholder="Enter Name" name="name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
</div>
<button id="submitBtn" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
and here is my javascript code: i feel there is something wrong with my javascript code but i cant figure whats wrong. i changed a lot of it based on the comments. what i want is when i click on the update button it changes to " submit again " and i want to replace "list items" ( name and eamil ) with input fields and put whatever written in them to be saved in the database instead. and eventually return to the first page which is the register form.
$(document).ready(function() {
var i ;
$("#submitBtn").click(function (e) {
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
$.post("http://localhost/MiniProject/connect.php",
{
name: name,
email: email
}, function () {
var element = document.getElementById("badFrm");
element.remove();
showTbl();
});
function showTbl() {
$.post("http://localhost/MiniProject/Select.php",
{
name: name,
email: email
}, function (res) {
// console.log(res);
res = JSON.parse(res);
var html = '<ul id="List">';
for (i = 0; i < res.length; i++) {
var j = i +1 ;
html += '<li class = "name" >' + res[i].name + '</li><li class = "email">' + res[i].email + '</li>'+ '<div>' + '<button onclick="removeUser(this)" id="'+j+'" class="btn btn-primary">Remove</button>' + '<button onclick="updateUser(this)" id="'+j+'" class="btn btn-primary">Update</button>' + '</div>';
}
html += '</ul>';
document.body.innerHTML = html;
});
}
// function Update() {
// $.post("http://localhost/MiniProject/Update.php",
// {
// name: name,
// email: email
// }, function (res) {
// alert(res);
// });
// }
});
});
// $(document).ready(function() {
//
// $("#removeBtn").click(function (e) {
// e.preventDefault();
// var ID = document.getElementById("removeBtn");
// var element2 = document.getElementById("List");
// element2.remove();
// $.post("http://localhost/MiniProject/Remove.php",{
// id : ID
// }, function (res) {
// document.write(res);
// });
// });
//
// });
function removeUser(element){
var ID = element.id;
var element2 = document.getElementById();
element2.remove();
$.post("http://localhost/MiniProject/Remove.php",{
id : ID
}, function (res) {
console.log(res);
document.write(res);
});
//alert(element.id);
}
function updateUser(element){ // i need help in this part
var ID2 = element.id;
listItem = document.querySelector("li.name");
newNameInput = document.createElement('INPUT');
newNameInput.innerHTML = '<input type="name" class="form-control" id="name" placeholder="Enter New Name" name="name">';
listItem.parentNode.replaceChild(newNameInput, listItem);
listItem = document.querySelector("li.email");
newEmailInput = document.createElement('INPUT');
newEmailInput.innerHTML = '<input type="email" class="form-control" id="email" placeholder="Enter New Email" name="email">';
listItem.parentNode.replaceChild(newEmailInput, listItem);
// var Data = document.getElementbyId("lstitm");
// Data.remove();
// var Input = document.createElement("INPUT");
// Input.setAttribute('type','text');
$.post("http://localhost/MiniProject/Update.php",{
id : ID2,
}, function (res) {
console.log(res);
// document.write(res);
});
}
1 answers
solution1
0 ACCPTED 2021-04-18 09:33:20
The issue is in the javascript code.
I can see that you are creating the button #removeBtn on the callback of the ajax request sent when the user clicks on the submit button, in showTbl() .
Then you call removeUser() that is creating the handler for the newly created #removeBtn button.
The issue you are experiencing is that the ajax callback is asynchronous . So, you are attaching the handler on the #removeBtn before the button is created.
Here is what you should do:
$("#submitBtn").click(function (e) {
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
$.post("http://localhost/MiniProject/connect.php",
{
name: name,
email: email
}, function () {
var element = document.getElementById("badFrm");
element.remove();
showTbl();
//removeUser(); <- remove that line
// Update();
}
);
function showTbl() {
$.post("http://localhost/MiniProject/Select.php",
{
name: name,
email: email
}, function (res) {
res = JSON.parse(res);
var html = '<ul id="List">';
for (var i = 0; i < res.length; i++) {
html += '<li>' + res[i].name + '</li><li>' + res[i].email + '</li>'+ '<div>' + '<button id="removeBtn" class="btn btn-primary">Remove</button>' + '<button id="updateBtn" class="btn btn-primary">Update</button>' + '</div>';
}
html += '</ul>';
document.body.innerHTML = html;
removeUser(); // <- call it there instead
}
);
}
I also recommend you yo rename your function removeUser() as it is not removing anything, it is just attaching the handler to the button.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.