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>
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>You can also give it a try
<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>
<script type="text/javascript">
function autoFill(formID) {
const formEle = document.getElementById(formID);
const inputs = formEle.getElementsByTagName('input')
// convert to array
const inputsArr = Array.from(inputs);
for (const input in inputsArr)
inputsArr[input].value = "15";
}
</script>