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

Question

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

这些有不同的价格。

只要他们点击 "book now" 按钮，就会弹出一个预订表格。

现在，我想自动填写表单中的 "service required" 字段。

例如，如果有人点击 "Full Home Automation Package" 的立即预订按钮，"sevice required" 将自动填充该名称。

如何使用 html 和 JavaScript

Answer 1

这是一个简单的例子：

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等）做同样的事情。

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

Answer 3

您只需要为您的按钮提供一个功能，您可以在其中获取

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

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

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

How To Fill-Up a particular field of HTML form Based On The Button Clicked

html

javascript

css

web-deployment

static-site