基本表格 - Javascript代码不起作用

时间:2013-07-08 00:33:58

标签: javascript forms

我无法使用此代码。我正在尝试从放入表单的任何文本创建一个URL。例如,如果您在文本字段中提交“Hello”,则会生成“http://www.Hello.com”。关于为什么这不起作用的任何指标都将不胜感激。

代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head></head>
<body>

<form name="search" action="jsTest.html" onsubmit="return URL()" method="post">
Query: <input type="text" id="query" name="query"/><br>
Submit: <input type="submit" value="Submit"/>
</form>

<script type="text/javascript">
function URL()
{
var x = document.search.query.val();
document.write("http://www.");
document.write(x);
document.write(".com/");
return false;
}
</script>

</body>
</html>

4 个答案:

答案 0 :(得分:1)

您设置了x变量,但引用了未定义的query变量。保持你的名字一致。

答案 1 :(得分:1)

<强>答案:

<form>
Query: <input type="text" id="query" name="query"/><br>
Submit: <input type="submit" value="Submit" onclick="getURL()"/>
</form>

<script type="text/javascript">
   function getURL()
    {
    var x = document.getElementById("query").value;
    alert(x); //Debug statement
    }
</script>

Righteo。不知道这里发生了什么,所以我从头开始重写。这是有效的,我测试了它,至少使用alert框。

可能发生的事情:

我认为javascript函数可能需要以小写字母开头。

来自w3schools:

  

JavaScript区分大小写。必须写入function关键字   小写字母,必须使用相同的函数调用该函数   函数名中使用的大写字母。

我从表单中删除了action,因为它最有可能尝试查找该文件并激活该文件中的javascript代码。我删除了post,因为它搞砸了我的计算机,可能是因为它在离线浏览器模式下运行(即实际上并没有使用像POST这样的HTTP请求)

onclick全部是小写的,而不是camelcase,这可能也会导致一些问题。我总是使用onclick而不是form onsubmit,因为通常您的表单会链接到.PHP文件,而使用按钮的onclick可以提供额外的灵活性。

答案 2 :(得分:0)

您可以修改您的JavaScript。我建议你使用jQuery。

function modify_url(){
        var q = $('input[name="query"]');

        q.val('http://www.' + q.val() + '.com');
        return true;
    }

答案 3 :(得分:0)

使用.value而不是val(),这是jQuery。

请参阅:http://jsfiddle.net/wCS9d/