Can't read the form elements

user_15051230 0
Viewed 90

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 class="container">
        <form method="post" id="save" action="javascript:myFunction()">
            <h1>Insert Book</h1>
            <div class="field">
                <label for="id">ID Book:</label>
                <input type="text" id="idbook" name="id"/>
                <small></small>
            </div>
            <div class="field">
                <label for="id">Name Book:</label>
                <input type="text" id="namebook" name="nameBook"/>
                <small></small>
            </div>
            <div class="field">
                <label for="id">Price Book:</label>
                <input type="text" id="pricebook" name="priceBook"/>
                <small></small>
            </div>
            <div class="field">
                <button type="submit" class="full">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"

html javascript
2 Answers

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>
user_13719950

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 class="container">
    <form method="post" id="save" action="javascript:myFunction()">
        <h1>Insert Book</h1>
        <div class="field">
            <label for="id">ID Book:</label>
            <input type="text" id="idbook" name="id"/>
            <small></small>
        </div>
        <div class="field">
            <label for="id">Name Book:</label>
            <input type="text" id="namebook" name="nameBook"/>
            <small></small>
        </div>
        <div class="field">
            <label for="id">Price Book:</label>
            <input type="text" id="pricebook" name="priceBook"/>
            <small></small>
        </div>
        <div class="field">
            <button type="submit" class="full">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>
user_179650020
Related