Question

I try to populate several textfields to become something like this <a href="check.php?name=john doe&group=metallica">Check</a>

Below is my script that I modified from here but this script is only show inside textarea and how to show inside anchor link and generate something like <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

If you want to target an anchor tag instead of the textarea, then obviously you need to change that accordingly:

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

Then in your updateTextArea function, you need to target the anchor’s href rather than the textarea’s value. There’s several other optimizations that can be made in there also, such as making an array of name/value pairs and then doing a join on them so you don’t end up with the trailing &, etc.

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('&');
}

What the heck, here’s a fiddle of the whole thing.

It would probably make sense to change the name of the function itself since there’s no textarea involved anymore, but I leave that as something for you to do.