Set Input Value with Javascript - Wont POST on Submit

Question

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?

Please, post something that we can work with. It is impossible in the current state. — Matus Dubrava
– Matus Dubrava, Commented Apr 17, 2018 at 16:02
How do you submit the "form"? What do you do before submitting? Any event listeners? — An0num0us
– An0num0us, Commented Apr 17, 2018 at 16:09

scunliffe · Accepted Answer · 2018-04-17 16:11:06Z

1

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

answered Apr 17, 2018 at 16:11

scunliffe

63.8k26 gold badges133 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CarlM Over a year ago

Really not sure what you mean, sorry! can you explain it differently?

scunliffe Over a year ago

If you are trying to submit your form via HTTP or serializing the content you will need a name attribute as that is what the browser uses for each key/value pair. The browser does NOT use the id attribute.

CarlM Over a year ago

Ahh I see! Although the form does post to the database If i manually type in the data (Its angular to pass data from the database) not sure how you would use the name attribute.

Elharony · Accepted Answer · 2018-04-17 16:21:21Z

0

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.

answered Apr 17, 2018 at 16:21

Elharony

1,0111 gold badge10 silver badges18 bronze badges

3 Comments

CarlM Over a year ago

I think I may have phrased the question badly, I enter a book name in a search button, it uses the google books api to populate the form with the js value function. so the data is there in the page, but when I submit it, its blank. Although if I manually type into the form, it posts fine.

Elharony Over a year ago

Good. Are you using an Event Listener when you are passing the data? For example; I used onsubmit event to pass the titleInput value to the result heading.

CarlM Over a year ago

I have "ng-click="New_Book(book)" on my form that posts it into Angular, if thats what you mean?

Collectives™ on Stack Overflow

Set Input Value with Javascript - Wont POST on Submit

2 Answers 2

3 Comments

HTML

JavaScript

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

HTML

JavaScript

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related