剃须刀页面设置输入值在按钮上单击

Question

我想单击剃须刀页面上的一个按钮，该按钮为“客户端上的两个输入字段”设置值。

我有两个输入字段

<input id="pageBatteryName" name="pageBatteryName" asp-for="Firmware.BatteryName" class="form-control"  />
<select id="pageDeviceId" name="pageDeviceId" asp-for="Firmware.DeviceId" class ="form-control" asp-items="ViewBag.DeviceId"></select>

一个按钮

<input type="button" onClick="AutoFill()" value="Auto Fill"/>

和一个JavaScript

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

<script type="text/javascript">
    function AutoFill()
    {
        var vBatteryName = document.getElementsByName('pageBatteryName');
        vBatteryName.value = "QWERTY1234";
        var vDeviceId = document.getElementsByName('pageDeviceId');
        vDeviceId.value = 2;
        vBatteryName.dispatchEvent(new Event('change'));
        vDeviceId.dispatchEvent(new Event('change'));

    }
</script>
}

上面的代码不起作用。我花一天的时间尝试这样做。你能帮我吗？

如果按钮可行，我将基于选定的输入文件名（几乎所有的输入字段）设置输入。 我使用了OnPostautofill Post C＃方法，但它重新加载了一个页面，发现JavaScript在这里很有用。如果JavaScript不适合此任务，您可以向我展示方式吗？

Answer 1

getElementsbyname 返回元素数组。相反，您可以使用 getElementById 获取单个元素：

var vBatteryName = document.getElementById('pageBatteryName');
vBatteryName.value = "QWERTY1234";

这适用于输入字段。

对于选择，您需要将选项元素添加到这样的选择：

var opt = document.createElement('option');
opt.value = 0;
opt.innerHTML = 1;
vDeviceId.appendChild(opt);
    

请参阅此jsfiddle以查看您的代码：