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

Detailed explanation of how to exit Docker container without closing it

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

Detailed explanation of how to exit Docker container without closing it

How to set npm to load packages from multiple package sources at the same time

How to deploy tomcat in batches with ansible

A brief discussion on the efficiency of MySQL subquery union and in

Implementation of drawing audio waveform with wavesurfer.js

Tutorial on deploying jdk and tomcat on centos7 without interface

Detailed explanation of the code between the MySQL master library binlog (master-log) and the slave library relay-log

Install tomcat and deploy the website under Linux (recommended)

Hover zoom effect made with CSS3

Summary of JavaScript custom object methods

Recommend

Example of using javascript to drag and swap div positions

Quick solution for forgetting MySQL8 password

MySQL 5.7.17 winx64 decompression version installation and configuration method graphic tutorial

How to set the position of the block element in the middle of the window

Example code for building an admin dashboard layout using CSS and JavaScript

How to implement the association between frame windows and the use of the target attribute of hyperlinks

Docker compose deploys SpringBoot project to connect to MySQL and the pitfalls encountered

Write a formal blog using XHTML CSS

Docker uses a single image to map to multiple ports

Teach you a trick to achieve text comparison in Linux

Detailed example of MySQL joint table update data

Detailed explanation of node.js installation and HbuilderX configuration

Centos8 builds nfs based on kdc encryption

Docker Machine in-depth explanation

Four ways to modify the default CSS style of element-ui components in Vue