We Keep Coding

How can I record the value of a bootstrap dropdown menu after submit is pressed?

My form has one dropdown menu and 4 text input boxes. When the form is submitted, I need to console.log all the values. So far no problem with the text boxes but I can't record the number selected on the drop down menu. Can someone please help thanks in advance.
This is my html:
<div class="container-of-forms">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
2
<span class="caret"></span>
</button>
<ul id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<!-- Text Input Boxes -->
<div class="container-inner">
<input class="text-input-box" id="choice1" type="text" name="" value="" placeholder="Choice 1"> <br>
<input class="text-input-box" id="choice2" type="text" name="" value="" placeholder="Choice 2"> <br>
<input class="text-input-box invisible threeChoices" id="choice3" type="text" name="" value="" placeholder="Choice 3"> <br>
<input class="text-input-box invisible fourChoices" id="choice4" type="text" name="" value="" placeholder="Choice 4">
</div>
</div>
And this is the javascript:
document.getElementById("submit").addEventListener("click", function(e) {
e.preventDefault();
var choice1 = $("#choice1").value;
var choice2 = $("#choice2").value;
var choice3 = $("#choice3").value;
var choice4 = $("#choice4").value;
var numberOfChoices = $("#dropdownMenu").value;
console.log(numberOfChoices);}
But it is not printing the numberOfChoices...please help...thanks

The issue is that we're attempting to access the value of a button which has no value attribute set.
We might suggest setting the value, but in this case as you're using a third-party control, let's just access the text inside the button instead:
var numberOfChoices = $("#dropdownMenu").text();
Note that text() will return all text of the selected node and all descendents, which in this case includes the caret span which has no inner text, thus returning just the selected "value" from the bootstrap dropdown.

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 the values of dropdown button in a text box in html

enter image description herei want to display the strings in the dropdown button in a text box one after the other by clicking on the dropdown. I have tried but it seems not to work. I also do not want the user to be able to type input, only click and display. Here's my code
var mytextbox = document.getElementById('display');
var mydropdown = document.getElementById('dropdown0');
mydropdown.onchange = function() {
mytextbox.value = this.value; //to change the value
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form method="POST" action="addprocess.php">
<fieldset>
<legend align="center">Semester Courses</legend>
<br>
<br>
<div class="row">
<label style="font-family: verdana; font-size: 25px;">   BIOLOGY </label>
<div class="col-lg-4">
<div class="input-group">
<input type="text" id="display" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-btn">
<button type="button" id="dropdown0" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Click to Select
</button>
<div class="dropdown-menu dropdown-menu-right">
<option class="dropdown-item" value="BIOL 8803">BIOL 8803</option>
<div role="separator" class="dropdown-divider"></div>
<option class="dropdown-item" value="BIOL 8805">BIOL 8805</option>
<div role="separator" class="dropdown-divider"></div>
<option class="dropdown-item" value="BIOL 8807">BIOL 8807</option>
<div role="separator" class="dropdown-divider"></div>
<option class="dropdown-item" option value="BIOL 8809">BIOL 8809</option>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<input name="submit" type="submit" value="click to submit">
<input name="reset" type="reset" value="Reset">
</fieldset>
</form>
I would really appreciate your help, i do not know much of this, a part of it i copied from bootstrap website
images of what my code looks like when i run it on browser

With a very quick edit, you can accomplish this. First, we add 'readonly' to your text field. Then, we get rid of the weird button, change the div to a select, and give it the dropdown0 id:
<form method = "POST" action = "addprocess.php">
<fieldset>
<legend align="center">Semester Courses</legend><br><br>
<div class="row"><label style="font-family: verdana; font-size: 25px;">   BIOLOGY </label>
<div class="col-lg-4">
<div class="input-group">
<input type="text" id="display" class="form-control" aria-label="Text input with dropdown button" readonly>
<div class="input-group-btn">
<select id="dropdown0" class="dropdown-menu dropdown-menu-right">
<option class="dropdown-item" value="BIOL 8803">BIOL 8803</option>
<div role="separator" class="dropdown-divider"></div>
<option class="dropdown-item" value="BIOL 8805">BIOL 8805</option>
<div role="separator" class="dropdown-divider"></div>
<option class="dropdown-item" value="BIOL 8807">BIOL 8807</option>
<div role="separator" class="dropdown-divider"></div>
<option class="dropdown-item" option value="BIOL 8809">BIOL 8809</option>
</select>
</div>
</div>
</div>
</div><br><br>
<input name="submit" type ="submit" value="click to submit">
<input name="reset" type ="reset" value="Reset">
</fieldset>
</form>
<script type="text/javascript">
var mytextbox = document.getElementById('display');
var mydropdown = document.getElementById('dropdown0');
mydropdown.onchange = function(){
mytextbox.value = this.value; //to change the value
}
</script>
See it in action here: https://jsfiddle.net/3axnv2y9/

Ebi, this answer is edited over what I submitted previously. It is IMPORTANT that I mention that the majority of the code I used comes from the answer that "Grey" had provided before me. Therefor, if you or anybody else wants to upvote this answer, please upvote "Grey's" answer as well or instead.
That said, based off of the screenshots you provided, I think the answer is a combination of "Grey's" functionality, with my "style" tag.
Just like before...
FIRST - I will provide you with a couple of screenshots of my results. The first shot will be with the drop-down menu closed and the second shot will be with the drop down menu open.
SECOND - I will provide you with the code I used, which is HEAVILY influenced (as in copied and pasted) by the answer "Grey" provided.
THIRD - I will explain the code.
Here goes....
******* THE SCREEN SHOTS *******
******* THE CODE *******
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Semester Course</title>
<style>
.form-control {
position: relative;
float: left;
}
.dropdown-menu {
height: 22px;
background: blue;
color: white;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}
.dropdown-item {
background: white;
color: black;
}
</style>
</head>
<body>
<form method = "POST" action = "addprocess.php">
<fieldset>
<legend align="center">Semester Courses</legend><br><br>
<div class="row"><label style="font-family: verdana; font-size: 25px;">   BIOLOGY </label>
<div class="col-lg-4">
<div class="input-group">
<input type="text" id="display" class="form-control" aria-label="Text input with dropdown button" readonly>
<div class="input-group-btn">
<select id="dropdown0" class="dropdown-menu dropdown-menu-right">
<option class="dropdown-item" value="BIOL 8803">BIOL 8803</option>
<div role="separator" class="dropdown-divider"></div>
<option class="dropdown-item" value="BIOL 8805">BIOL 8805</option>
<div role="separator" class="dropdown-divider"></div>
<option class="dropdown-item" value="BIOL 8807">BIOL 8807</option>
<div role="separator" class="dropdown-divider"></div>
<option class="dropdown-item" option value="BIOL 8809">BIOL 8809</option>
</select>
</div>
</div>
</div>
</div><br><br>
<input name="submit" type ="submit" value="click to submit">
<input name="reset" type ="reset" value="Reset">
</fieldset>
</form>
<script type="text/javascript">
var mytextbox = document.getElementById('display');
var mydropdown = document.getElementById('dropdown0');
mydropdown.onchange = function(){
mytextbox.value = this.value; //to change the value
}
</script>
</body>
</html>
******* EXPLANATION *******
As in my unedited answer and also the answer from "Grey", you do still needed to use the HTML "select" tag. The "select" tag allows you to have a drop-down menu with as many selections as you like. However, you will notice that in the "head" of the html file I left a "style tag" with some styling properties.
I believe that you commented that you wanted a button and so I styled the selection box next to the text box in a style that approximates the screenshot you sent. Then, I gave the text box a position of "relative" and floated it left. This brought the selection box next to the text box.
The javascript functionality that "Grey" provided is preserved and so you have end up with code that acts like what is depicted in your screenshots and has the relative styling of it as well. If the styling was the main issue, then you just need to mess around with the CSS code that I provided in the header.
If it is a case of you not being too sure about how to code in CSS, I would recommend one of 2 approaches. They are:
1) Visit this link: www.w3schools.com/css/css_form.asp
You may have already heard of this website, but it's great and I learned a lot from it and still use it as reference sometimes.
2) If the example you provided in your screenshots came from a working website, you can actually use Google Developer Tools to look at the code the author(s) of that site used and you can copy what they did and learn by reverse engineering what they did. That's how I learned how to do a lot of what I can do now.
I hope we're getting closer to what you're looking for.

