Форма Очистить / Отправить Javascript - PullRequest
Новая
       1

Форма Очистить / Отправить Javascript

0 голосов
/ 05 ноября 2018

Итак, у меня есть HTML-форма, мне нужно очистить входные данные формы при нажатии клавиши, а также удаляется содержимое по умолчанию. Если щелкнуть по кнопке сброса, форма сбрасывается до значения по умолчанию «Enter ect», и вам нужно снова что-то ввести. Кроме того, если щелкнуть «Отправить» без ввода одного из полей, на нем должно отображаться сообщение об ошибке, в котором указано, что одно из моих полей пусто. Как мне это сделать с помощью JS?

Я пытался использовать JS, чтобы очистить форму по умолчанию, но все они удаляются сразу, а не та, по которой щелкают.

HTML: 

<!doctype html>
<html lang="en">
<head>
  <title> Forms </title>
  <style>
    span {
      padding-left: 10px;
      display: block;
      float: left;
      width: 20%;
    }
    button { margin-left: 10px; }
    body {
      width: 80%; margin: auto; font-family: sans-serif;
      border: 1px solid black;
    }
  </style>
  <meta charset="utf-8">
  <script src="prototype.js"></script>
  <script src="formsubmit.js"></script>
</head>
<body>
  <h1> Task 2: Keyboard  Events and Form Submit </h1>
  <p> <span>Name:</span> <input id="input1" value="Enter Name" name="Name"></p>
  <p> <span>Id:</span> <input id="input2" value="Enter ID" name="ID"></p>
  <p> <span>Email:</span> <input id="input3" value="Enter Email" name="Email"></p>
  <p>
  <button id="submitButton" type="button"> Submit </button>
  <input type="reset" value="Reset">
  </p>
  <p style="color:red" id="ErrorMessage"> &nbsp; </p>
  </form>
</body>
</html>

JS: 

window.onload=function(){

  document.getElementById('input1').value = "";
  document.getElementById('input2').value = "";
  document.getElementById('input3').value = "";
}

1 Ответ

0 голосов
/ 05 ноября 2018 

<!doctype html>
<html lang="en">
<head>
  <title> Forms </title>
  <script>
  //window.onload = Reset();
  function reset(){
  document.getElementById('input1').value = "";
  document.getElementById('input2').value = "";
  document.getElementById('input3').value = "";
  document.getElementById('ErrorMessage').innerHTML = "";
}

function submit(){
  var inp1 = document.getElementById('input1').value;
  var inp2 = document.getElementById('input2').value;
  var inp3 = document.getElementById('input3').value;
  if(inp1 == "" || inp2 == "" || inp3 == "")
  {  
  document.getElementById('ErrorMessage').innerHTML = "Please enter all fields";
  }
  else{
  //do your code here
  document.getElementById('ErrorMessage').innerHTML = "";
  }
}
  </script>
  <style>
    span {
      padding-left: 10px;
      display: block;
      float: left;
      width: 20%;
    }
    button { margin-left: 10px; }
    body {
      width: 80%; margin: auto; font-family: sans-serif;
      border: 1px solid black;
    }
  </style>
  <meta charset="utf-8">
  <script src="prototype.js"></script>
  <script src="formsubmit.js"></script>
</head>
<body>
  <h1> Task 2: Keyboard  Events and Form Submit </h1>
  <p> <span>Name:</span> <input id="input1" value="" placeholder="Enter Name" name="Name"></p>
  <p> <span>Id:</span> <input id="input2" value=""
  placeholder="Enter ID" name="ID"></p>
  <p> <span>Email:</span> <input id="input3" value="" placeholder="Enter Email" name="Email"></p>
  <p>
  <button id="submitButton" type="button"  onclick="submit()"> Submit </button>
  <button id="resetButton" type="button"  onclick="reset()"> Reset </button>
  </p>
  <p style="color:red" id="ErrorMessage"> </p>
  
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...