Jonathan Delconte Jonathan Delconte - 1 year ago 40
jQuery Question

Scroll to Form and Fill a Field on Button Click

I've been fiddling with an idea using different languages, and I'm not sure what would work best. Maybe jQuery or a simple PHP script. I'd appreciate some help. I don't need a new field to be created on button click, I just want an existing form field to input text depending on the button clicked.
Here is the fiddle:



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





My apologies it's horribly unstyled.

I'm trying to have it set so basically when you click select on a package, it fills the "Comments" field with the package name selected.

What would be the best approach to take here?

Answer Source

Kindly find below working html. I have used jQuery. I have removed one unnecessar br tag and have also updated broken 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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download