CODEWITHSUNDEEP
javascripthtmlformspost
CarlM
CarlM

Reputation: 33

Set Input Value with Javascript - Wont POST on Submit

I'm trying to get data from an API and post it to a database, the form I have worked when you manually input data. but when you set the data from the API request - it updates on the page. Although shows blank when it posts.

I'm using 

document.getElementById('Title').value = item.volumeInfo.title;

to get the "Value" in an Input.

and 

    <div class="form-group">
            <label for="name">Authors</label>
            <input class="form-control" type="text" value="" id="Author" ng-model="book.Author" required="required"/>
        </div>

to attach to form.

<button class="btn btn-primary" ng-disabled="AddNewForm.$invalid ||
isUnchanged(book)" id="add-new-btn"
ng-click="New_Book(book)">Add</button>

Why is it submitting as blank?

Upvotes: 0

Views: 1753

Answers (2)

Elharony
Elharony

Reputation: 981

Your question isn't clear enough for me. But I've tried to make a quick example and make it as general as possible to let you work with your form inputs!

Here is a Live Preview

HTML

<form action="post" id="myForm">
   <input type="text" id="title">
   <input type="submit" value="Click To Update">
</form>

<h2 id="result"></h2>

JavaScript

// Select our main elements (form, text input, result heading)
const form = document.getElementById("myForm");
const titleInput = document.getElementById("title");
const result = document.getElementById("result");

form.onsubmit = function(e) {

  // Don't refresh the page
  e.preventDefault();

  // Set the input value into the result heading
  result.innerHTML = titleInput.value;
}

This solution allows you to write anything in your input, and after submitting your form. You can use that data elsewhere.

Upvotes: 0

scunliffe
scunliffe

Reputation: 63580

Your form elements submit their value via their “name” attribute... does you input element generate a name attribute? If not, this is why it won’t work.

Eg

<input name=“foo” value=“bar”/>

Submits as:

?foo=bar

Upvotes: 1

Related Questions