How to display an input from a HTML textbox using javascript

Question

I want to receive an integer from my html input field, then run a javascript file that displays what I've just submitted.

What am I missing?

HTML:

 <body>
        <![endif]-->
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
        <script src="js/server_browse.js"></script>
        <p>Search the Database</p>
        <p>Enter the PO number:</p>

        <form id="PO" action="js/server_browse.js">
            PO:
            <input name="entry" type="number">
            <input type="submit">
        </form>

Separate javascript file:

function output() {
    var x = document.getElementsByTagName("PO");
    var y = Number(x.elements["entry"]);
    var g = y.toString();
    document.write(g);
}

I'm well aware of how clunky that javascript is I just wanted to make sure everything was being done properly.

Where are you attaching the output() function to an event listener? — Jhecht
– Jhecht, Commented Dec 22, 2016 at 21:04
Side note, one letter variable names are great for reducing bandwidth, but TERRIBLE for readability and maintenance. — Jon P
– Jon P, Commented Dec 22, 2016 at 22:47

Quentin · Accepted Answer · 2016-12-22 21:04:36Z

2

Accessing the element

getElementsByTagName returns an array-like list of elements, not a single element
PO is not a tag name, the tag name is form
PO is the id, use getElementById

Getting the value

An HTML element object is not the value of that object. You need to access the .value property

answered Dec 22, 2016 at 21:04

community wiki

Quentin

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

2 Comments

user36606 Over a year ago

var x = document.getElementById("PO");     var y = x.elements["entry"].value;     var g = y.toString();     document.write(g);

so am I supposed to get that element and turn it into a value like I've done there?

Jhecht Over a year ago

<code> doesn't work in comments. Surround them with `

Community · Accepted Answer · 2020-06-20 09:12:55Z

Really quickly, I feel like we should talk about the top half of your code. Realistically you only use the CDN's when you are trying to quickly add something for testing. Even jQuery will tell you not to link to their files in a production environment because you never know when their server will go down or be flooded with requests. Include your own copy of jQuery -- it's sort of why you downloaded it in the first place. Also, avoid document.write(), you'll like yourself a lot more for it. If you need to check the value of something but don't want to add it to the document, use console.log and check your browser's developer's console.

<!--<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 In production, it is NOT recommended to use this. 
<script>
  window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')
</script>
   just include the local version of jQuery automatically. -->
<script src="js/vendor/jquery-1.12.0.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/server_browse.js"></script>

Next thing is the fact that you include jQuery, but then never use it. jQuery, while being a fairly compact library, is still extra script the browser must load in order to go forward. If you aren't going to use it, then get rid of it. If you are going to use it, then let's make sure we are using it correctly.

Lastly, you have this output function, which isn't attached to anything as far as I can tell. I don't see a single location where you have instructed the browser to run the function whenever.

Here is what I would do for this snippet we've been given.

$(function() {
  $('#PO :submit').on('click', function(e) {
    //Normally I would use $('#PO').on('submit'...
    //But the sandbox model doesn't allow for that to work correctly. So, we are using this.
    e.preventDefault();
    var $this = $(this);
    //Notation I use to have the jQuery object and regular object of this event;
    var value = $this.siblings('[name="entry"]');
    //If using this function from the form, this line would change to 
    //var value = $this.find('[name="entry"]');
    $('#results').html("Input value: " + value.val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="PO" action="js/server_browse.js">
  PO:
  <input name="entry" type="number">
  <input type="submit">
</form>
<div id="results"></div>

Without jQuery

If you wanted to get the same results but without using jQuery (even though you include it):

window.addEventListener('load', function() {

  var element = document.getElementById('PO-submit');
  //When not using a snippet, change to document.getElementById('PO');

  element.addEventListener('click', function(e) {
    //change to element.addEventListener('submit',... 
    e.preventDefault();
    e.cancelBubble = true;

    var result_div = document.getElementById('results');
    //Get the HTMLElement for the results ID element.

    var form_input = this.form.elements['entry'];
    //Change to this.elements['entry'];

    result_div.innerHTML = 'Results :' + form_input.value;

  });



});

<form id="PO">
  PO:
  <input name="entry" type="number">
  <input id="PO-submit" type="submit">
</form>
<div id="results"></div>

Collectives™ on Stack Overflow

How to display an input from a HTML textbox using javascript

2 Answers 2

Accessing the element

Getting the value

2 Comments

Without jQuery

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Accessing the element

Getting the value

2 Comments

Without jQuery

Comments

Your Answer

Sign up or log in

Post as a guest

Related