Блог

Главная - Вопросы по программированию - Как отправить форму во время работы с двумя кнопками переключения?

Как отправить форму во время работы с двумя кнопками переключения?

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь создать форму формы, в которой находится кнопка редактирования и сохранения.И он также включает и отключает функциональность текстового поля..

Пример :

Сначала текстовые поля в форме будут отключены, если пользователь нажмет на кнопку «Редактировать», затем текстовое поле будет включено, и пользователь сможет редактировать значения.. А также пользователь может видеть кнопку «Сохранить» вместо кнопки «Редактировать».. Как только пользователь нажимает «Сохранить» после редактирования значений.. затем текстовые поля должны быть отключены, а кнопка «Редактировать» должна быть размещена вместо «Сохранить».Но все равно пользователь должен быть на том же screen.it работает нормально. Теперь проблема заключается в сохранении значения. Если использовать нажатия на кнопку «Сохранить», я хочу сохранить значения формы в базе данных. Итак, я хочу использовать тег формы.. если я использую тег формы, эта функция не работает. Может ли кто-нибудь, пожалуйста, помочь мне..

Вот мой код..

 <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>

[Отключены текстовые поля кнопкой quot;Редактироватьquot;]1 [Включены текстовые поля с помощью кнопки quot;Сохранитьquot;]2

Комментарии:

1. Используйте веб-службы.

2. Есть ли какая-то особая причина, по которой вы не используете jQuery или другую библиотеку, которая значительно упростила бы это упражнение?

3. я новичок в этом.. Итак, мне не нравится идти очень сложным путем.. Также, если я использую какую-либо библиотеку, это может повлиять на некоторые другие функции моего веб-сайта.

4. Вы можете включить jQuery в режиме «без конфликтов». Я думаю, что ваш текущий подход более сложный и подвержен ошибкам из-за того, что вы не используете библиотеку, которая отвлекает вас от конкретных реализаций DOM. например, вы можете отключить все элементы управления на странице одной строкой кода: $(‘input, select’).prop(‘disabled’, true);