button to pass value to javascript

Question

I have a php code with this line:

<input id="sample" name="btnViewTutorial" type="button" />

and when clicked, a javascript would run:

var sampleButton = document.getElementById("sample");
sampleButton.onclick = function(){
    window.open ("/tutorials/sample.php", "mywindow","status=0,toolbar=0,height=480,width=600,directories=0");  
}

What i would like to do is, when the button is clicked, /tutorials/sample.php should have the value passed by the button, like tutorials/sample.php?video=1 or tutorials/sample.php?video=ff56gskkd2.

How would I have the button passed in a value? and How would java script receive the value?

how about using a form instead?

Drixson Oseña
– Drixson Oseña

2013-11-13 00:32:46 +00:00
Commented Nov 13, 2013 at 0:32 — Drixson Oseña
– Drixson Oseña, Commented Nov 13, 2013 at 0:32
What you can do, is just append the value to the URL.

Kao
– Kao

2013-11-13 00:33:56 +00:00
Commented Nov 13, 2013 at 0:33 — Kao
– Kao, Commented Nov 13, 2013 at 0:33
@DrixsonOseña i want the page to be like a pop up.

PaulPolon
– PaulPolon

2013-11-13 00:44:04 +00:00
Commented Nov 13, 2013 at 0:44 — PaulPolon
– PaulPolon, Commented Nov 13, 2013 at 0:44
@Kao i wanted it to be dynamically possible.

PaulPolon
– PaulPolon

2013-11-13 00:44:25 +00:00
Commented Nov 13, 2013 at 0:44 — PaulPolon
– PaulPolon, Commented Nov 13, 2013 at 0:44

Carlangueitor · Accepted Answer · 2013-11-15 04:25:18Z

1

You need to append the querystring to the url. For example, if value of a video is a data attribute you can do something like this:

<input id="sample" name="btnViewTutorial" type="button" value="View Tutorial" data-video="1"/>

And in Javascript:

var sampleButton = document.getElementById("sample");

sampleButton.onclick = function(){
    console.log(this.dataset.video);
    window.open ("/tutorials/sample.php?video="+ this.dataset.video,
                 "mywindow","status=0,toolbar=0,height=480,width=600,directories=0");  
}

Demo: http://jsfiddle.net/A65xg/

edited Nov 15, 2013 at 4:25

answered Nov 13, 2013 at 0:42

Carlangueitor

4252 silver badges15 bronze badges

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

2 Comments

PaulPolon Over a year ago

Where did the dataset.video in the Javascript came from?

Carlangueitor Over a year ago

From data-video="1" attribute, you can read about custom data attributes here: whatwg.org/specs/web-apps/current-work/multipage/…*-attributes

Collectives™ on Stack Overflow

button to pass value to javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related