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',
    },

processing.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

如果您的button位于表单内，则可能正在提交（这是他们的默认行为）。

尝试添加一个type属性，告诉您的浏览器不希望发生这种情况：

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

Answer 2

您需要为按钮指定如下值：

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

Answer 3

我不熟悉您正在使用的框架。如果我理解events:{'click button.chooseit': 'chooseIt',}，则将点击绑定到名为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>

Ajax更新适用于无线电，复选框但不适用于按钮

3 个答案: