如何根据单击的按钮填写 HTML 表单的特定字段答案

【问题标题】：How To Fill-Up a particular field of HTML form Based On The Button Clicked如何根据单击的按钮填写 HTML 表单的特定字段
【发布时间】：2020-09-14 13:12:09
【问题描述】：

我正在制作一个包含 5 种不同家庭服务的静态网站。

它们的价格不同。

每当他们点击“立即预订”按钮时，就会弹出一个预订表单。

现在，我想自动填写表格中的“需要服务”字段。

例如，如果有人单击“Full Home Automation Package”的立即预订按钮，“所需服务”将自动填充该名称。

我如何使用 html 和 JavaScript 来做到这一点

【问题讨论】：

欢迎来到 Stack Overflow！请访问help center，使用tour 了解内容和How to Ask。做一些研究，搜索关于SO的相关主题；如果您遇到困难，请发布您尝试的minimal reproducible example，并使用stack snippet 记录输入和预期输出。

标签： javascript html css web-deployment static-site

【解决方案1】：

你只需要给你的按钮一个你得到你的功能的地方

文本内容并将其粘贴到您的输入中，如下所示：

function MyFunction(){
	var value = document.getElementById("Test").textContent; 
  document.getElementById("test2").value=value;
}

<p id="Test"> Is this what you want ? </p>
<button type="button" onclick="MyFunction()">Click</button><br><br>
<input type = "text" id="test2" name "teste2">

【讨论】：

我不想更改我想要的文本顶部。将文本自动放入表单中。有没有办法做到这一点...？？
检查是否是您想要的，我编辑了 sn-p，运行它并尝试一下，如果您想要，请给我您的反馈。
否...我想将
标签中已经存在的文本复制到输入字段
喜欢还是不点击按钮？
好的，我知道了。完毕。谢谢你的帮助...?

【解决方案2】：

  <HEAD>
    <TITLE>Test</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
      function testResults (form) {
      var TestVar1 = form.input[0].checked;
      var TestVar2 = form.input[1].checked;
        if (TestVar1 == true) {
          form.textbox.value = "Full Home Automation Package";
        } else if (TestVar2 == true){
          form.textbox.value = "Some Other Package";
        } else if (TestVar1 == false && TestVar2 == false) {
          form.textbox.value = "";
        }
      }
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="POST">Choose a Service: <BR>
  <INPUT TYPE="radio" NAME="input" VALUE="red" onChange="testResults(this.form)">Service 1<P>
  <INPUT TYPE="radio" NAME="input" VALUE="blue" onChange="testResults(this.form)">Service 2<P>
  <INPUT TYPE="button" NAME="button" VALUE="Click" onClick="testResults(this.form)">
  <P>Service Package Selected:</P> <INPUT TYPE="text" ID="textbox" NAME="selected" VALUE=""></div><p>

</FORM>
</BODY>

【讨论】：

【解决方案3】：

这是一个简单的例子：

function Change(val){
document.getElementById("test").innerHTML=val;


}

<button type="button" value="book 1" id="myButton" onClick="Change(this.value)">Click</button>
<p id="test"></p>

你可以看到，这个函数用按钮的值填充<p>。你可以对所有（输入，div等）做同样的事情。

【讨论】：