Question

我正在尝试创建一个包含编辑和保存按钮的表单表单。它还具有启用和禁用文本字段功能..

示例：

首先，如果用户点击“编辑”按钮，表单文本字段将被禁用，然后文本字段将启用，用户可以编辑值。用户也可以看到“保存”按钮而不是“编辑”按钮。。一旦用户在编辑值后点击“保存”..那么，文本字段应该被禁用，并且应该放置“编辑”按钮而不是“保存”。但仍然用户应该在同一个屏幕上。它工作正常。现在的问题是保存价值。如果使用“保存”按钮，我想将表单值保存在数据库中。所以我想使用表单标记 ..如果我使用表单标记，则此功能无效。任何人都可以帮助我..

这是我的代码..

<html>
<head>
<meta charset="UTF-8">
<title>Form Demo</title>
<script>
function disable() 
{
document.getElementById("Text1").disabled = true;
document.getElementById("Text2").disabled = true;
document.getElementById("Text3").disabled = true;   
}
function enable()
{
document.getElementById("Text1").disabled = false;
document.getElementById("Text2").disabled = false;
document.getElementById("Text3").disabled = false;
} 
function SwitchButtons(buttonId)
{
var hideBtn, showBtn, menuToggle;
if (buttonId == 'button1') 
{
menuToggle = 'menu2';
showBtn = 'button2';
hideBtn = 'button1';
} 
else 
{
menuToggle = 'menu3';
showBtn = 'button1';
hideBtn = 'button2';
}
document.getElementById(hideBtn).style.display = 'none';
document.getElementById(showBtn).style.display = ''; 

}
</script>
</head>
<body>
First Name: <input type="text" id="Text1" disabled  value="Mickey"><br>
Second Name: <input type="text" id="Text2" disabled value="Mouse"><br>
Address: <input type="text" id="Text3" disabled value="Hello World"><br>
<button  type="submit" onclick="disable(); SwitchButtons('button1');"       id="button1" class="sideviewtoggle myButton" style="display:none;">Save</button>
<button onclick="enable(); SwitchButtons('button2');" id="button2"      class="sideviewtoggle myButton" >Edit</button>
</body>
</html>

[] 1 [ Enabled Text Fields with "Save" button ] 2

如何使用两个切换按钮提交表单？

0 个答案: