Question

我需要使用一对范围输入滑块中的值动态设置网格。基本上，我现在所做的就是将它们放在一个表格中，以便每次输入更改时我都可以提交它。但是，这不是一个解决方案，因为每次我尝试更改它时，它都会提交表单，因此输入滑块会被卡住＆＃34;。

<form id='chartSize' method='get'>
    <div class="slidecontainer">
        <pre>Rows:   </pre>
        <input type="range" min="1" max="10" class="slider" name="rows" id="rows" 
        oninput="changeDimensions(true)">
        <output name="rowOutputName" id="rowOutputId"></output><br/>
        <pre>Columns:</pre>
        <input type="range" min="1" max="10" class="slider" name="columns" id="columns"
        oninput="changeDimensions(false)">
        <output name="colOutputName" id="colOutputId"></output><br/>
    </div>
</form>

任何帮助都将受到高度赞赏。

编辑：changeDimensions脚本实际上与问题相关。

这是：

function changeDimensions(opt)
{
    if(opt==true)
    {
        rowOutputId.value = rows.value;
    }
    else
    {
        colOutputId.value = columns.value;
    }

    document.getElementById('chartSize').submit();
}

Answer 1

您可以添加事件侦听器以阻止提交表单。

document.getElementById('chartSize').addEventListener('submit', function(event) {
  event.preventDefault();
})

Answer 2

在这种情况下使用form的唯一原因是提供可访问性：通常使用表单的原因是为了让用户能够输入值然后发送这些值到服务器。你没有这样做 - 所有你需要做的就是获取输入的值并使用它们，而从未提交表格。

此外，您不应在HTML中添加Javascript处理程序 - 它们在HTML标记内部基本上是eval，并导致代码性差，难以管理的代码。用Javascript代替监听器：

const rowOutputId = document.querySelector('#rowOutputId');
const colOutputId = document.querySelector('#colOutputId');
const rows = document.querySelector('#rows');
const columns = document.querySelector('#columns');
rows.addEventListener('change', () => rowOutputId.value = rows.value);
columns.addEventListener('change', () => colOutputId.value = columns.value);

<form id='chartSize' method='get'>
  <div class="slidecontainer">
    <pre>Rows:   </pre>
    <input type="range" min="1" max="10" class="slider" id="rows">
    <output id="rowOutputId"></output><br/>
    <pre>Columns:</pre>
    <input type="range" min="1" max="10" class="slider" id="columns">
    <output id="colOutputId"></output><br/>
  </div>
</form>

如何在不改变输入值的情况下提交输入更改表单？

2 个答案: