We Keep Coding

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?

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>

To add the product name in the form's teaxtarea, you have to get it from the button clicked.
$(".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() does an upward lookup to find a matching parent.
.find() does a downward lookup to find a matching child.
CodePen. (I removed the partial style which was preventing the button clicks)

jQuery would be the best way.
By the way, you got some strange behaviour on your html code. I did try to make a fiddle, but its impossible with your buttons, but dont know why.
But have a look here, i did make an example, how you can accomplish this.
`https://jsfiddle.net/eed0wh3u/1/`

Create a javascript function called handleSelect or something similar. Add a value to the select buttons. This value will be the thing put into the comments. For example:
`<button type='button' value='OptionName' onclick='handleSelect()'>Option Name!</button>`
The javascript will be kind of like this:
var handleSelect = function(e) {
('#comments').val(e.target.value) //Give your comment box a unique id i.e. 'comments'
}
This might have some minor errors cause I'm not that smart but it should point you in the right direction.

Show only the requested forms using JS

As the image below illustrates, I have two forms and two buttons. Currently all the forms are visible.
How can I only show the requested form "according to the option they have selected (from the blue buttons on the top)"?
So, if the user clicked on the "send an invite" button, the sent an invite form will appear and the blue buttons will disappear "you can go back by clicking the back button".
Is it possible to use dynamic ID dedication using JS to achieve this? as I will have more than 2 options on some pages etc... For example, give the <a class="button button-box"><p>Send an invite</p></a> an id "#send-and-invite-form", it will then find the form that has that ID and show it. Then hide the div that contains those boxes until clicked back.
Here is a simplified HTML structure:
<div>
<a class="button button-box"><p>Send an invite</p></a>
<a class="button button-box"><p>Add manually</p></a>
</div>
<form data-parsley-validate>
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
<form data-parsley-validate>
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>

Keep both the forms hidden at first and give a ID to each <a> and also to the <form>
Then
$("#id-of-btn1").click(function(){
$("#form-1").toggle();
});
and
$("#id-of-btn2").click(function(){
$("#form-2").toggle();
});
EDIT:
This could be a solution to make it completely independent of ID/Classes.
If you give a class to div containing all the <a> then
$(".class-of-div a").click(function(){
var t=$(this).index();
$("body").find("form").hide();
$("body").find("form:eq("+t+")").toggle();
});
This will work for corresponding <a> and <form> only,so make sure that you have them in order.

.show{display:block;}
.hide{display:none;}
<a class="button button-box" id="lnkInvite" ><p>Send an invite</p></a>
<a class="button button-box" id="lnkManually"><p>Add manually</p></a>
<form data-parsley-validate class="hide">Send an Invite Form</form>
<form data-parsley-validate class="hide">Add manually form</form>
<script type="text\javascript">
$().ready(function(){
$("#lnkInvite").click(function(){
/*Toggle the show hide css class*/
});
$("#lnkManually").click(function(){
/*Toggle the show hide css class*/
});
});
</script>

You can achieve this with the help of :target pseudo selector. This is pure CSS solution:
form {
display: none;
}
form:target {
display: block;
}
<div> <a class="button button-box" href="#send-and-invite-form"><p>Send an invite</p></a>
<a class="button button-box" href="#add-manually"><p>Add manually</p></a>
</div>
<form id="send-and-invite-form" data-parsley-validate>
Invite
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required />
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button> <a>Back</a>
</div>
</form>
<form id="add-manually" data-parsley-validate>
Manually
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required />
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button> <a>Back</a>
</div>
</form>
It is also possible to have default tag preselected, however it requires changing order of forms and using tricky selector:
form, form:target ~ #send-and-invite-form {
display: none;
}
#send-and-invite-form, form:target {
display: block;
}
Demo: http://jsfiddle.net/dfsq/5633tu4c/

Simmple solution using js and style attributes.
<html>
<head>
<script>
function showhide1(){
document.getElementById("form1").style.display='block';
document.getElementById("form2").style.display='none';
}
function showhide2(){
document.getElementById("form2").style.display='block';
document.getElementById("form1").style.display='none';
}
</script>
</head>
<body>
<div>
<a class="button button-box" onclick="showhide1()"><p>Send an invite</p></a>
<a class="button button-box" onclick="showhide2()"><p>Add manually</p></a>
</div>
<form data-parsley-validate id="form1" >
<fieldset>
<div>
<input name="" type="email" placeholder="Email address1" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
<form data-parsley-validate id="form2">
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button>
<a>Back</a>
</div>
</form>
<script>
document.getElementById("form2").style.display='none';
document.getElementById("form1").style.display='none';
</script>
</body>
</html>

Keep both forms hidden until the button for each is clicked. Clicking the respective button will show the required form AND hide the button. Click back hides the form and shows the button again.
I implemented for the invite section. You will have to implement for the manual as well, but hopefully this points you in the right direction. Also, I skipped the jQuery, but obviously this is your choice.
CSS
.hidden{
display: none;
}
HTML
<div> <a id="inviteButton" class="button button-box"><p>Send an invite</p></a></div>
<form id="inviteForm" class="hidden">
<fieldset>
<div>
<input name="" type="email" placeholder="Email address" required>
</div>
</fieldset>
<div class="dialog-buttons">
<button class="button-green" type="submit">Submit</button> <a id="backButtonInvite">Back</a></div>
</form>
Javascript
var inviteButton = document.querySelector("#inviteButton");
var inviteForm = document.querySelector("#inviteForm");
var backButtonInvite = document.querySelector("#backButtonInvite");
inviteButton.addEventListener("click", function () {
inviteForm.classList.toggle("hidden");
this.classList.toggle("hidden");
});
backButtonInvite.addEventListener("click", function () {
inviteForm.classList.toggle("hidden");
inviteButton.classList.toggle("hidden");
});
Here is the fiddle.

ng-click doesnt work in input type submit

I write a angular application that has a form with input type submit but ng-click doesnt work
<div ng-show="!addDate && tk.doTime != null && tk.test2" class="change-item-btn" ng-click="addDate = true"> <span class="add-on"><i class="icon-time"></i></span>{{tk.doTime}}</div>
<form class="dateForm" ng-show="addDate" style="background-color:#dbf8f8;color: #152626; padding: 20px 20px 50px; margin-top:10px;" >
<div style="display:inline-block;width:50%;">
delivery
<div class="control-group">
<div class="controls">
<div class="input-append">
<input name="date" class="input-small datepicker form-control" placeholder="date" type="text" style="color:black" />
</div>
</div>
</div>
</div>
<div style="display:inline-block;width:50%;">
delivery time
<div class="input-append bootstrap-timepicker">
<input name="clock" style="color:black;direction:ltr;text-align:center" class=" input-small timepicker form-control" type="text">
</div>
</div>
<button ng-click="addDate = false" class="sbmtInput">cancel</button>
<input name="submit" type="submit" ng-click="deleting()" value="action" class="sbmtInput addDateTo" rel="{{tk.id}}-{{index}}-{{list.id}}" />
</form>
deleting function is
$scope.deleting= function(){
$scope.addDate = false;
}
addDate value change to false but doesnt have any effect on html view
where i go wrong?

This is because ng-click is in div with ng-show and in submit input as well.
When you click the event is done twice and in divs ng-click addDate is set to true again.
In order to make this work, you should prevent propagation in input.
To do this, use stopPropagation method, available in your scope $event object.
So the input code should be:
<input name="submit" type="submit" ng-click="deleting(); $event.stopPropagation();" value="action" class="sbmtInput addDateTo" rel="{{tk.id}}-{{index}}-{{list.id}}" />

Trouble with Submitting Custom Data to a Login Form

I have a login form that I would like to send custom POST values to. The URL looks like this: site.com/administrator/index.php
There is a login form on that page that looks like this:
function setFocus() {
document.login.username.select();
document.login.username.focus();
}
<body onload="javascript:setFocus()">
<div id="border-top" class="h_green"></div>
<div id="content-box">
<div class="padding">
<div id="element-box" class="login">
<div class="t"></div>
<div class="m">
<h1></h1>
<dl id="system-message"></dl>
<div id="section-box">
<div class="t"></div>
<div class="m">
<form id="form-login" style="clear: both;" name="login" method="post" action="index.php">
<p id="form-login-username">
<label for="modlgn_username"></label>
<input id="modlgn_username" class="inputbox" type="text" size="15" name="username"></input>
</p>
<p id="form-login-password"></p>
<p id="login-error-message"></p>
<p></p>
<p id="form-login-lang" style="clear: both;"></p>
<div class="button_holder"></div>
<div class="clr"></div>
<input type="submit" value="Login" style="border: 0; padding: 0; margin: 0; width: 0px; height: 0px;"></input>
<input type="hidden" value="com_login" name="option"></input>
<input type="hidden" value="login" name="task"></input>
<input type="hidden" value="1" name="3229cc4ec7d0ca37d4f0ff08ebca8251"></input>
I analyzed the requests that the browser was making when submitting a form with httpFox, and here is the result( this is the POST data when putting in das as the username and add as password):
username=das&passwd=asd&lang=&option=com_login&task=login&3229cc4ec7d0ca37d4f0ff08ebca8251=1
This is not an ordinary login box, and so, I do not know how to proceed. What I would like to do is be able to send requests from my browser as if I was submitting the form, but I am not sure what the final query looks like or where to send it.
Any help is appreciated.

Ajax serialize() method is not reading all data fields of html form

I'm trying to send the form data of my web page using jquery get() method. But when I submit the form only few of the field data where sent to the server.
Form:
<form class="form-horizontal" id="addpost" method="GET" action="">
<div class="control-group">
<label class="control-label" for="form-field">Post Title</label>
<div class="controls">
<input type="text" id="form-field" placeholder="Post Title" name="Post-title" value="" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="form-field-11">Content Here</label>
<div class="controls">
<textarea name="post-content" value="" class="autosize-transition span12" id="form-field-11" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 67px;"></textarea>
</div>
</div><!-- Insert Image Code -->
<div class="control-group">
<div class="widget-main">
<div class="controls">
<div class="ace-file-input">
<input id="id-input-file-2" type="file">
<a class="remove" href="#"></a>
</div>
</div>
<div class="controls">
<div class="ace-file-input ace-file-multiple">
<input id="id-input-file-3" type="file" multiple="">
<a class="remove" href="#">
<i class="icon-remove"></i>
</a>
</div>
<label>
<input id="id-file-format" type="checkbox" name="file-format">
<span class="lbl"> Allow only images</span>
</label>
</div>
</div>
</div><!-- Insert Image Code -->
<div class="space-4"></div>
<div class="control-group">
<label class="control-label" for="form-field-tags">Tag input</label>
<div class="controls">
<input id="form-field-tags" type="hidden" placeholder="Enter tags ..." value="Tag Input Control" name="tags">
</div>
</div>
<div class="space-4"></div>
<div class="control-group">
<label class="control-label" for="form-field-select-3">Select Category</label>
<div class="controls">
<label for="form-field-select-3">Chosen</label>
<select class="chzn-select" id="form-field-select-3" data-placeholder="Choose a Category...">
<option value="">
</option><option value="Blog">Blog
</option><option value="News Letter">News Letter
</option></select>
</div>
</div>
<div class="control-group" style="float:left; margin-right:25px">
<div class="controls"><button type="submit" class="btn btn-info">
<i class="icon-ok bigger-110"></i>
<input type="submit" value="" id="posubmit" style="opacity:0"/>Submit</button>
<button type="reset" class="btn"><i class="icon-undo bigger-110"></i>Reset</button>
</div>
</div>
<div id="resp" style="float:left; margin-top:5px">
<img id="loading" style="visibility:hidden;" src="assets/img/ajax-load.gif" width="16" height="16" alt="loading" />
</div>
</form>
JavaSccript:
$('#addpost').submit(function(e){
if(use_ajax)
{
$('#loading').css('visibility','visible');
$.get('test.php',$(this).serialize(),
function(data){
if(parseInt(data)==-1)
$.validationEngine.buildPrompt("#resp","* Please ensure all fields are filled.","error");
else
{
$("#resp").show('slow').after('<p id="resp-mes" style=" color:#000000; text-decoration: bold;">Success....</p>');
}
$('#loading').css('visibility','hidden');
setTimeout( "jQuery('#resp').hide('slow');",3000 );
setTimeout( "jQuery('#resp-mes').hide('slow');",5000 );
});
}
e.preventDefault();
}
)};
In this only 3 field values where sent to server.
That is Post-title, post-content and tags
I don't know why this happening.
Any help would be appreciated.

you have two issues.
Ajax and serialize upload doesn't work with file upload. (Read this question and answer for async upload)
jquery form serialize needs a name attribute. your select box (form-field-select-3) doesn't have a name attribute.
following is a note in jquery serialize documentation page -
Note: Only "successful controls" are serialized to the string. No
submit button value is serialized since the form was not submitted
using a button. For a form element's value to be included in the
serialized string, the element must have a name attribute. Values from
checkboxes and radio buttons (inputs of type "radio" or "checkbox")
are included only if they are checked. Data from file select elements
is not serialized.

Its because you have missed "name" attribute in select element
<select class="chzn-select" id="form-field-select-3" name="form-field-select-3" data-placeholder="Choose a Category...">
I have checked in my local, and now this is working fine.
Please check and let me know if any issue.
Thanks

I see that attrbute name="" is required and some of the input elems are missing those. so you can try placing this attribute and see if this solves the issue:
<select class="chzn-select" name="your-elem-name">
//--------------------------^^^^^^^^^^^^^^^^^^^^^-----try placing the name attr

ok of this entire form, only four elements may get sent through if all four are populated/selected from a higher index than zero;
the ones with these names;
"tags"
"file-format"
"post-content"
"Post-title"
this is because those are the only tags with a name attribute defined.
please give all the elements you want to post through to the server a name attribute with the post index you want to use to access them with.