How to make a "POST" from an HTML form with XMLHttpRequest()?

  ajax, html, javascript

I have this initial HTML form, where the user writes the mentor’s name and I want to make a POST by clicking on the button, but the endpoint never updates with the new name

    <form>
            <div class="form-group">
              <label for="exampleInputEmail1">Mentor Name</label>
              <input type="text" class="form-control" id="mentor-input" aria-describedby="emailHelp">
              
              <button type="submit" class="btn btn-primary" id="btn-submit">Submit</button>
    </form>


//Here is my object 
    let mentor = { 
        name: ""
        }

    document.getElementById("mentor-input").addEventListener("keyup", (event)=> {
        let inputValue = event.target.value
        mentor.name= inputValue
        
        }
    )
    
     
    document.getElementById("btn-submit").addEventListener("click",()=> {
        let xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                let response = xhttp.responseText;
             
         };
    
            xhttp.open("POST", `https://ajaxclass-1ca34.firebaseio.com/11g/JavADv/mentors.json`, true);
            xhttp.send(JSON.stringify(mentor));
        }
    })

Source: Ask Javascript Questions

LEAVE A COMMENT