Can't read the form elements-CodePudding

I can't get the values of these three fields; it only returns an empty value (a space). The ids are correctly set in the form.

<script>
    const data = {
      id: document.getElementById('idbook').value,
      name: document.getElementById('namebook').value,
      price: document.getElementById('pricebook').value
    };
      function myFunction(){
    const http = new easyHTTP;

http.put('https://otg0gf6qw5.execute-api.us-east-2.amazonaws.com/books',
   data, function(err, post){
  if(err) {
    console.log(err);
  } else {
    console.log(post);
  }
});

    </script>

<!DOCTYPE html>
<html>
<body>

    <div >
        <form method="post" id="save" action="javascript:myFunction()">
            <h1>Insert Book</h1>
            <div >
                <label for="id">ID Book:</label>
                <input type="text" id="idbook" name="id"/>
                <small></small>
            </div>
            <div >
                <label for="id">Name Book:</label>
                <input type="text" id="namebook" name="nameBook"/>
                <small></small>
            </div>
            <div >
                <label for="id">Price Book:</label>
                <input type="text" id="pricebook" name="priceBook"/>
                <small></small>
            </div>
            <div >
                <button type="submit" >SAVE BOOK</button>
            </div>
        </form>
    </div>

When I enter the values, and click on SAVE I get an empty json, i.e .:

{"id":"","name":"","price":""}

with error:

"One or more parameter values are not valid. The AttributeValue for a key attribute cannot contain an empty string value. Key: id"

CodePudding user response：

I don't know if this is what you mean, but I did let the data save in the console log when you press submit

<div >
    <form method="post" id="save" action="javascript:myFunction()">
        <h1>Insert Book</h1>
        <div >
            <label for="id">ID Book:</label>
            <input type="text" id="idbook" name="id"/>
            <small></small>
        </div>
        <div >
            <label for="id">Name Book:</label>
            <input type="text" id="namebook" name="nameBook"/>
            <small></small>
        </div>
        <div >
            <label for="id">Price Book:</label>
            <input type="text" id="pricebook" name="priceBook"/>
            <small></small>
        </div>
        <div >
            <button type="submit" >SAVE BOOK</button>
        </div>
    </form>
    <script>
        function myFunction(){
        const data = {
          id: document.getElementById('idbook').value,
          name: document.getElementById('namebook').value,
          price: document.getElementById('pricebook').value
          
        };
    console.log(data);
    }
        </script>
</div></body></html>

CodePudding user response：

The problem is that you are getting the values from the input fields as soon as the script runs, so you will get empty strings because the inputs at that point are empty.

To get the input values after the form is submitted, put the data variable inside the myFunction() method, it's important to read the values right before sending the data.

Example

<script>
  function myFunction() {
    const data = {
      id: document.getElementById('idbook').value,
      name: document.getElementById('namebook').value,
      price: document.getElementById('pricebook').value
    };

    const http = new easyHTTP;
    http.put('https://otg0gf6qw5.execute-api.us-east-2.amazonaws.com/books', data, function(err, post) {
      if(err) {
        console.log(err);
      } else {
        console.log(post);
      }
    });
  };
</script>