gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 05:05:57 24 4
gpt4 key购买 nike

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

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();
},

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

最佳答案

我不熟悉您正在使用的框架。如果我明白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>

关于javascript - Ajax 更新适用于 radio 、复选框,但不适用于按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41750683/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com