使用html表单在没有jquery的情况下更改java脚本字段

Question

K我在上面找到的所有东西都需要jquery，但我想要一种方法，这样我就可以在文本框和滑块中键入内容，然后提交它（最好不更改页面），并让表单数据修改java脚本变量，而不必使用jquery

Answer 1

您需要一个函数，该函数将使用用户在表单中提供的值来根据需要更新JS变量。然后您只需要从按钮的onclick处理程序调用此函数：

<script>
    var myVarToUpdate = "test";
    function update() {
        // find the input element by ID and assign its value to `myVarToUpdate`
        myVarToUpdate = document.getElementById("someText").value;
    }
</script>
<form>
    <input id="someText" value="" />
    <button type="button" onclick="update()">Update</button>
</form>

这样表单就不会被提交，也就是说页面不会被重新加载。实际上，在这种情况下，您甚至不需要一个合适的<form>。

Answer 2

除非您特别需要提交功能，否则您可以执行以下

通过数据属性将HTML输入元素命名为jsvar，如下所示：

  <input data-jsvar="myvar" />

在JS中，将onChange处理程序放在以下输入元素上：

  function changeVar (ev) {
    var v = this.getAttribute ('data-jsvar');
    if (v && v in window) {
      window[v] = this.value;
      console.log (v + ' = ' + window[v]);  // for debug
    }
  }

  [].forEach.call (document.querySelectorAll ('[data-jsvar]'), function (inp) {
      inp.addEventListener ('change', changeVar, false);
      window[inp.getAttribute ('data-jsvar')] = inp.value; // optional init for var
  });

这将JS与HTML巧妙地分离开来，只需添加HTML元素即可轻松扩展。请在上查看演示http://jsfiddle.net/jstoolsmith/zvhpc/