CODEWITHSUNDEEP
javascripthtml
a_l_e_x
a_l_e_x

Reputation: 400

Can't read the form elements

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"

Upvotes: 2

Views: 653

Answers (2)

Tamas Szoke
Tamas Szoke

Reputation: 5542

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>

Upvotes: 1

zombie223
zombie223

Reputation: 32

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>

Upvotes: 1

Related Questions