How to post an input filed value as a value for variable in javascript

Question

I am making a movie streaming platform, with the use of WebTorrent plugin, which will stream the whole movie without downloading it, user just needs to paste the torrent link or the same. So, I want to post the value of input field as the value for the variable. The value for the input field will be a link to the torrent file, for eg. "https://webtorrent.io/torrents/sintel.torrent". So what ever link has been posted in the input box, it should be posted as a value for the variable i.e. torrentId.

Example: var torrentId = 'https://webtorrent.io/torrents/sintel.torrent'

In the case for the above torrent file, the piece of code should look like the example mentioned above, so what I am trying to do here is, as soon as the user pastes a link to the torrent file, the value for the variable torrentId should be defined in the format as the example mentioned above, and the desired movie will be loaded, to be streamed on the go.

Here is the snippet, without custom link functionality.

var vid_type = document.getElementById('type').value;

if (vid_type === 'embed_tr') {
  var client = new WebTorrent()
  var torrentId = 'https://webtorrent.io/torrents/sintel.torrent'

  client.add(torrentId, function(torrent) {
    var file = torrent.files.find(function(file) {
      return file.name.endsWith('.mp4')
    })
    file.appendTo('body')
  })
}

<script src="https://cdn.jsdelivr.net/npm/webtorrent@latest/webtorrent.min.js"></script>
<select _ngcontent-fte-c234="" required="" id="type" formcontrolname="type" class="ng-valid ng-touched ng-dirty">
  <option _ngcontent-fte-c234="" value="embed_tr" trans="">Embed Torrent</option>
  <option _ngcontent-fte-c234="" value="video" trans="">Direct Video (.mp4, .webm, .avi, .mov etc.)</option>
  <option _ngcontent-fte-c234="" value="stream" trans="">Adaptive Stream (hls, dash)</option>
  <option _ngcontent-fte-c234="" value="external" trans="">Basic Url</option>
</select>

Here is the snippet, with custom link functionality, this is what I am trying to do.

var vid_type = document.getElementById('type').value;

if (vid_type === 'embed_tr') {
  var client = new WebTorrent()

  function myFunction() {
    var torrentId = document.getElementById('url').value;
    console.log(torrentId)
  }

  client.add(torrentId, function(torrent) {
    var file = torrent.files.find(function(file) {
      return file.name.endsWith('.mp4')
    })
    file.appendTo('body')
  })
}

#url {
  width: 275px;
}

<script src="https://cdn.jsdelivr.net/npm/webtorrent@latest/webtorrent.min.js"></script>
<select _ngcontent-fte-c234="" required="" id="type" formcontrolname="type" class="ng-valid ng-touched ng-dirty">
  <option _ngcontent-fte-c234="" value="embed_tr" trans="">Embed Torrent</option>
  <option _ngcontent-fte-c234="" value="video" trans="">Direct Video (.mp4, .webm, .avi, .mov etc.)</option>
  <option _ngcontent-fte-c234="" value="stream" trans="">Adaptive Stream (hls, dash)</option>
  <option _ngcontent-fte-c234="" value="external" trans="">Basic Url</option>
</select>
<input _ngcontent-fte-c234="" name="torrentId" type="text" required="" maxlength="250" id="url" formcontrolname="url" class="ng-untouched ng-pristine ng-invalid" placeholder="Paste the link to the torrent file">

You will need to add an event listener to your inputs, so that you can fetch the updated value once the user has finished inputting. For example, you can listen to the blur event on those inputs. — Terry
– Terry, Commented Jun 25, 2020 at 13:27
I also had the same idea , but I am unable to achieve it, please, If you can help me with the code. — ToxifiedHashkey
– ToxifiedHashkey, Commented Jun 25, 2020 at 13:28
why are using torrentid value outside function you cant use it because it is local variable — Nurbek Boymurodov
– Nurbek Boymurodov, Commented Jun 25, 2020 at 14:04
is it working your first code without custom link if yes just write this var torrentId = document.getElementById('url').value; outside function — Nurbek Boymurodov
– Nurbek Boymurodov, Commented Jun 25, 2020 at 14:08
@NurbekBoymurodov, Please check the CodePen, here is the link for W/O custom link, codepen.io/ToxifiedM/pen/JjGJZVY and with custom link, codepen.io/ToxifiedM/pen/xxZrYNG, I tried as per your suggestion, buts its not working, whereas W/O custom link works flawless, but for with custom link, it doesn't. — ToxifiedHashkey
– ToxifiedHashkey, Commented Jun 25, 2020 at 14:22

Nurbek Boymurodov · Accepted Answer · 2020-06-25 14:48:41Z

2

use this function

var torrentId = document.getElementById('url');
torrentId.onchange = function(){
  var vid_type = document.getElementById('type').value;
  var tid = document.getElementById('url').value;
  if (vid_type === 'embed_tr') {
    var client = new WebTorrent()
    client.add(tid, function (torrent) {
      var file = torrent.files.find(function (file) {
        return file.name.endsWith('.mp4')
      })
      file.appendTo('body')
    })
  }
};

answered Jun 25, 2020 at 14:48

Nurbek Boymurodov

5423 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

How to post an input filed value as a value for variable in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related