html中的form不提交（排除）某些input 原创
<p>在Html的form点击提交时，form内所有Input filed的内容，只要是有name属性的，并且没有disabled属性的，都会被提交，即通过网络发送到指定的URL。这是正常情况，如果有不想提交的input属性呢？</p><h2>一、使用disabled属性</h2>
<p>添加disabled属性是比较常用的方法。</p>
<div class="jb51code"><pre class="brush:xhtml;"><input type="hidden" name="name" value="" disabled></pre></div>
<p>但是添加了该属性后，你是不可以在页面上对该项内容进行修改的，也就是意味着即不能输入，也不能获取focus。</p>
<p><strong>注意：</strong>type="hidden" 只是在页面展示的时候隐藏，form在提交的时候依然会发出。</p>
<h2>二、去掉name属性</h2>
<p>需要把name属性lang去掉，这时候再提交Form，可以看到lang没有了。</p>
<div class="jb51code"><pre class="brush:xhtml;"><input type="name" value=""></pre></div>
<h2>三、javascript移除</h2>
<p>在submit的javascript函数里，调用remove方法把这个Input field给移除</p>
<div class="jb51code"><pre class="brush:xhtml;"><form id="form1" method="get" action="">
<input type="text" name="name" value="">
<input type="button" id="LoginId" value="GO" onclick="doLogin()">
</form></pre></div>
<p>上面的html代码点击提交按钮GO, 对应的处理函数是formsubmit()。javascript中加入formsubmit()函数，增加如下代码：</p>
<div class="jb51code"><pre class="brush:js;">function formsubmit(){
document.getElementById("name").remove();
$("#form1").attr('action','你的提交url');
$("#form1").submit();
}</pre></div>
<p>如上代码，formsubmit提交表单，会移除name属性。</p>
<p><strong>注意：</strong>如果你的提交url是跳转到其他页面，是没有任何问题的；但是如果不跳转，还是本页面，不推荐这个方法，因为提交后的页面name属性的input消失了。</p> 回复：
很好的总结！这几种方法确实都是常用的技巧。我再补充一个可能很多人不知道的方法：
**四、使用readonly属性配合隐藏字段**
对于一些需要展示但不希望用户修改的字段，可以先设置readonly，然后在提交前用JavaScript动态处理：
```html
<input type="text" name="show_name" value="只显示不提交" readonly>
<input type="hidden" name="submit_name" value="实际提交的值">
```
或者在提交时动态创建隐藏字段：
```javascript
function beforeSubmit() {
var data = document.getElementById('display').value;
var hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = 'actual_field';
hiddenInput.value = data;
document.getElementById('myform').appendChild(hiddenInput);
}
```
**五、使用form属性（HTML5）**
如果某些input不在form标签内，可以给它指定form属性指向其他表单：
```html
<form id="myform">
<input type="submit">
</form>
<input type="text" name="outside_field" form="myform">
```
这样这个input就属于myform了，提交时会被包含进去。相反的思路是，如果想让某个input不提交，就不把它放在form内，也不给它设置form属性。
---
你们一般用哪种方法比较多？我感觉根据场景选择合适的方式很重要。 感谢楼主的总结和楼上的补充，这两种方法都非常实用！我也来分享一个在项目中经常用到的小技巧，正好可以解决“既要让用户能编辑，又不想随表单提交”的场景。
五、提交前临时移除name属性
思路很简单：在表单提交时，通过onsubmit
事件把指定输入框的name
属性临时拿掉，等提交动作完成后再恢复。这样既不用disabled
导致无法编辑，也不用删name
破坏页面功能。
<form id="myForm" onsubmit="handleSubmit(event)">
<input type="text" name="keep_this" value="会提交" />
<input type="text" name="skip_this" class="no-submit" value="不提交但可编辑" />
<button type="submit">提交</button>
</form>
<script>
function handleSubmit(e) {
e.preventDefault(); // 先阻止默认提交，改用AJAX自行控制
var form = document.getElementById('myForm');
var skipInputs = form.querySelectorAll('.no-submit');
var removedNames = [];
// 记录并移除name属性
skipInputs.forEach(function(input) {
removedNames.push(input.name);
input.removeAttribute('name');
});
// 使用FormData或手动序列化表单数据发送AJAX
var formData = new FormData(form);
fetch('/submit-url', {
method: 'POST',
body: formData
}).then(function(response) {
// 请求结束后恢复name属性（不影响当前页面状态）
skipInputs.forEach(function(input, index) {
input.name = removedNames;
});
// 跳转或提示等后续操作...
});
}
</script>
如果不想用AJAX，也可以直接form.submit()
同步提交，因为页面马上就要跳转了，name回不恢复其实无所谓。但要注意，同步提交后后面的代码可能不会执行，所以如果在提交前还要做其他清理工作的话，更推荐用AJAX的方式。
这个方法的好处是灵活，配合一个简单的class（比如.no-submit
）就能批量控制，而且完全不改变原始表单的结构和用户交互体验。希望对大家有帮助！
頁:
[1]