Using JavaScript with form data

Question

I am attempting to simply pull an input from an html form and manipulate it with JavaScript. When I console.log the variable I created in JavaScript I am just getting my html element back. If I attempt to add [0] or .value, I get undefined and a JQuery error, respectively. I am at a loss as to the reason this isn't working. If it matters I am doing all this in CodePen.

HTML:

<div>
  <form id="myForm">
  Construction Year: <br>
  <input type="text" id="construction_field" name="construction_field" value=""><br>
  </form>
  <button onclick="myFunction">Find P</button>
  <p id="demo"></p>
</div>

JavaScript:

$(document).ready(function(){ 
  function myFunction () {
  var constructionYear = document.getElementById("construction_field");
  console.log(constructionYear);
  }
});

I apologize for such a simple question, but I can't find an answer that works to save my life. If it isn't obvious I am very new and struggling, any examples would be amazing.

Works just fine with .value codepen.io/pjabbott/pen/zZJLLr?editors=1111 — Paul Abbott
– Paul Abbott, Commented Mar 27, 2017 at 23:23
[0] would fail because getElementById doesn't return an array. — Drew Kennedy
– Drew Kennedy, Commented Mar 27, 2017 at 23:25

Drewby · Accepted Answer · 2017-03-27 23:25:24Z

1

If you wish to use jQuery:

var constructionYear = jQuery('#construction_field').val();

If you wish to use vanilla JavaScript:

var constructionYear = document.getElementById('construction_field').value;

answered Mar 27, 2017 at 23:25

Drewby

3831 silver badge8 bronze badges

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

1 Comment

Adam Wheat Over a year ago

I think you were right about value. After reworking the code you answer worked. Thanks for the help!

Nelson Teixeira · Accepted Answer · 2017-03-27 23:24:28Z

0

Just use console.log(constructionYear.value);

answered Mar 27, 2017 at 23:24

Nelson Teixeira

6,6366 gold badges46 silver badges90 bronze badges

2 Comments

Adam Wheat Over a year ago

Thanks so much! I'm pretty sure the value was the issue. I accidentally deleted some code and when I rewrote it with value it worked!

Nelson Teixeira Over a year ago

If the answer was useful to you, please upvote/accept. Thanks.

Collectives™ on Stack Overflow

Using JavaScript with form data

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related