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

Implementation of HTML to PDF screenshot saving function

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

Implementation of HTML to PDF screenshot saving function

Detailed explanation of InnoDB architecture and features (summary of InnoDB storage engine reading notes)

6 inheritance methods of JS advanced ES6

Detailed explanation of how to use Docker to deploy Django+MySQL8 development environment

A few things you need to know about responsive layout

How to install PostgreSQL and PostGIS using yum on CentOS7

How to modify the group to which a user belongs in Linux

In-depth explanation of binlog in MySQL 8.0

Introduction to building a DNS server under centos7

Detailed explanation of HTML form elements (Part 2)

Recommend

How to shrink the log file in MYSQL SERVER

The latest popular script Autojs source code sharing

The whole process of Vue page first load optimization

Ubuntu installs scrcpy to complete mobile phone screen projection and control (another way to use QQ WeChat in Ubuntu)

MySQL database aggregate query and union query operations

Detailed graphic tutorial on installation, startup and basic configuration of MySQL under Windows version

JavaScript to achieve simple drag effect

Summary of some common configurations and techniques of Nginx

Solve the problem of importing Web projects into Idea and publishing them to Tomcat

C# implements MySQL command line backup and recovery

Implementation of react automatic construction routing

Steps and pitfalls of upgrading linux mysql5.5 to mysql5.7

Tips for writing concise React components

Native js to implement drop-down box selection component

Detailed explanation of the differences between the four types of positioning in CSS