2

lets say we got this html scenario:

Please note:

The forms "action" and "method" attributes are omitted on purpose. The "form" tag is just here because in my real project, I have a similar scenario and having the form around all those fields may help in handling the request.

<form id="form1">
    <div id="wrapperDiv">
        <div id="div1">
            <input type="text" id="searchField"/>
        </div>
        <div id="div2">
            <ul>
                <li><a href="javascript:void(0)" onclick="callFunction(this);">Hello</a></li>
            </ul>
        </div>
    </div>
</form>

<script type="text/javascript">
    function callFunction(x)
    {
         //When invoked this function sets the value of "searchField" to the respective link tag innerHTML
         //to set this you cant use something like:
         // var y = document.getElementById("searchField");
    }
</script>
4

5 回答 5

3

要获取文本输入元素的值，我们可以使用文本输入对象的 value 属性：text_val = oText.value;

例如，如果我们有以下文本输入元素：

<input type="text" name="name" id="txt_name" size="30" maxlength="70">

我们可以像这样访问元素的值：

name = oForm.elements["name"].value;

要获得对文本输入元素的引用，下面是一些示例代码：

oText = oForm.elements["text_element_name"];或者

oText = oForm.elements[index];

在上面的代码中，“index”是元素在从 0 开始的元素数组中的位置，oForm 是使用 document.forms 集合获得的表单对象引用：

oForm = document.forms[index];
于 2012-12-27T10:15:35.540 回答
1

You can make it easy if using jQuery. You can use:

function callFunction(x) {
    var y = $(this).closest('form').find('input[type="text"]:first');
    y.val(this.innerHTML);
}

to get the search field.

于 2012-12-27T10:19:04.663 回答
1

如果您确定 div 中只有一个输入元素：

var parent = document.getElementById('div1');
var element = parent.GetElementsByTagName('input')[0];
于 2012-12-27T10:09:19.570 回答
0

你可以使用 var y= document.getElementsByTagName("input");

于 2012-12-27T10:28:40.993 回答
0

一种可能性如下：

function findIndex(el, container) {
    // we can't do anything without a node to work on
    if (!el) {
        return false;
    }
    else {
        // container must be a node, if no container is supplied the body is used
        container = container || document.body;
        // finds all elements of the same tagName as the node
        // (el) passed to the function that are within the container node
        var els = container.getElementsByTagName(el.tagName);
        // iterates through each of these nodes
        for (var i = 0, len = els.length; i < len; i++) {
            // sets the 'data-index' attribute to be equal to 'i'
            els[i].setAttribute('data-index', i);
        }
        // returns the generated index from the 'el' node passed into the function
        return el.getAttribute('data-index');
    }
}

function callFunction(el) {
    // if no el passed in, we stop here
    if (!el) {
        return false;
    }
    else {
        // sets the 'i' variable equal to the value of the 'data-index' attribute
        // if it exists, if it doesn't then we generate it
        var i = el.dataIndex ? el.getAttribute('data-index') : findIndex(el, document.forms.form1);
        // if an index is found (the 'i' variable) we set the value of
        // the 'input' with that index to be equal to the text contained
        // within the clicked link
        if (i) {
            document.getElementsByTagName('input')[i].value = (el.textContent || el.innerText);
        }
        // if no index is returned then we exit here
        else {
            return false;
        }
    }
}

var links = document.getElementsByTagName('a');

for (var i = 0, len = links.length; i < len; i++) {
    links[i].onclick = function(e) {
        e.preventDefault();
        callFunction(this);
    }
}​

JS 小提琴演示。

这确实假设在第n个 input和第n个 a元素之间存在直接关系。

我也不再使用内联事件处理程序，以使维护更容易（并且 JavaScript 不那么突兀）。第一次调用callFunction()给出所有a元素（并且可以指定父/祖先以将索引限制为仅a给定祖先节点/元素内的那些元素），随后的调用使用生成的data-index属性（而不是重新生成索引） .

参考：

于 2012-12-27T10:53:28.670 回答