可以用button代替input type=”submit”吗? -- 关于button的一切

ie下,<button>标记恐怕还存在几个不大不小的问题。

在一个表单里,如果有一个以上"submit"类型的<button>标签存在,在表单被提交时,不管你点击哪个<button>,所有<button>的值都会被post/get。<button>的缺省type属性被设置为"button",但是在A级别浏览器下,应该设置为"submit"才对如果你用javascript去访问<button>的value属性,IE却返回了<button>的innerHTML属性,很让人恼火。 (可以使用"getAttributeNode"方法来避免.)

PLAIN TEXT

CODE:

<form>

<button type="submit"value="1" >text 1</button>

<button type="submit"value="2" >text 2</button>

</form>

在IE下,上面两个button的数据都会被提交。并且ie会提交这两个button的innerText而不是value。而其它浏览器仅仅提交你点击的那个button。

 

留言:

button的值是写在节点之间的,实事上是innerHtml的值~这点上讲比input更灵活一点:例如,你可以设置一个value为TEST
不过个人认为没有必要用button代替input吧

在只有一个button时,或者不放在form里的时候还是可以用的咯
button标签可以有更多的样式,比如可以加个图片什么的。

to vsky:
在firefox下,情况有所不同,表单提交的是button的value属性而不是innerHTML

加个οnclick=”return false”就不会提交了…
要不你全用type=”button” ,提交的加一个οnclick=”this.form.submit()”

这样的话,还是直接用input来得简单,不容易出现意料之外的行为

我认为 Button 并不是用来代替 input 的.
Button 是为了响应用户交互行为的.不是为了直接通过 Button 的 name 和值 来向 server 提交数据的.
虽然 button 可以提交 name:value. 但我认为提交数据应该用 input
也就是说应该这样用 Button
提示信息
提交
也就是说 button 里应该永远看不到 name 属性.



关键是合理使用button标签。html被屏蔽是wordpress的默认行为,不过有部分标签是被保留的,比如b,strong,ul,li之类的。

问题一:

一段表单代码:

<form action="msrCheckPlanAction" id="editFormId" method="post">

<td class="labelStyle">
<button οnclick="doAction('save');" id="toPlanDetail">按钮提交</button>
</td>

</form>

js函数:

function doAction(act){
if(act=='return'){
location.href='msrCheckPlanAction.action';
}else if(act=='save'){
$("#editFormId").attr('action','msrCheckPlanAction!save.action');
$('#editFormId').submit();
}
}

问题来了,如果点击按钮提交的话,后台action中会有两次请求,也就是会执行两次表单的提交

弄了半天,感觉是button按钮提交的时候表单提交了一次,而它自己也执行了一次。

可以这样改:

<button οnclick="doAction('save');return false;" id="toPlanDetail">按钮提交</button>

加个return false就不会提交了

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 JavaScript 实现动态增加药物输入框,具体实现步骤如下: 1. 给“增加”按钮绑定点击事件,点击按钮时动态增加一个药物输入框。 2. 在点击事件中创建一个新的输入框元素,并设置其属性和样式。 3. 将新的输入框元素添加到表单中。 下面是示例代码: ```html <div class="container"> <div class="mb-3"> <label for="name" class="form-label">姓名</label> <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名"> </div> <div id="medicines"> <div class="input-group mb-3"> <input type="text" class="form-control medicine-input" placeholder="药物" aria-label="Recipient's username" aria-describedby="button-addon2"> <button class="btn btn-danger delete-button" type="button" id="button-addon2">删除</button> </div> </div> <button type="submit" class="btn btn-primary">提交</button> <button type="button" class="btn btn-success add-button">增加</button> </div> <script> // 获取元素 const medicinesDiv = document.getElementById('medicines'); const addButton = document.querySelector('.add-button'); const deleteButtons = document.querySelectorAll('.delete-button'); // 定义增加输入框的函数 function addMedicineInput() { // 创建新的输入框元素 const inputGroup = document.createElement('div'); inputGroup.classList.add('input-group', 'mb-3'); const input = document.createElement('input'); input.type = 'text'; input.classList.add('form-control', 'medicine-input'); input.placeholder = '药物'; input.setAttribute('aria-label', 'Recipient\'s username'); input.setAttribute('aria-describedby', 'button-addon2'); const deleteButton = document.createElement('button'); deleteButton.classList.add('btn', 'btn-danger', 'delete-button'); deleteButton.type = 'button'; deleteButton.id = 'button-addon2'; deleteButton.textContent = '删除'; // 绑定删除按钮的点击事件 deleteButton.addEventListener('click', () => { inputGroup.remove(); }); // 将新的元素添加到表单中 inputGroup.appendChild(input); inputGroup.appendChild(deleteButton); medicinesDiv.appendChild(inputGroup); } // 绑定增加按钮的点击事件 addButton.addEventListener('click', addMedicineInput); // 绑定删除按钮的点击事件 deleteButtons.forEach((button) => { button.addEventListener('click', () => { button.parentNode.parentNode.remove(); }); }); </script> ``` 在上面的代码中,我们将药物输入框包裹在一个 `<div>` 元素中,并为这个 `<div>` 元素设置了一个 id,方便后面操作。我们还定义了一个增加输入框的函数 `addMedicineInput()`,在这个函数中,我们创建了一个新的输入框元素,并将其添加到表单中。当用户点击“增加”按钮时,我们调用这个函数来增加输入框。同时,我们也为每个删除按钮绑定了点击事件,在点击时删除对应的输入框。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值