Question

我一直在尝试使用不同语言的想法，而且我不确定哪种方法效果最好。也许是jQuery或简单的PHP脚本。我很感激一些帮助。我不需要在按钮点击时创建新字段，我只想要一个现有的表单字段来输入文本，具体取决于单击的按钮。这是小提琴：

＆＃13;

#contactform1 .sendmessagetext{padding-top:50px;text-transform:none;padding-bottom:35px;}
#contactform1 form{width:75%; margin:0 auto;}
#contactform1 form .ribbon {background: url(../images/contactribbon.png) 0 0 no-repeat transparent;width: 575px;height: 303px;position: absolute;right: 0;top: 175px;}
#leftblock{margin:-72px 0 0 0;}
#centerblock{margin:-123px 0px 0px 15px;}
#rightblock{margin:-71px 0px 0px 15px;}
.pricing_table2{line-height: 150%;font-size: 12px;margin: 0 auto;width: 75%;max-width: 800px;padding-top: 10px;}

.price_block2{text-align: center;width: 100%;color: #fff;float: left;list-style-type: none;transition: all 0.25s;position: relative;box-sizing: border-box;margin-bottom: 10px;border-bottom: 1px solid transparent;}

.pricing_table2 h3{text-transform: uppercase;padding: 5px 0;background: #333;margin: -10px 0 1px 0;}

.price3{display: table;background-image: url("../images/deepblue.jpg");width: 100%;height: 100px; border-radius:5px; background-size:cover;}
.price4{display: table;background-image: url("../images/trueblue.jpg");width: 100%;height: 130px; border-radius:5px; background-size:cover;}
.price5{display: table;background-image: url("../images/bluemove.jpg");width: 100%;height: 100px; border-radius:5px; background-size:cover;}
.price_figure2{font-size: 24px;text-transform: uppercase;vertical-align: middle;display: table-cell;}
.price_number2{font-weight: bold;display: block; text-transform:none; font-size:calc(0.5vw + 1.5vh + 1vmin);}
.price_tenure2{font-size: 11px;}
.price60{font-size:49px;}
.features2{background: #ffffff;color: #000; margin:0;}
.features2 li{padding: 8px 15px;font-size: 14px;list-style-type: none; font-family:"gilroylight"; padding-top:35px;}
.action_button2{text-decoration: none;color: #fff;font-weight: bold;border-radius: 5px;background: linear-gradient(#666, #333);padding: 5px 20px;font-size: 11px;text-transform: uppercase;}

＆＃13;

<ul class="pricing_table2">
  <li id="leftblock" class="price_block2">
    <div class="price3">
      <div class="price_figure2">
        <span class="price_number2">Deep Blue</span>
      </div>
    </div>
    <ul class="features2">
      <li>First time, top to bottom comprehensive cleaning. Gets rid of dirt, grime and general all around gunk. Your home is returned  to a manageable level of clean.<br><br><button type="submit" class="button2" name='submit'>Select</button><br>
      </li><span class="packagebottom">* An initial cleaning fee plus the regular fee is charged on the first visit.</span></li>
    </ul>
  </li>
  <li id="centerblock" class="price_block2">
    <div class="price4">
      <div class="price_figure2">
        <span class="price_number2">True Blue</span>
      </div>
    </div>
    <ul class="features2">
      <li>Our regular maintenance cleaning. We follow our checklist to the letter. You may choose weekly, bi-weekly or monthly cleanings. If you would like a custom cleaning arrangement, just let us know and we will gladly accommodate your preferences.<br><br><button type="submit" class="button2" name='submit'>Select</button><br>
      </li><span class="packagebottom">* Client must have a Deep Blue cleaning first.</span></li>
    </ul>
  </li>
  <li id="rightblock" class="price_block2">
    <div class="price5">
      <div class="price_figure2">
        <span class="price_number2">Blue Move</span>
      </div>
    </div>
    <ul class="features2">
      <li>Our move out / empty house cleaning. Say goodbye to your old house, apartment or condo and hello to your new one with a copious cleaning. Just open the front door and we will take care of everything.<br><br><br>
      <button type="submit" class="button2" name='submit'>Select</button></li>
    </ul>
  </li>
</ul>

<section id="contactform1" class="cform">
			<div class="wrap">
				<h2 class="sendmessagetext">Get in Touch</h2>
				<form name="simp_cont" method="post" action="<?=$_SERVER['REQUEST_URI'];?>#cform1" class="contact" onSubmit="return validateForm(this)">
	<div class="ribbon"></div>
	<input class="input" name="captcha" style="position:absolute; left:-9999px;" id="captcha" type="text" />
	<input type="text" name="fname" id="name" placeholder="NAME">
	<input type="text" name="phone" id="phone" placeholder="PHONE NUMBER">
	<input type="text" name="email" id="email" placeholder="EMAIL ADDRESS">
	<input type="text" name="footage" id="footage" placeholder="ESTIMATED SQUARE FOOTAGE">
	<textarea class="textarea" name="message" placeholder="COMMENTS"></textarea>
	<input name="form_name" type="hidden" value="contact_form" />
	<button type="submit" class="buttoncontact2" name='submit'>SEND MESSAGE</button>
</form>
				<br><br>
			<div class="clear"></div>
	</div>
</section>

＆＃13;

我道歉，这非常简单。

我试图让它设置得如此基本当你点击一个包上的选择时，它会填充＆＃34;评论＆＃34;选择包名称的字段。

这里最好的方法是什么？

Answer 1

请在下面找到工作的HTML。我用过jQuery。我删除了一个不必要的br标签，并且还更新了损坏的HTML

{{1}}

Answer 2

要在表单的teaxtarea中添加产品名称，您必须从button点击后获取产品名称。

$(".button2").on("click",function(){
  // Get the package name
  var packageName = $(this).closest(".price_block2").find(".price_number2").text();
  // add it to the form's textarea
  $("#contactform1 textarea").text("Product selected: "+packageName);
});

.closest()执行向上查找以查找匹配的父级 .find()执行向下查找以查找匹配的子项。

CodePen。 （我删除了阻止按钮点击的部分样式）

Answer 3

jQuery是最好的方式。

顺便说一下，你的html代码有一些奇怪的行为。我确实试图制作一个小提琴，但你的按钮不可能，但不知道为什么。

但是看看这里，我确实做了一个例子，你怎么能做到这一点。

`https://jsfiddle.net/eed0wh3u/1/`

Answer 4

创建一个名为handleSelect的javascript函数或类似的东西。为选择按钮添加值。这个值将是注释中的内容。例如：

`<button type='button' value='OptionName' onclick='handleSelect()'>Option Name!</button>`

javascript会有点像这样：

var handleSelect = function(e) {
    ('#comments').val(e.target.value) //Give your comment box a unique id i.e. 'comments'
}

这可能会有一些小错误，因为我不是那么聪明，但它应该指向正确的方向。

滚动到表单并在按钮上填充字段单击

4 个答案: