Question

我尝试将几个文本字段填充为类似<a href="check.php?name=john doe&group=metallica">Check</a>

的内容

及以下是我从here修改的脚本，但此脚本仅显示在textarea内部以及如何显示内部锚链接并生成类似<a href="check.php?name=john doe&group=metallica">Check</a>的内容。

<div id="textBoxContainer">
    <input type="text" id="name" onkeyup="UpdateTextArea();" name="name" />  
    <input type="text" id="group"  onkeyup="UpdateTextArea();" name="group" />  
</div>  
<textarea id="textAreaResult"></textarea>

<a href="check.php?" id="link_check">Check</a>



<script type="text/javascript">
    function UpdateTextArea() {
        var textBoxContainerDiv = document.getElementById("textBoxContainer");
        var textboxes = textBoxContainerDiv.getElementsByTagName("input");
        var finalResult = "";
        var textAreaFinalResult = document.getElementById("textAreaResult");

        for (var i = 0; i < textboxes.length; i++) {
            finalResult = finalResult + textboxes[i].id + "=" + textboxes[i].value + "&";
        }

        textAreaFinalResult.value = finalResult;
    }
</script>

Answer 1

如果您想要定位锚标记而不是textarea，那么显然您需要相应地更改它：

<a id="hrefResult" href="check.php">link</a>

然后在updateTextArea函数中，您需要定位锚点href而不是textarea的value。还可以在其中进行其他几个优化，例如创建一个名称/值对数组，然后对它们执行join，这样就不会得到尾随&等等。

function UpdateTextArea() {
    var textBoxContainerDiv = document.getElementById("textBoxContainer");
    var textboxes = textBoxContainerDiv.getElementsByTagName("input");
    var length = textboxes.length;
    var target = document.getElementById("hrefResult");
    var params = [];
    var baseref = 'check.php';

    for (var i = 0; i < length; i++) {
        params.push(textboxes[i].id + "=" + textboxes[i].value);
    }
    target.href = baseref + '?' + params.join('&');
}

到底是什么，这是整个事情的fiddle。

更改函数本身的名称可能是有意义的，因为不再涉及textarea了，但我把它作为你要做的事情。

从多个文本字段填充锚链接

1 个答案: