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 Vue.js directive custom instructions

Recommend

Tutorial on how to modify the IP address of a Linux virtual machine, check the gateway, and configure the network environment

Modify the IP address of the virtual machine: Ent...

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

Detailed explanation of Vue.js directive custom instructions

Solution to the problem of session failure caused by nginx reverse proxy

Detailed analysis of the parameter file my.cnf of MySQL in Ubuntu

Introduction to HTML Chinese Character Encoding Standard

Summary of using MySQL online DDL gh-ost

JavaScript Basics: Scope

Implementation of Element-ui Layout (Row and Col components)

Detailed explanation of the conflict between flex layout and position:absolute/fixed

Solution to MySQL being unable to start due to excessive memory configuration

Detailed explanation of Vue3 encapsulation Message message prompt instance function

Recommend

Tutorial on how to modify the IP address of a Linux virtual machine, check the gateway, and configure the network environment

Detailed explanation of slots in Vue

CSS3 clear float method example

Simply understand the differences in the principles of common SQL delete statements

Linux kernel device driver kernel debugging technical notes collation

How to set the user root password and remote connection method for Alibaba Cloud ECS instance

The difference and use of json.stringify() and json.parse()

onfocus="this.blur()" is hated by blind webmasters

Explain the deployment and configuration of Clickhouse Docker cluster with examples

Solution to Vue3.0 error Cannot find module'worker_threads'

How to use axios to make network requests in React Native

Graphic tutorial on configuring log server in Linux

Using HTML to implement a voting website cheating scheme that restricts IP

CSS to change the size (width, height) of the image when the mouse passes over the image hyperlink

Vue + element dynamic multiple headers and dynamic slots