показать значение ввода html формы в другом поле - PullRequest
Новая
       0

показать значение ввода html формы в другом поле

0 голосов
/ 22 марта 2020

У меня есть форма html с полями, которые заполняет пользователь. У меня также есть переключатели, которые при нажатии показывают определенный фрагмент текста c в текстовой области. То, что я хочу сделать, это взять заданное пользователем значение имени и отобразить это значение в тексте, который вызывается переключателем. Я добавил код, который у меня есть.

Код, который принимает личную информацию, такую ​​как имена и фамилии. 

<!DOCTYPE html>
<html>
<head> 

<form class="form-inline" action="/action_page.php">
  <label for="Gender">Gender:</label>
  <option="text" id="cName" placeholder="Gender" name="cName" size="40">
  <Select name="nom" size="1"
  <option>Mr
  <option>Mr
  <option>Ms
  </select>
  </form>

<label for="fName">Family Name:</label>
  <input type="text" id="fName" placeholder="Family Name" name="fName"> 
  <label for="gName">Given Name:</label>
  <input type="text" id="gName" placeholder="Given Name" name="gName" 
  <label for="dob">DOB:</label>
  <input type="date" id="dob" placeholder="DOB" name="dob">

  <p id="dob"></p> 

</head>
</form>

Код, использующий переключатели для отображения определенного c фрагмента текста. 


<label for="introduction">Introduction:</label>
       <FORM NAME="myForm" ACTION="" METHOD="POST"> 
        <INPUT TYPE="radio" NAME="input" VALUE="green" onchange="testResults(this.form)">gold
        <INPUT TYPE="radio" NAME="input" VALUE="blue" onchange="testResults(this.form)">grey
        <INPUT TYPE="radio" NAME="input" VALUE="green" onchange="testResults(this.form)">violet
        <INPUT TYPE="radio" NAME="input" VALUE="orange" onchange="testResults(this.form)">black<p>

        <textarea ID="textbox"  rows="10" cols="50" VALUE=""></textarea>

         </FORM>

И мой javascript код для текста, который отображается при нажатии на переключатель. 

<SCRIPT LANGUAGE="JavaScript">
    function testResults (form) {
    var TestVar1 = form.input[0].checked;
    var TestVar2 = form.input[1].checked;
     var TestVar3 = form.input[2].checked; 
    var TestVar4 = form.input[3].checked;
      if (TestVar1 == true) {
        form.textbox.value = "We hereby certify that NAME1, born on MONTH, DAY, YEAR, was employed by LEGAL ENTITY, from MONTH DAY, YEAR to Month DAY, YEAR and held the position of ROLE, reporting to the DEPARTMENT.";
      } else if (TestVar2 == true){
        form.textbox.value = "We hereby certify that NAME2, born on MONTH, DAY, YEAR, was employed by LEGAL ENTITY, from MONTH DAY, YEAR to Month DAY, YEAR and held the position of ROLE, reporting to the DEPARTMENT.";
      } else if (TestVar3 == true) {
          form.textbox.value = "We hereby certify that NAME3, born on MONTH, DAY, YEAR, was employed by LEGAL ENTITY, from MONTH DAY, YEAR to Month DAY, YEAR and held the position of ROLE, reporting to the DEPARTMENT.";   
      } else if (TestVar4 == true) {
          form.textbox.value = "We hereby certify that NAME4, born on MONTH, DAY, YEAR, was employed by LEGAL ENTITY, from MONTH DAY, YEAR to Month DAY, YEAR and held the position of ROLE, reporting to the DEPARTMENT."; 
      }else if (TestVar1 == false && TestVar2 == false && TestVar3 == false && TestVar4 == false) {
        form.textbox.value = "";
      }
    }

</script>

Я пытался найти способ показать имя вместо «NAME1» в тексте, но не могу. Любая помощь будет оценена.

Заранее благодарю за помощь, и пусть все вы будете в безопасности в это время.

Ответы [ 3 ]

1 голос
/ 22 марта 2020

Прежде всего, в вашем коде есть некоторые проблемы, например, вы добавили тег <form> в тег <head>, закрыли тег <head> перед тегом <form> и т. Д. c.

Но в любом случае, для получения имени, введенного пользователем, используйте 

var fName = document.getElementById("fName").value;

, и вы можете использовать эту переменную где угодно 

form.textbox.value = "We hereby certify that "+fName+", born on MONTH, DAY, YEAR, was employed by LEGAL ENTITY, from MONTH DAY, YEAR to Month DAY, YEAR and held the position of ROLE, reporting to the DEPARTMENT.";
1 голос
/ 22 марта 2020

Вы можете получить значение для входа двумя способами.

Javascript

var givenName = document.getElementById(gName).value // gName - это идентификатор входа

Jquery

var givenName = $("#gName").val();

Обязательно включите библиотеку jQuery, если вы используете jquery.

0 голосов
/ 22 марта 2020

Если вы хотите получить значение из элемента ввода, вы можете сделать следующее: 

<SCRIPT LANGUAGE="JavaScript">
function testResults (form) {
  var TestVar1 = form.input[0].checked;
  var TestVar2 = form.input[1].checked;
  var TestVar3 = form.input[2].checked; 
  var TestVar4 = form.input[3].checked;
  var userName = document.getElementById('gName').value;  <----
  if (TestVar1 == true) {
    form.textbox.value = "We hereby certify that " + userName + " , born on MONTH, DAY, YEAR, was employed by LEGAL ENTITY, from MONTH DAY, YEAR to Month DAY, YEAR and held the position of ROLE, reporting to the DEPARTMENT.";
  } else if (TestVar2 == true){
    form.textbox.value = "We hereby certify that NAME2, born on MONTH, DAY, YEAR, was employed by LEGAL ENTITY, from MONTH DAY, YEAR to Month DAY, YEAR and held the position of ROLE, reporting to the DEPARTMENT.";
  } else if (TestVar3 == true) {
      form.textbox.value = "We hereby certify that NAME3, born on MONTH, DAY, YEAR, was employed by LEGAL ENTITY, from MONTH DAY, YEAR to Month DAY, YEAR and held the position of ROLE, reporting to the DEPARTMENT.";   
  } else if (TestVar4 == true) {
      form.textbox.value = "We hereby certify that NAME4, born on MONTH, DAY, YEAR, was employed by LEGAL ENTITY, from MONTH DAY, YEAR to Month DAY, YEAR and held the position of ROLE, reporting to the DEPARTMENT."; 
  }else if (TestVar1 == false && TestVar2 == false && TestVar3 == false && TestVar4 == false) {
    form.textbox.value = "";
  }
}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...