javascript - Ajax 更新适用于 radio 、复选框，但不适用于按钮

Question

单击时，我希望根据单击的按钮来处理和更新表单。

html:

<input type="button" value="5.00" name="updatefield" id="updatefield" class="chooseit">

也尝试过:

<button name="updatefield" id="updatefield" class="chooseit">5.00</button>

<button name="updatefield" id="updatefield" class="chooseit" type="button">5.00</button>

<button name="updatefield" id="updatefield" class="chooseit" type="button" value="5.00">5.00</button>

<button name="updatefield" id="updatefield" class="chooseit" type="submit" value="5.00">5.00</button>

当我将按钮更改为“按钮”之外的任何内容(单选按钮、复选框等)时，表单将按预期进行。 (5.00 将作为 +5.00 传递到整个页面总计)

View.js:

    events: {
         'click button.chooseit': 'chooseIt',
    },

处理.js

    chooseDonate: function(updatefield) {
    this.set('updatefield', updatefield);
    var that = this;
    $.post('index.php?route=info/updateinfo', this.toJSON(), function(data) {
        qc.event.trigger('updateAll', data);
        that.updateForm(data);
    }, 'json').error();
},

按钮的处理方式是否不同？无法弄清楚为什么单选按钮/复选框可以工作，但按钮却不能。

Answer 1

我不熟悉您正在使用的框架。如果我明白events:{'click button.chooseit': 'chooseIt',}您将点击绑定(bind)到名为 chooseIt 的函数。如果能看到这个功能就好了。

但是要回答您的问题“按钮的处理方式不同吗？”，这取决于按钮的类型。有<input type="button"> , <input type="submit"> , <input type="image"> , <input type="reset"> , <button type="button"> , <button type="submit"> , <button type="menu">和<button type="reset"> 。如果type="submit"或type="image"表格已提交。如果type="reset"窗体中的控件将重置为其初始值。如果type="menu"通过其指定的 <menu> 定义的弹出菜单- 显示元素。如果type="button"除非您添加了点击处理程序，否则不会发生任何特殊情况。

对于你想要做的事情，普通的 javascript 没有什么区别。我在下面添加了一个示例，其中我使用 <input type="radio"> , <input type="checkbox"> , <input type="button"> , <button type="button">和<select> ，并且它们都使用相同的函数来设置 <output> 的值到最新点击的值。 ( type="checkbox" 得到特殊待遇，因为可以单击取消选中)

因此，要找出问题所在，您需要深入研究框架并查看它在做什么。一个常见的错误是表单被提交，而且提交的速度可能太快，以至于看起来就像什么都没发生一样。您可以检测到这一点，例如，如果您在浏览器开发者控制台中启用“粘性日志”，那么即使重新加载页面，日志也会保留。

var output = document.getElementById('output');
function setOutput(event) {
  var value = this.value;
  if (this.type === 'checkbox') {
    if (!this.checked) value = '';
  }
  output.value = value;
}
document.querySelectorAll('input, button').forEach(
  function (elem) {
    elem.addEventListener('click', setOutput);
  }
);
document.querySelectorAll('select').forEach(
  function (elem) {
    elem.addEventListener('change', setOutput);
  }
);

fieldset{
  display:inline-block;
  width:150px;
  height:50px;
  vertical-align:top;
  margin:0;
  padding:0;
}
fieldset p {
  margin:0;
  padding:0;
  font-size:80%;
}

<p>Proof of concept that the type of input element doesn't matter in this case.</p>
<form id="form1">
  <fieldset>
    <p>&lt;input type="radio"&gt;</p>
    <label><input value="5" type="radio" name="radioValue">5</label>
    <label><input value="10" type="radio" name="radioValue">10</label>
    <label><input value="20" type="radio" name="radioValue">20</label>
  </fieldset>
  <fieldset>
    <p>&lt;input type="checkbox"&gt;</p>
    <label><input value="5" type="checkbox" name="chkValue">5</label>
    <label><input value="10" type="checkbox" name="chkValue">10</label>
    <label><input value="20" type="checkbox" name="chkValue">20</label>
  </fieldset>
  <fieldset>
    <p>&lt;input type="button"&gt;</p>
    <input value="5" type="button" name="ibtnValue">
    <input value="10" type="button" name="ibtnValue">
    <input value="20" type="button" name="ibtnValue">
  </fieldset>
  <fieldset>
    <p>&lt;button type="button"&gt;</p>
    <button value="5" type="button" name="btnValue">5</button>
    <button value="10" type="button" name="btnValue">10</button>
    <button value="20" type="button" name="btnValue">20</button>
  </fieldset>
  <fieldset>
    <p>&lt;select&gt;</p>
    <select>
      <option value="">--Select value---</option>
      <option value="5">5</option>
      <option value="10">10</option>
      <option value="20">20</option>
    </select>
  </fieldset>
  <fieldset>
    <p>Last selected value: <output id="output"></output></p>
  </fieldset>
</form>