将输入数据传递到JS文件

时间:2019-04-10 05:40:36

标签: javascript php html input

我正在尝试将数据从html输入传递到js文件。具体来说,我正在尝试将网址发送到要使用的js文件。

我曾尝试使用链接到输入的document.getElementById命令来这样做,但是我没有看到成功。下面是我的代码。任何帮助将不胜感激!

我的HTML(带有输入和按钮的表单)

<html>

 <head>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">    </script>

 <script type="text/javascript" src="./bin/pageCapture.js"></script>

</head>

<body>


  <form id="form" method="post" action="screenshot.php">

    <input type="text" name="sitelink" id="sitelink" placeholder="Enter Link">
    <br>

   <div class="display1">
     <button class="button1" id="button" onmouseover="changeColor()" onmouseout="colorBack()">Submit</button>
  </div>
 </form>

</body>



</html>

JS文件( var url 是我当前尝试传递数据的方式)

 var url = document.getElementById('sitelink').value;

 var webpage = require('webpage');

 var page = webpage.create();



 page.open(url, function(status) {
  console.log(page['objectName']);
  console.log(page['title']);
  console.log(page['url']);


 console.log("Status: " + status);
   if(status === "success") {
 page.render('screenCapture1.jpeg', {format: 'jpeg', quality: '100'});
  }

 phantom.exit();
 });

PHP(表单输出)

<html>

 <?php

  $sitelink = $_POST['sitelink'];

  $cmd = ' ./bin/phantomjs';
  $cmd.= ' ./bin/pageCapture.js';

  putenv('PATH=./bin/');

  exec($cmd.' 2>&1', $output);

  $imagelink = 'screenCapture1.jpeg';

  ?>

  <h2 style="text-align: center;">Your screenshot:</h2>
  <img class="screenshot" src=<?php echo $imagelink ?>>

 </html>

如您所见,功能非常简单。输入一个URL,单击提交,该表单应返回屏幕截图。但是,来自输入的url不会传递到js文件。

任何帮助将不胜感激。谢谢!

0 个答案:

没有答案