我正在尝试将数据从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文件。
任何帮助将不胜感激。谢谢!