Question

我正在努力使我的网站在表单上有一个文本框和一个提交按钮。当用户在文本框中输入视频的URL并单击“提交”时，JavaScript应该用该URL替换某个文本块。

这是我的代码。我是JavaScript的新手，感谢您的帮助！：

<!doctype html>
<html>
<head>
<meta type="utf-8">
<title> Vid_hack </title>
</head>
<style type="text/css">
a:link { color: #CC0000 ; text-decoration: bold}
a:active { color: #CC0000 ; text-decoration: none}
a:visited { color: #CC0000; text-decoration: none}
a:hover { color: #FFFFFF; text-decoration: bold; background: #336699}

body {

background-color: #222222;

}
</style>
<body>
<div align="center">
<p center="" style="background: #444444; border-radius: 15px; border: solid 3.0pt white; padding: 10px">


<object><param name="allowfullscreen" value="true"></param><p id="url"><embed src="INSERT-VIDEO-URL-HERE" type="application/x-shockwave-flash" allowfullscreen="1" width="800" height="600"></embed></p></object>

<BR>
<BR>
<form method="post">
<input type="text" name="vid" value="Insert URL here" maxlength="200" />
<br>
<button onclick="return vid()">Play</button>
</form>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.js"></script>
<script>
function vid()
{
var txt = $("#vid").attr("value");
$("#url embed").attr("src",txt);
return false;
}
</script>
<BR>
<BR>
<BR>
<span style="color: #FFF" align="center">
<BR>
<BR>
Please view the included README file for more information.
</span>
</p>
</div>
<BR>
<BR>
<BR>
</body>
</html>

Answer 1

我想你想这样做：

<script>
var flash_wrapper = 
'<object><param name="allowfullscreen" value="true"></param><p id="url"><embed src="INSERT-VIDEO-URL-HERE" type="application/x-shockwave-flash" allowfullscreen="1" width="800" height="600"></embed></p></object>'

document.write(flash_wrapper)
</script>

</script>
<BR>
<BR>
<form method="post" name="myForm" onsubmit="return valid()">
<input type="text" name="first_name" value="Insert URL here" maxlength="100" />
<br>
<button>Play</button>
</form>

<script>
function valid(){
    var url = document.myForm.first_name.value;
    var str = document.getElementById("url").innerHTML; 
    var n = str.replace("INSERT-VIDEO-URL-HERE", url);
    document.getElementById("url").innerHTML = n;
    return false;
}
</script>

首选提交表单上的提交，因为如果用户按Enter键，因此不要单击该按钮，他会绕过验证。我在html中完成替换url的代码，并在函数末尾添加return false以防止提交表单，否则重新加载页面。

Answer 2

请注意，在当前表单中，您只能更改视频网址，因为在第二个按钮上单击innerHTML将不再包含INSERT-VIDEO-URL-HERE，而是包含第一个按钮点击的URL。这可能是也可能不是。

假设这不是一个意想不到的行为，那么在用表单字段中的url替换innerHTML之后，只需要用n更改innerHTML。见下文

function vid()
{
    var str=document.getElementById("url").innerHTML; 
    var n=str.replace("INSERT-VIDEO-URL-HERE", document.forms[0].elements[0].value);
    document.getElementById("url").innerHTML = n;
}

请注意，这只是一个快速解决方案，可以在不知道周围的HTML的情况下进行一些假设。有一些东西可以改善整体代码：

避免使用document.write。至少，将闪存添加到包装器并执行document.getElementsById('#flash_wrapper').innerHTML = flash_wrapper;
避免使用内联javascript事件（例如使用onclick属性）。 http://www.quirksmode.org/js/events_advanced.html

如果您计划在未来编写更多与页面内容交互的javascript，我建议在http://jquery.com学习jQuery，因为它会让图片中出现很多麻烦并且非常简单易学。

Answer 3

这依赖于jquery

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.js"></script>
<script>
var flash_wrapper = 
'<object><param name="allowfullscreen" value="true"></param><p id="url"><embed  src="INSERT-VIDEO-URL-HERE" type="application/x-shockwave-flash" allowfullscreen="1" width="800" height="600"></embed></p></object>'

document.write(flash_wrapper)
</script>
<BR>
<BR>
<form method="post">
<input type="text" id="first_name" value="Insert URL here" maxlength="100" />
<br>
<button onclick="return vid()">Play</button>
</form>

<script>
function vid()
{ 
    var txt = $("#first_name").attr("value");
    $("#url embed").attr("src",txt);
    return false; 
}
</script>

尝试一下 http://jsfiddle.net/axrwkr/jDhNc/

如何更改带有文本表单的视频网址并提交按钮？

3 个答案: