滾動到窗體並在按鈕上填充字段單擊

Question

我一直在使用不同語言的想法擺弄，並且我不確定哪種方法最適合。也許jQuery或一個簡單的PHP腳本。我會很感激一些幫助。我不需要在按鈕單擊時創建一個新字段，我只是希望現有的表單字段根據單擊的按鈕輸入文本。 這裏是小提琴：

#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;}

<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"> 
 
\t \t \t <div class="wrap"> 
 
\t \t \t \t <h2 class="sendmessagetext">Get in Touch</h2> 
 
\t \t \t \t <form name="simp_cont" method="post" action="<?=$_SERVER['REQUEST_URI'];?>#cform1" class="contact" onSubmit="return validateForm(this)"> 
 
\t <div class="ribbon"></div> 
 
\t <input class="input" name="captcha" style="position:absolute; left:-9999px;" id="captcha" type="text" /> 
 
\t <input type="text" name="fname" id="name" placeholder="NAME"> 
 
\t <input type="text" name="phone" id="phone" placeholder="PHONE NUMBER"> 
 
\t <input type="text" name="email" id="email" placeholder="EMAIL ADDRESS"> 
 
\t <input type="text" name="footage" id="footage" placeholder="ESTIMATED SQUARE FOOTAGE"> 
 
\t <textarea class="textarea" name="message" placeholder="COMMENTS"></textarea> 
 
\t <input name="form_name" type="hidden" value="contact_form" /> 
 
\t <button type="submit" class="buttoncontact2" name='submit'>SEND MESSAGE</button> 
 
</form> 
 
\t \t \t \t <br><br> 
 
\t \t \t <div class="clear"></div> 
 
\t </div> 
 
</section>

我道歉，這是可怕的無樣式。

我試圖讓它設置得如此基本，當你點擊一個包上的選擇時，它會填充選擇包名稱的「評論」字段。

這裏最好的方法是什麼？

Answer 1

請在下面的工作html中找到。我用過jQuery。我已經刪除了一個不必要的br標記並且也更新了錯誤的HTML

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $(".button2").click(function(){ 
     //console.log($($(".price_number2")[$(this).index()-1]).text()+$(this).index()); 
     $(".textarea").text($($(".price_number2")[$(this).index()-1]).text()); 
    }); 
}); 
</script> 
</head> 
<body> 

<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>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><button type="submit" class="button2" name='submit'>Select</button><br> 
     </li><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><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> 

</body> 
</html> 

Answer 2

jQuery將是最好的方法。

順便說一下，你的html代碼有一些奇怪的行爲。我確實試圖做一個小提琴，但它不可能用你的按鈕，但不知道爲什麼。

但看看這裏，我做了一個例子，你如何能做到這一點。

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

Answer 3

要在窗體的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 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' 
} 

因爲我沒有那麼聰明，但它應該指向你在正確的方向，這可能有一些小錯誤。