javascript - 如何填写使用Javascript？

Question

我想填写并提交如下表格：

<form action="http://www.test.com/school" method="post">
<select name="days">
   <option value="2">Monday</option>
   <option value="1">Tuesday</option>
   <option value="3">Wednesday</option>
   <option value="4">Thursday</option>
   <option value="5">Friday</option>
   <option value="6">Saturday</option>
   <option value="7">Sunday</option>
</select>
<input type="submit" value="submit" id="submitday">

我不想从选项中选择，所以我必须创建另一个表单。

<form action="http://www.test.com/school" method="post">
  <input type="text" name="days">
  <input type="submit" value="submit" id="submitday">

当我想选择星期三时，我需要在文本框中输入值 3，然后单击提交。有用。

但我想知道是否有任何方法可以让我只在文本框中输入周三而不是值并毫无问题地发布它？

score 1 · Accepted Answer

你的问题定义不够明确，有一个明确的目标总是有帮助的。

1.) 即使我们几乎完全超出了使用具有相同值的 id="same_as" name="same_as" 很重要的点，但我仍然强烈推荐这种做法（旧的 Internet Explorer 错误）。您需要充分利用标签元素（clicky clicky），因为它为用户提供了更多的点击区域来获得焦点（元素、复选框、文本等）。

2.) 您需要使用in 运算符来发现可用的工具...

XHTML

<textarea id="dom_methods"></textarea>

JavaScript

for (i in document.getElementById('select_element_id')
{
 document.getElementById('methods').value = document.getElementById('methods').value+'\n'+i;
}

这将让您发现与例如 select 元素相关联的不同方法/函数/对象/等。请记住，每个对象都可能有自己的孩子。你可以做...

for (i in window) {}
for (i in window.document) {}
for (i in document.getElementById('select_element_id')) {}

包括 Mozilla 开发者网络在内的良好资源在这里...

https://developer.mozilla.org/en/

我绝对最大的一条建议是不要使用框架，因为你会很快偏离学习实际语言并立即继承一些你不会意识到的高级问题。在 JavaScript 帖子中张贴美元符号 ($) 的人通常是很好的赠品，除非您明确要求提供与框架相关的答案，否则他们没有回答您的问题。

如果您修改您的问题并回复我的答案，我很乐意将我的答案附加到您想要完成的工作中。

第二部分

如果你想创建一个元素，你应该使用 createElement 方法......

创建元素并给它你想要的值......

var d = document.getElementById('days');
var input_day = document.createElement('input');
input_day.setAttribute('id','days');
input_day.setAttribute('name','days');
input_day.setAttribute('type','text');
input_day.setAttribute('value',d.options[d.selectedIndex].text);

重要的！JavaScript 有 QUIET 错误，你会在发布它们之前与它们斗争几天，然后有人随便指出它们。所以要格外小心使用变量的短名称（例如，不要使用 var in = ''; 因为“in”是一个运算符，会导致无提示的错误），因为您的代码根本不会执行或做奇怪的事情。

现在你有一些有效的选择来把这个新元素放到页面中......

1.) 使用appendChild会将元素放在父容器的末尾...

document.getElementById('form_id').appendChild(d);

您应该使用字段集（通常一个很好）作为表单元素的直接子元素......

<form action="" method="post">
<fieldset>
<!--everything form related goes here -->
</fieldset>
</form>

...在这种情况下，您可以执行以下操作（以帮助您熟悉示例并看到它们在您之前实际工作）...

document.getElementById('form_id').getElementsByTagName('fieldset')[0].appendChild(d);

注意 [0]，它指的是第一个字段集元素，如果有两个，并且您想将新元素附加到第二个元素中，您将使用 [1]（第三个是 [2]，依此类推）。此外，如果页面只包含一个表单和一个字段集，您可以删除第一部分（这样您就可以看到事物是如何构造的）......

document.getElementsByTagName('fieldset')[0].appendChild(d);

2.) 你通常会想使用insertBefore...

var f = document.getElementById('form_id');
var element_parent = f.getElementsByTagName('fieldset')[0];
var element_before = f.getElementsByTagName('select')[0];
parent_element.insertBefore(d,element_before);

更多信息在这里...... https://developer.mozilla.org/en/insertBefore

永远不要出于任何原因使用 INNERHTML ！！！懒惰的程序员一直在使用它，却没有意识到它没有正确注册 DOM，因此当您尝试使用它们时，不会看到与该专有 Microsoft JScript 方法相关联的元素。仅出于这个原因，您应该避免使用诸如 jQuery 之类的框架，因为它们会跳到使用最简单的东西。Easy 无法完成工作，easy 使工作看起来完成了足够长的时间来支付单次薪水，然后如果你不有一天最终重写该给定区域中的所有代码（在你记得使用它很久之后以及你想要做什么）你会处于一个受伤的世界。

