javascript autofill with multiple forms

July 20, 2022

How can I specify which form to autofill without giving each input a unique id? I do have unique form ids.

I’m working on existing code so I cannot change the input ids.

<a href="#" onClick="autoFill(); return true;" >Click to Autofill</a>
<form id="form1">
    <p>
    <label>Text Input: </label>
    <input type="text" id="input1">
    <label>Text Input: </label>
    <input type="text" id="input2">
    </p>

</form>

<a href="#" onClick="autoFill(); return true;" >Click to Autofill</a>
<form id="form2">
    <p>
        <label>Text Input: </label>
        <input type="text" id="input1">
        <label>Text Input: </label>
        <input type="text" id="input2">
        </p>
</form>

<a href="#" onClick="autoFill(); return true;" >Click to Autofill</a>
<form id="form3">
    <p>
        <label>Text Input: </label>
        <input type="text" id="input1">
        <label>Text Input: </label>
        <input type="text" id="input2">
        </p>
</form>


<script type="text/javascript">
    function autoFill() {
    document.getElementById('input1').value = "15";
    document.getElementById('input2').value = "12";
    }
</script>

>Solution :

You just need to correctly target the elements. This should work for you

 function autoFill(formID) {
            document.querySelector(`#${formID} #input1`).value = "15";
            document.querySelector(`#${formID} #input2`).value = "12";
        }

    <a href="#" onClick="autoFill('form1'); return true;">Click to Autofill</a>
    <form id="form1">
        <p>
            <label>Text Input: </label>
            <input type="text" id="input1">
            <label>Text Input: </label>
            <input type="text" id="input2">
        </p>

    </form>

    <a href="#" onClick="autoFill('form2'); return true;">Click to Autofill</a>
    <form id="form2">
        <p>
            <label>Text Input: </label>
            <input type="text" id="input1">
            <label>Text Input: </label>
            <input type="text" id="input2">
        </p>
    </form>

    <a href="#" onClick="autoFill('form3'); return true;">Click to Autofill</a>
    <form id="form3">
        <p>
            <label>Text Input: </label>
            <input type="text" id="input1">
            <label>Text Input: </label>
            <input type="text" id="input2">
        </p>
    </form>