jQuery/Javascript - Get value of text input field, and display in div

Question

I am testing getting a text input, and printing the result in a div below. However, I can't see to get it to work.

If the "placeholder" of the input field to a "value", it inexplicably works. I may just be tired, and missing something obvious, but I can't for the life of me work out what's wrong.

//Tested and didn't work
//var URL = document.getElementById("download")[0].value;
//var URL = document.getElementsByName("download")[0].value;

var URL = $('#download').val();

function downloadURL() {
    //Print to div
    document.getElementById("output").innerHTML = URL;
    //Test, just in case innerHTML wasn't working
    alert(URL);
}

<p><input type="text" name="download" id="download" placeholder="Download URL"></p>
<button onclick="downloadURL()">Test</button>
<div id="output"></div>

You have to get the changed value inside the function, right now you're getting the value once, before the function runs, and store it in a variable, then you use that same value over and over again, as the variable doesn't update when it's outside the function. — adeneo
– adeneo, Commented Dec 2, 2015 at 21:08

Zohaib Ijaz · Accepted Answer · 2015-12-03 07:00:26Z

3

Just a small change, you have to get value when you click on button, so first save a reference to that field and then get value when required

var URL = $('#download');

function downloadURL(){
   //Print to div
   document.getElementById("output").innerHTML = URL.val();
   // alert(URL.val());
}

edited Dec 3, 2015 at 7:00

answered Dec 2, 2015 at 21:07

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

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

2 Comments

Jordan Over a year ago

This works for the div, though the alert says [object Object]... though I guess that doesn't matter too much

Zohaib Ijaz Over a year ago

change alert(URL) to alert(URL.val()).. I forgot to change that

Jakub Barczyk · Accepted Answer · 2015-12-06 13:53:36Z

2

If you want to go jQuery...

var URL = $('#download');

function downloadURL() {
    $("#output").html(URL.val());
}

... or plain JavaScript

var URL = document.getElementById("download") ;

function downloadURL() {
    document.getElementById("output").innerHTML = URL.value;
}

edited Dec 6, 2015 at 13:53

answered Dec 2, 2015 at 21:29

Jakub Barczyk

6051 gold badge5 silver badges11 bronze badges

Comments

roland · Accepted Answer · 2015-12-02 21:18:31Z

0

I'd recommend you to stick with jQuery. Let jQuery behave in an unobtrusive way instead of relying on an inline event handler attached to the button.

<p> <input type="text" name="download" id="download" placeholder="Download URL"></p>
<button>Test</button> //remove the inline click handler                      
<div id="output"></div>

$('button').on('click', function() {
  var url = $('#download').val();
  $('#output').text(url); //or append(), or html(). See the documentation for further information 
});

answered Dec 2, 2015 at 21:18

roland

7,7956 gold badges48 silver badges62 bronze badges

Comments

rahul · Accepted Answer · 2015-12-02 21:21:05Z

0

Minor modifications on your code so that it can be aligned to "Unobtrusive Javascript".

HTML

<p> 
    <input type="text" name="download" id="download" placeholder="Download URL">
</p>
<button id="btnDownloadUrl">Test</button>                          
<div id="output"></div>

jQuery

$(function(){
    $("#btnDownloadUrl").bind("click", function(){
        var downloadUrl = $("#download").val();
        $("#output").html(downloadUrl);
    });
});

answered Dec 2, 2015 at 21:21

rahul

188k50 gold badges239 silver badges266 bronze badges

1 Comment

Jakub Barczyk Over a year ago

Be sure to name that callback function or, preferably, define it outside and pass its name as a callback argument.

Collectives™ on Stack Overflow

jQuery/Javascript - Get value of text input field, and display in div

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related