How to update values in DB using input tag-CodePudding

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" >nickname</label>
        <div >
            <input type="text"  value="${nickname}" id="nickname"
                        name="nickname" required><br>
        </div>



const usernickname= document.getElementById('nickname').getAttribute("value");



$.ajax({
                    url : '/nicknameok',
                    type : 'post',
                    data : {
                    
                        "nickname" : usernickname,
                    
                    },          
            });

CodePudding user response：

Try this:

<label for="user_name" >nickname</label>
<div >
<input type="text"  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>

CodePudding user response：

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>

CodePudding user response：

<!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...