Hello I'm trying to update values in DB using input tag .ajax. However, when I type in some new values into the input text box it doesn't recognize the new input value. It still remains as the default value. So I tried to see what's up by displaying the value at web console, and it too showed me the default value.
Is this because I've settled up the input tags value as value="${nickname}" ?
here are some of my codes
enter code here
<label for="user_name" class="col-sm-2 col-form-label">nickname</label>
<div class="col-sm-10">
<input type="text" class="form-control" value="${nickname}" id="nickname"
name="nickname" required><br>
</div>
const usernickname= document.getElementById('nickname').getAttribute("value");
$.ajax({
url : '/nicknameok',
type : 'post',
data : {
"nickname" : usernickname,
},
});
Try this:
<label for="user_name" class="col-sm-2 col-form-label">nickname</label>
<div class="col-sm-10">
<input type="text" class="form-control" value="" id="nickname" name="nickname" required><br>
<input type="button" value="Submit" id="submit" />
</div>
<script>
var element = document.getElementById('nickname');
element.value = "Set Initial Value Here";
document.querySelector("#submit").onclick = function () {
var usernickname = element.value;
alert(usernickname);
// handle ajax here
}
</script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="text" name="" id="getValue" onchange="sendData()">
<script>
function sendData(){
const usernickname= document.getElementById('getValue').value;
$.ajax({
url: "index.php",
type: "POST",
data: {usernickname :usernickname },
cache: false,
}).success: function(result){
alert("data Saved Successfully");
});
}
</script>
</body>
</html>
in index.php file get the post data so that you can inset db easily. I hope this code will work for you. Thank you...
The ajax request is sent before the user changes value in the input field, one solution is to add a button and you should make ajax call once the button is clicked(onclick). So that user can change the value in input field and click the button
<html>
<body>
<input type="text">
<button onclick="changeNickName()">Change name</button>
</body>
<script>
function changeNickName() {
const nickname = document.querySelector("input").value;
$.ajax({
url: "url",
method: "POST",
data: { nickname: nickname }
})
}
</script>
</html>