在另一个字段中显示html表单的输入值

时间:2020-03-22 06:48:16

标签: javascript html forms

我有一个html表单,其中包含用户填写的字段。我还具有单选按钮,单击该单选按钮可在文本区域中显示特定文本。我想做的是获取用户填写的给定名称值,并在单选按钮触发的文本中显示该值。我添加了到目前为止的代码。

获取个人信息(例如名字和姓氏)的代码。

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

使用单选按钮显示特定文本的代码。


<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 个答案:

答案 0 :(得分:1)

首先,您的代码中存在一些问题,例如,您将<form>标记放在了<head>标记中,在<head>之前关闭了<form>标记标签等。

但是无论如何,为了获得用户输入的名称,使用

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 :(得分:1)

您可以通过两种方式获得输入值。

JavaScript

var givenName = document.getElementById(gName).value // gName是输入的ID

jQuery

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

如果使用的是jquery,请确保包括jQuery库。

答案 2 :(得分:0)

如果要从输入元素中获取值,可以执行以下操作:

class example