How to access an URL from a function in HTML/Javascript?

Question

So I started to learn HTML and JavaScript not long ago and I wonder how I could access an URL/download a file from a function I made with JavaScript in another file and imported it with

<script src="jscriptSheet.js"></script>

Maybe I am wording the search badly but I didn't found anything that helps me. The only thing I saw, was doing a form and sending it to a server, but that's not what I need (I think).

What I'm doing is creating 2 dates that need to be passed to the URL so it can access the file and download it:

<div class="dateWrapper">
    <p id="date1">Date1:</p>
    <input id="date1INPUT" type="date">
    <p id="date2">Date2:</p>
    <input id="date2INPUT" type="date">
    <br><br>
    <button id="datesubmit" type="submit" onclick="downloadF()">Download file.</button>
</div>

And the function made with JavaScript:

function downloadF{
    href="100.100.100.100/something/something.php?date1="+ date1 from the input above +"&date2="+ date2 from the input above +"&something=10.php"
}

When I execute this, it downloads nothing, it's just a normal button with no action.

How can I do it?

First thing need to learn is how to check for javascript errors in browser dev tools console (F12). Function shown is not syntactically correct and console would tell you that and point you to the location of that error — charlietfl, Nov 28 '18 at 17:54
Possible duplicate of [How to trigger a file download when clicking an HTML button or JavaScript](https://stackoverflow.com/questions/11620698/how-to-trigger-a-file-download-when-clicking-an-html-button-or-javascript) — Heretic Monkey, Nov 28 '18 at 18:04

mplungjan · Accepted Answer · 2018-11-28T18:29:14.733

You do not want type=submit if you want to do something else than submitting. INSTEAD use a button as below or attach to the submit handler of the form and use preventDefault if you do not want to submit

I use location= you can use window.open(url) too but that may be blocked

Also your function should be

function functionname() { ... }

Anyway here is an example

document.getElementById("datesubmit").addEventListener("click",function {
    location="100.100.100.100/something/something.php"+
    "?date1="+document.getElementById("date1INPUT").value+
    "&date2="+document.getElementById("date2INPUT").value
})

<div class="dateWrapper">
    <p id="date1">Date1:</p>
    <input id="date1INPUT" type="date">
    <p id="date2">Date2:</p>
    <input id="date2INPUT" type="date">
    <br><br>
    <button id="datesubmit" type="button">Download file.</button>
</div>

If you set the header in the PHP you will see a download dialog

header("Content-type: application/octet-stream");

BadPiggie · Answer 2 · 2018-11-28T18:32:07.190

function downloadF{
    href="100.100.100.100/something/something.php?date1="+ date1 from the input above +"&date2="+ date2 from the input above +"&something=10.php"
}

this is having invalid syntax. The JavaScript function should be defined like ( Very basically),

var f1 = function(){

}

function f2(){


}

And,

href="100.100.100.100/something/something.php?date1="+ date1 from the input above +"&date2="+ date2 from the input above +"&something=10.php"

Here you are inserting something like date1 & data2 But it's not exist in your function. You can't use undefined variables.

And if you skip all syntax errors and look at the command

href="100.100.100.100/something/something.php?date1="+ date1 from the input above +"&date2="+ date2 from the input above +"&something=10.php"

you are just setting a variable href and you didn't do any actions.

First learn basic javascript https://developer.mozilla.org/en-US/docs/Web/JavaScript

And the answer of your question is, If the target file is directly downloadable, you can use window.open('the_target_url') inside function.

If not,

You should do something in PHP. Please refer this link Download file from PHP

Please do not suggest the questionable w3schools. Instead use [MDN](https://developer.mozilla.org/en-US/) — mplungjan, Nov 28 '18 at 18:27

score 0 · Answer 3 · answered Nov 28 '18 at 18:04

Welcome to stackoverflow!

As already mentioned in a comment, you don't want to have the type set to "submit" when the button should not really submit the inputs but call a custom javascript function. Instead you just want to have the type set to "button".

Moreover you should define your javascript function like this (watch out for the parentheses):

function downloadF(){
  // Access your input fields here
}

For accessing DOM elements you might want to have a look here at w3schools

Yes, your answer is far better, but we posted nearly at the same moment and I didn't check for new answer up front. — Björn Böing, Nov 29 '18 at 08:40

How to access an URL from a function in HTML/Javascript?

3 Answers3