CODEWITHSUNDEEP
javascripthtml
yestefF1
yestefF1

Reputation: 13

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

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?

Upvotes: 1

Views: 873

Answers (3)

BadPiggie
BadPiggie

Reputation: 6359

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

Upvotes: 0

mplungjan
mplungjan

Reputation: 177940

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");

Upvotes: 1

Bj&#246;rn Hei&#223;
Bj&#246;rn Hei&#223;

Reputation: 1728

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

Upvotes: 0

Related Questions