jquery changing bootstrap label text dynamically

I'm using code from this fiddle http://jsfiddle.net/kcpma/18/
what i'm trying to achieve is to make appear or unhide a bootstrap label depending the value selected from the button, the text from the label should change, but only works with html input form like text, this doesn't look bad but i want to use bootstrap label to make look like filter tags.
my script
<script>
$('#demolist li').on('click', function(){
var val=$(this).text();
$('#datebox').val($(this).text());
if(val=="A"){ // if certain filter is selected the label should appear
$('#filter').show();
$('#filter').val("AaA");
}else{ // else the tag shouldn't be visible
$('#filter').hide();
}
});
</script>
the actual html working with text input
<br /> <br />
<div class="container">
<div class="col-sm-8">
<div class="input-group">
<input type="TextBox" ID="datebox" Class="form-control" ></input>
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="demolist" class="dropdown-menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>
</div>
</div>
<br>
<h4 ><span class="label label-primary" >×</span></h4>
<p><input type="text" class="form-control" ID="filter" style="width:100px" disabled></p>
</div>
the html i tried but it doesn't work
1)
<h4 ><span class="label label-primary" ID="filter">some filter</span></h4>
2)
<h4 ID="filter"><span class="label label-primary">some filter</span></h4>
any hints/ideas?

$.val only works on input elements (including select). If you want to set the text, you could just do:
<h4 ><span class="label label-primary" ID="filter">some filter</span></h4>
and
$('#filter').html("AaA");
or
$('#filter').text("AaA");
http://jsfiddle.net/kcpma/261/

jQUERY drop down wont, close when i click it, unless i have a # in my anchor tag.it stays dropped down,nothing happens when i click

sorry i do want tag to link to login.
only the register and login page is suppose to drop down. the register code is the same. this is the html code for the page
<header id ="logo_nav">
<img class="logo" src="logo.png" width=" 382" height="122 " alt="voucher">
<ul id= "main_nav">
<li> Home </li>
<li id ="login">
<a id="login-trigger" href="login.php">
Login here <span> ▼ </span>
</a>
<div id="login-content">
<form action = "log.php" method="post">
<label id="user"> Username </label>
<br/>
<input id="inputbox"type="text" name="username">
<br/>
<label id="pass"> Password </label>
<br/>
<input id="pinput" type="password" name="password"> <br/>
<input id="submit" type="submit" value ="log in">
</form>
Below is the jquery code thats not allowing me to drop down and
close.
$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});

You have to add href="#", since you don't want tag to link anywhere.