How to submit the value of a disabled form field in a form Example code

If a form field in a form is set to disabled, the value of the form field will not be submitted. But sometimes you do need to submit this value.
There are many solutions, such as using readonly instead of disabled, but I think none of them are very good (the specific reasons are omitted).

I thought of a solution, which is to copy the form to be submitted before submitting it, then set the disabled attribute of all form fields in the copied form to false, and then submit the copied form. The following is the demonstration code (save the code to a file named submit.html to observe the demonstration effect).

Copy code

The code is as follows:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift-jis">
<title>
Submit form
</title>
<script>
function doSubmit(form) {
var newForm = form.cloneNode(true);
enableFields(newForm.getElementsByTagName("input"));
enableFields(newForm.getElementsByTagName("textarea"));
enableFields(newForm.getElementsByTagName("select"));
newForm.style.display = "none";
document.body.appendChild(newForm);
newForm.submit();
}
function enableFields(fields) {
for(var i=0;i<fields.length;i++) {
var field = fields[i];
if (field instanceof(Array)) {
for (var j=0;j<field.length;j++) {
field[j].disabled = false;
}
} else {
field.disabled = false;
}
}
}
</script>
</head>
<body>
<form action="submit.html">
<input type="text" name="text" value="tt" disabled/>

<input type="radio" name="radio" value="r1" checked disabled>r1
<input type="radio" name="radio" value="r2">r2

<input type="checkbox" name="checkbox" value="c1">c1
<input type="checkbox" name="checkbox" value="c2" checked disabled>c2

<select name="select" disabled>
<option value="1">1</option>
<option value="2">2</option>
</select>

<textarea name="textarea" disabled>123</textarea>

<input type="button" value="submit" onclick="doSubmit(this.form)">
</form>
</body>

<<: CSS3 realizes the graphic falling animation effect

>>: Detailed explanation of ES6 Promise usage

Use shell script to install python3.8 environment in CentOS7 (recommended)

How to submit the value of a disabled form field in a form Example code

Use shell script to install python3.8 environment in CentOS7 (recommended)

Detailed explanation of several API examples commonly used in advanced javascript front-end development

HTML special character conversion table

A brief discussion on the types of node.js middleware

Modify the style of HTML body in JS

Perfect solution for theme switching based on Css Variable (recommended)

A detailed account of the process of climbing a pit of Docker deployment service

Use JS to operate files (FileReader reads --node's fs)

How does MySQL achieve multi-version concurrency?

CentOS system rpm installation and configuration of Nginx

Recommend

W3C Tutorial (13): W3C WSDL Activities

JavaScript offset implements mouse coordinate acquisition and module dragging within the window

Three ways to configure Nginx virtual hosts (based on domain names)

How to implement Linux deepin to delete redundant kernels

Tutorial on binary compilation and installation of MySql centos7 under Linux

Example of implementing TikTok text shaking effect with CSS

HTML Tutorial: DOCTYPE Abbreviation

MySQL 5.7.18 installation tutorial under Windows

js to call the network camera and handle common errors

MySQL restores data through binlog

How to install docker using YUM

Specific use of CSS content attribute

VUE Getting Started Learning Event Handling

WeChat Mini Program QR Code Generation Tool weapp-qrcode Detailed Explanation

Detailed explanation of meta tags (the role of meta tags)