javascript - show input value of html form in another field

I have a html form with fields that are filled in by the user. I also have radio buttons that when clicked show a specific piece of text in a textarea. What I want to do is to take the given name value filled in by the user and display that value within the text that is triggered by the radio button. I've added the code I have so far.

Code that takes personal information like first and last names.

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

Code that uses radio buttons to show a specific piece of text.


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

And my javascript code for the text that is displayed when clicking on a radio button.

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

I've tried to find a way to show the given name in place of "NAME1" in the piece of text but I can't. Any help would be appreciated.

Thank you in advance for your help and may you all stay safe during these times.

Code that takes personal information like first and last names.

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

Code that uses radio buttons to show a specific piece of text.


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

And my javascript code for the text that is displayed when clicking on a radio button.

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

I've tried to find a way to show the given name in place of "NAME1" in the piece of text but I can't. Any help would be appreciated.

Thank you in advance for your help and may you all stay safe during these times.

Share Improve this question edited Mar 22, 2020 at 7:23 asked Mar 22, 2020 at 6:48 fcb12 151 gold badge1 silver badge6 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

First of all, there are some issues in your code, for example you put the <form> tag in the <head> tag, you closed the <head> tag before <form> tag, etc.

But anyway, for getting the name entered by user use

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

and you can use this variable anywhere

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.";

You can get value of an input by two ways.

Javascript

var givenName = document.getElementById(gName).value // gName is id of the input

Jquery

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

Make sure to include jQuery library if you are using jquery.

If you want to grab a value from an input element, you can do the following:

<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 = "";
  }
}

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745105049a4611506.html

javascript - show input value of html form in another field - Stack Overflow

3 Answers 3

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - show input value of html form in another field - Stack Overflow

3 Answers 3

相关推荐