第三部分

JavaScript 是一种事件驱动的语言，事件是基于 DOM 的。DOM 和 JavaScript 是紧密联系在一起的不同事物。

您可以在此处阅读有关 DOM 事件的更多信息...

https://developer.mozilla.org/en/DOM/event

...这里有一个很好的 DOM 事件列表...

http://en.wikipedia.org/wiki/DOM_events#HTML_events

为了利用代码，您需要确定最符合您目标的事件。您是否在提交表单时尝试这样做？那将是提交。您是否在页面加载时尝试这样做？那将是onload。

通常，您可以无休止地重用事件，尽管您只能执行一次 onload 事件。

如果您访问我的网站并查看 JavaScript 代码，您会注意到三件事……

1.) 一个 index.js 文件，它只是函数。

2.) 具有有限数量的全局变量（在函数外部定义的变量）和匿名 onload 函数的 onload.js 文件。

因为如果你想做多件事（例如执行多个不相关的函数）你只能执行一次 onload 事件，你可以使用一个anonymous function没有名字的简单的函数......

window.onload = function()
{
 my_func1();
 my_func2();
 my_func3();
}

请记住，您应该始终将脚本元素保留在<head>元素中，而不是元素中，<body>否则它将导致您走上糟糕的编码实践之路。

因此，如果您创建一个独立的测试文件，它可能看起来像这样......

例子.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Page</title>
<script type="application/javascript">
//<![CDATA[
function form_days()
{
 var d = document.getElementById('days');
 var input_day = document.createElement('input');
 input_day.setAttribute('id','days');
 input_day.setAttribute('name','days');
 input_day.setAttribute('type','text');
 input_day.setAttribute('value',d.options[d.selectedIndex].text);
 d.parentNode.insertBefore(input_day,d.nextSibling);
}

function get_methods(o)
{
 var m = document.getElementById('dom_methods');
 var dom_list = new Array();

 for (i in o) 
 {
  dom_list.push(i);
 }

 dom_list.sort();

 for (var i=0; i<dom_list.length; i++)
 {
  m.value = m.value+dom_list[i]+'\n';
 }
}

window.onload = function()
{
 form_days();
 get_methods(document.getElementById('days').options[document.getElementById('days').selectedIndex]);
}
//]]>
</script>
<style type="text/css">
label {border: #000 dotted 1px; padding: 0px 2px 0px 2px;}
label:hover {border: #000 solid 1px;}
textarea {height: 500px; width: 400px;}
</style>
</head>

<body>

<form action="http://www.test.com/school" method="post">
<fieldset>
<label for="days">Day:</label>
<select id="days" name="days">
 <option value="2">Monday</option>
 <option value="1">Tuesday</option>
 <option value="3">Wednesday</option>
 <option value="4">Thursday</option>
 <option value="5">Friday</option>
 <option value="6">Saturday</option>
 <option value="7">Sunday</option>
</select>

<div><textarea id="dom_methods"></textarea></div>

<div><input type="submit" value="submit" id="submitday" /></div>

</fieldset>
</form>

</body>
</html>

您应该能够将其复制并粘贴到文件中，将其命名为 example.xhtml。它功能齐全，经过测试并以最高标准工作。请记住，Internet Explorer 8 和更早版本无法使用 XHTML（应用程序/xhtml+xml）或理解 JavaScript 的正确媒体类型/mime，即应用程序/javascript，因此如果您需要在脚本元素上使用文本/javascript 向后兼容无效但会起作用。

score -1 · Accepted Answer

好吧，您可以更改选项的值，例如像这样使用jquery：

$('select[name=days] option').each(function(){
    $(this).val($(this).html());
});

http://jsfiddle.net/RCevC/

score -1 · Accepted Answer

我认为当用户从下拉列表中选择选项时，您正在尝试更新文本输入？试试这个：

html:

<select name="days">
 <option value="2">Monday</option>
 <option value="1">Tuesday</option>
 <option value="3">Wednesday</option>
 <option value="4">Thursday</option>
 <option value="5">Friday</option>
 <option value="6">Saturday</option>
 <option value="7">Sunday</option>
</select>
<input type="text" id="your_input" /> <!-- I added this field to your code -->
<input type="submit" value="submit" id="submitday">

javascript (jquery)

$('select[name=days]').change(function(){
    $('#your_input').val($(this).val());
});

http://jsfiddle.net/z3peu/2/

javascript - 如何填写有文字使用Javascript？

3 回答 3

Related

Reference

javascript - 如何填写使用Javascript？