Basically, I have an select option
<div class="col-lg-6 pl-2">
<div class="form-input-div">
<select onchange="addForm()" class="form-control">
<option>Number of guest to join</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
What I want is to add a new form/input field based on the option. For example I will select 4 in the menu it will add 4 input fields and when I changed it to 2 It will delete the other two and so on..
Here is my UI with 2 static input fields.
The two static input fields element
<div class="row" id="guestDetails">
<div class="col-lg-6">
<h5>Guest Detail 1</h5>
<div class="form-input-div">
<input type="text" class="form-control" placeholder="Enter Name">
</div>
<div class="form-input-div">
<input type="text" class="form-control" placeholder="Enter Phone">
</div>
<div class="form-input-div">
<input type="text" class="form-control" placeholder=" NRIC (Last 4 Digits)">
</div>
<div class="form-input-div">
<input type="text" class="form-control" placeholder="Enter Email">
</div>
<div class="form-input-div address-guest">
<textarea class="form-control" placeholder="Enter Mailing Address"></textarea>
</div>
</div>
<div class="col-lg-6">
<h5>Guest Detail 2</h5>
<div class="form-input-div">
<input type="text" class="form-control" placeholder="Enter Name">
</div>
<div class="form-input-div">
<input type="text" class="form-control" placeholder="Enter Phone">
</div>
<div class="form-input-div">
<input type="text" class="form-control" placeholder=" NRIC (Last 4 Digits)">
</div>
<div class="form-input-div">
<input type="text" class="form-control" placeholder="Enter Email">
</div>
<div class="form-input-div address-guest">
<textarea class="form-control " placeholder="Enter Mailing Address"></textarea>
</div>
</div>
</div>
</div>
EDIT:
What i tried is this
<script>
function addForm(){
// alert ('hello')
var element = document.getElementById('guestDetails');
element.innerHTML += `<div class="col-lg-6">
<h5>Guest Detail 1</h5>
<div class="form-input-div">
<input type="text" class="form-control " placeholder="Enter Name">
</div>
<div class="form-input-div">
<input type="text" class="form-control " placeholder="Enter Phone">
</div>
<div class="form-input-div">
<input type="text" class="form-control " placeholder=" NRIC (Last 4 Digits)">
</div>
<div class="form-input-div">
<input type="text" class="form-control " placeholder="Enter Email">
</div>
<div class="form-input-div address-guest">
<textarea class="form-control " placeholder="Enter Mailing Address"></textarea>
</div>
</div>`;
}
</script>
But I dont know how to remove other rows for example I will change the value from 4 to 1
You can use for-loop and run that loop till value of select-box and inside this loop just append new divs .
Demo Code :
function addForm(values) {
var element = document.getElementById('guestDetails');
element.innerHTML = "" //empty
//loop till select values
for (var i = 1; i <= parseInt(values); i++) {
element.innerHTML += `<div class="col-lg-6">
<h5>Guest Detail ${i}</h5>
<div class="form-input-div">
<input type="text" class="form-control " placeholder="Enter Name">
</div>
<div class="form-input-div">
<input type="text" class="form-control " placeholder="Enter Phone">
</div>
<div class="form-input-div">
<input type="text" class="form-control " placeholder=" NRIC (Last 4 Digits)">
</div>
<div class="form-input-div">
<input type="text" class="form-control " placeholder="Enter Email">
</div>
<div class="form-input-div address-guest">
<textarea class="form-control " placeholder="Enter Mailing Address"></textarea>
</div>
</div>`;
}
}
<div class="col-lg-6 pl-2">
<div class="form-input-div">
<!--pass here value-->
<select onchange="addForm(this.value)" class="form-control">
<option>Number of guest to join</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
<div class="row" id="guestDetails">
</div>
You can use jQuery Toggle Function. Unless you can make your own toggle using pure javascript
function elementBlock(elmOne,elmTwo,elmThree) {
document.getElementById("one").style.display = elmOne
document.getElementById("two").style.display = elmTwo
document.getElementById("three").style.display = elmThree
}
function toogleDiv(val) {
if (val == 1) {
elementBlock('block','none','none')
}else if (val == 2) {
elementBlock('none','block','none')
}else if (val == 3) {
elementBlock('none','none','block')
}
}
document.getElementById("selectOpt").addEventListener('change', function(e) {
toogleDiv(e.target.value);
})
#one, #two, #three {
display: none;
}
<select class="form-control" id="selectOpt">
<option>Number of guest to join</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div>
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
</div>
First you have to Display None all of your form input
Then Based On you select value you have to change the display none to block
I just created it for three div You can include as many as div you want
Related
I am trying to get the value of an input element. The element is in a modal and the modal data is populated with different values depending on the button I click to open the modal.
var modalBody = document.getElementsByClassName("modal-body");
for(var i = 0; i < modalbody.length; i++) {
var mac = modalBody.item(i).getElementsByTagName('div')[2].getElementById("mac-name").value;
alert(mac);
}
error: TypeError:
modalBody.item(...).getElementsByTagName(...)[2].getElementById is not
a function
I also tried with document.getElementById("mac-name").value; but that returns blank
<form method="post">
<div class="modal-body">
<div class="form-group">
<label for="station-name" class="col-form-label">ID:</label>
<input class="form-control" id="station-id" name="edit--id" required="" type="text" hidden="">
<input class="form-control" id="station-name" name="edit--name" required="" type="text">
</div>
<div class="form-group">
<label for="profile-name" class="col-form-label">Profile:</label>
<select type="text" class="form-control" id="profile-name" name="edit-profile" required="">
<option>name1</option>
<option>name2</option>
</select>
</div>
<div class="form-group">
<label for="mac-name" class="col-form-label">MAC Address:</label>
<input class="form-control" id="mac-name" name="edit-mac" required="" type="text">
</div>
</div>
</form>
Instead of using getElementsByClassName and then running the following on each element:
var mac = modalBody.item(i).getElementsByTagName('div')[2].getElementById("mac-name").value;
You can use instead use querySelectorAll and pass in .modal-body div #mac-name. This will select all elements with the id mac-name inside a div within an element with the class modal-body. You can use the results of this to then loop over each element and get each value:
var macs = document.querySelectorAll('.modal-body div #mac-name');
See example below:
var macs = document.querySelectorAll('.modal-body div #mac-name');
for (var i = 0; i < macs.length; i++) {
var mac = macs[i].value;
console.log(mac);
}
<form method="post">
<div class="modal-body">
<div class="form-group">
<label for="station-name" class="col-form-label">ID:</label>
<input class="form-control" id="station-id1" name="edit--id" required="" type="text" hidden="">
<input class="form-control" id="station-name1" name="edit--name" required="" type="text">
</div>
<div class="form-group">
<label for="profile-name" class="col-form-label">Profile:</label>
<select type="text" class="form-control" id="profile-name1" name="edit-profile" required="">
<option>name1</option>
<option>name2</option>
</select>
</div>
<div class="form-group">
<label for="mac-name" class="col-form-label">MAC Address:</label>
<input class="form-control" id="mac-name" name="edit-mac" value="Addr 1" required="" type="text">
</div>
</div>
<div class="modal-body">
<div class="form-group">
<label for="station-name" class="col-form-label">ID:</label>
<input class="form-control" id="station-id2" name="edit--id" required="" type="text" hidden="">
<input class="form-control" id="station-name2" name="edit--name" required="" type="text">
</div>
<div class="form-group">
<label for="profile-name" class="col-form-label">Profile:</label>
<select type="text" class="form-control" id="profile-name2" name="edit-profile" required="">
<option>name1</option>
<option>name2</option>
</select>
</div>
<div class="form-group">
<label for="mac-name" class="col-form-label">MAC Address:</label>
<input class="form-control" id="mac-name" name="edit-mac" value="Addr 2" required="" type="text">
</div>
</div>
</form>
I’m a beginner with javascript and I don’t know if what I’d like to do is possible.
I have a page with a form, like this
<form class="list" id="myForm">
<div class="row" id="company_1">
<div class="form-field">
<label>Title1</label>
<input name="title1" id="title1" type="text" value="" size="40" aria-required="true">
</div>
</div>
<div class="form-field">
<label>Title2</label>
<input name="title2" id="title2" type="text" value="" size="40" aria-required="true">
</div>
</div>
<div class="row" id="company_2">
<div class="form-field">
<label>Title3</label>
<input name="title3" id="title3" type="text" value="" size="40" aria-required="true">
</div>
</div>
<div class="form-field">
<label>Title4</label>
<input name="title4" id="title4" type="text" value="" size="40" aria-required="true">
</div>
</div>
<div class="row" id="company_3">
<div class="form-field">
<label>Title5</label>
<input name="title5" id="title5" type="text" value="" size="40" aria-required="true">
</div>
</div>
<div class="form-field">
<label>Title6</label>
<input name="title6" id="title6" type="text" value="" size="40" aria-required="true">
</div>
</div>
<div class="row justify-content-center">
<div class="col-100 tablet-auto desktop-auto">
<div class="card">
<div class="card-footer">
<span></span><a class="button button-fill" onclick="saveData()">Save</a>
</div>
</div><
</div>
</div>
</form>
I’d like to create a json object that has for first element the id of each row, like this
{
"company_1": {
"title1": ..his value,
"title2": ..his value,
},
"company_2": {
"title3": ..his value,
"title4": ..his value,
},
"company_3": {
"title5": ..his value,
"title6": ..his value,
}
}
I read that there is a function in javascript serializeJSON() but it takes all names togheter.
Thank you in advance
You could use a for .. of loop to iterate the result of a querySelectorAll call:
function saveData() {
const result = {};
for (const input of document.querySelectorAll(".row input")) {
const cat = input.closest(".row").id;
(result[cat] = result[cat] || {})[input.id] = input.value;
}
console.log(result);
}
<form class="list" id="myForm">
<div class="row" id="company_1">
<div class="form-field">
<label for="title1">Title1</label>
<input name="title1" id="title1" type="text" value="this" size="40" aria-required="true">
</div>
<div class="form-field">
<label for="title2">Title2</label>
<input name="title2" id="title2" type="text" value="is" size="40" aria-required="true">
</div>
</div>
<div class="row" id="company_2">
<div class="form-field">
<label for="title3">Title3</label>
<input name="title3" id="title3" type="text" value="a" size="40" aria-required="true">
</div>
<div class="form-field">
<label for="title4">Title4</label>
<input name="title4" id="title4" type="text" value="demo" size="40" aria-required="true">
</div>
</div>
<div class="row" id="company_3">
<div class="form-field">
<label for="title5">Title5</label>
<input name="title5" id="title5" type="text" value="with" size="40" aria-required="true">
</div>
<div class="form-field">
<label for="title6">Title6</label>
<input name="title6" id="title6" type="text" value="inputs" size="40" aria-required="true">
</div>
</div>
<div class="row justify-content-center">
<div class="col-100 tablet-auto desktop-auto">
<div class="card">
<div class="card-footer">
<span></span><a class="button button-fill" onclick="saveData()">Save</a>
</div>
</div>
</div>
</div>
</form>
(run the snippet in fullscreen, so you can see the input form and the object literal that is generated for it.)
This snippet will do as you ask.
That said, the structure you've chosen is not ideal.
$(() => {
var data = {};
[0,1,2].forEach(n => {
let companyId = 'company_' + (n+1);
let titleAId = 'title' + (n*2+1);
let titleBId = 'title' + (n*2+2);
let company = { };
company[titleAId] = $('#' + titleAId).val();
company[titleBId] = $('#' + titleBId).val();
data[companyId] = company;
});
console.log(data);
});
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<form class="list" id="myForm">
<div class="row" id="company_1">
<div class="form-field">
<label for="title">Title1</label>
<input name="title1" id="title1" type="text" value="1" size="40" aria-required="true">
</div>
</div>
<div class="form-field">
<label for="title">Title2</label>
<input name="title2" id="title2" type="text" value="2" size="40" aria-required="true">
</div>
</div>
<div class="row" id="company_2">
<div class="form-field">
<label for="title">Title3</label>
<input name="title3" id="title3" type="text" value="3" size="40" aria-required="true">
</div>
</div>
<div class="form-field">
<label for="title">Title4</label>
<input name="title4" id="title4" type="text" value="4" size="40" aria-required="true">
</div>
</div>
<div class="row" id="company_3">
<div class="form-field">
<label for="title">Title5</label>
<input name="title5" id="title5" type="text" value="5" size="40" aria-required="true">
</div>
</div>
<div class="form-field">
<label for="title">Title6</label>
<input name="title6" id="title6" type="text" value="6" size="40" aria-required="true">
</div>
</div>
<div class="row justify-content-center">
<div class="col-100 tablet-auto desktop-auto">
<div class="card">
<div class="card-footer">
<span></span><a class="button button-fill" onclick="saveData()">Save</a>
</div>
</div>
</div>
</div>
</form>
var divArr = document.getElementsByTagName('div') will give you an array of all he divs that are in a page. You could then loop through the results with divArr.forEach((d,idx)), and use idx + 1 concatenated with the prefix 'company_'
If you are using jQuery, it would be $('div').each() to iterate through them.
If you are reading from database, such as oracle, you could us rownum as your line number and concatenate that with 'company_' and get the number in your result set
If reading from SQL Server, you could SELECT ROW_NUMBER() OVER(ORDER BY fieldName ASC) AS Row. Also, the latest version SQL server has FOR JSON PATH, which can be used to generate the JSON for you.
Again, not sure where your source is based on your question, but one of these may be applicable.
I created a form for product sale. admin can add fields for multiple product's click on add button using jquery and can remove by clicking on remove button. I'm trying to append this using div id but this doesn't work.
here is my html part.
<div class="row" id="dsf">
<div class="col-md-2">
<select name="p_name" class="form-control" id="p_name">
<option value="">-Select Product-</option>
#foreach($products as $product)
<option value="{{$product->product_id}}">{{$product->name}}</option>
#endforeach
</select>
</div>
<div class="col-md-2">
<input type="text" name="p_code" id="p_code" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="unit_pctn" id="unit_pctn" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="u_price" id="u_price" class="form-control" readonly="">
</div>
<div class="col-md-1">
<input type="text" name="ctn" id="ctn" class="form-control">
</div>
<div class="col-md-1">
<input type="text" name="pcs" id ="pcs" class="form-control">
</div>
<div class="col-md-2">
<input type="text" name="t_amt" id="t_amt" class="form-control">
</div>
</div>
Here is my jquery part.
$(document).ready(function(){
$("#addrow").click(function(){
$("#dsf").append();
});
});
if you want to append data after div then use this code
$(document).ready(function(){
$("#addrow").click(function(){
var content = $("#dsf").html();
$('#addrow').append(content);
});
});
this is demo code for test
$(document).ready(function(){
$("#addrow").click(function(){
var content = $("#dsf").html();
$('#addrow').append(content);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="dsf">
<div class="col-md-2">
<input type="text" name="p_code" id="p_code" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="unit_pctn" id="unit_pctn" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="u_price" id="u_price" class="form-control" readonly="">
</div>
<div class="col-md-1">
<input type="text" name="ctn" id="ctn" class="form-control">
</div>
<div class="col-md-1">
<input type="text" name="pcs" id ="pcs" class="form-control">
</div>
<div class="col-md-2">
<input type="text" name="t_amt" id="t_amt" class="form-control">
</div>
</div>
<div id="addrow">Click</div>
or you can append after addrow
$(document).ready(function(){
$("#addrow").click(function(){
var content = $("#dsf").html();
$( content ).insertBefore( "#addrow" );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="dsf">
<div class="col-md-2">
<input type="text" name="p_code" id="p_code" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="unit_pctn" id="unit_pctn" class="form-control" readonly="">
</div>
<div class="col-md-2">
<input type="text" name="u_price" id="u_price" class="form-control" readonly="">
</div>
<div class="col-md-1">
<input type="text" name="ctn" id="ctn" class="form-control">
</div>
<div class="col-md-1">
<input type="text" name="pcs" id ="pcs" class="form-control">
</div>
<div class="col-md-2">
<input type="text" name="t_amt" id="t_amt" class="form-control">
</div>
</div>
<div id="addrow">Click</div>
I wanted to disable the div when i click the the checkbox. if the current address and permanent address are the same, the user just click the check box to disabled the field of the permanent address. Thanks!
<div class="col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
</div>
<div rv-each-address="applicant:personal_information:addresses">
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label class="control-label"><strong rv-text="address:description">Permanent Address</strong></label>
<input class="form-control" rv-value="address:address"
name="model.cid" data-validate="required" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="city">City</label> <input
rv-value="address:city" rv-enabled="address:province" type="text" class="form-control typeahead" name="city"
id="city" data-validate="required"
placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="state">Province</label> <input
rv-value="address:province" rv-enabled="address:country" type="text" id="province" placeholder="Select Province"
name="province" class="form-control typeahead">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="country">Country</label>
<select name="gender" class="form-control" id="gender">
<option value="" disabled selected>Country</option>
<option>Philippines</option>
<option>Hong Kong</option>
<option>South Korea</option>
<option>Singapore</option>
<option>China</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <input class="form-control" rv-value="address:postalCode" name="postalCode"
id="postalCode" data-validate="required"
placeholder="Zip Code" />
</div>
</div>
</div>
</div>
Add the following JS to your code.
$(document).ready(function(){
$('input[type="checkbox"]').change(function(){
$('.permanentAdd').attr('disabled','disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
</div>
<div rv-each-address="applicant:personal_information:addresses">
<div class="row">
<div class="col-md-8">
<div class="form-group ">
<label class="control-label"><strong rv-text="address:description">Permanent Address</strong></label>
<input class="form-control permanentAdd" rv-value="address:address"
name="model.cid" data-validate="required" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="city">City</label> <input
rv-value="address:city" rv-enabled="address:province" type="text" class="form-control typeahead" name="city"
id="city" data-validate="required"
placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="state">Province</label> <input
rv-value="address:province" rv-enabled="address:country" type="text" id="province" placeholder="Select Province"
name="province" class="form-control typeahead">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="country">Country</label>
<select name="gender" class="form-control" id="gender">
<option value="" disabled selected>Country</option>
<option>Philippines</option>
<option>Hong Kong</option>
<option>South Korea</option>
<option>Singapore</option>
<option>China</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <input class="form-control" rv-value="address:postalCode" name="postalCode"
id="postalCode" data-validate="required"
placeholder="Zip Code" />
</div>
</div>
</div>
</div>
You can try something like this
<input type="checkbox" id="check_box" onchange="set_status();">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <div id="txt_field" name="txt_field"> </div>
<script type="text/javascript">
function set_status() {
var appendData = '';
var checkbox = document.getElementById("check_box");
if (checkbox.checked == true) {
appendData = '<input class="form-control" rv-value="address:postalCode" name="postalCode" id="postalCode" readonly="readonly" data-validate="required" placeholder="Zip Code" />';
}
else {
appendData = '<input class="form-control" rv-value="address:postalCode" name="postalCode" id="postalCode" data-validate="required" placeholder="Zip Code" />';
}
window.jQuery('#txt_field').html(appendData);
}
</script>
</div>
</div>
</div>
</div>
Here is the example how you do this thing easy. make sure you have only one checkbox in this window. else this not working, then you need to change something.
jQuery
$( "input[type=checkbox]" ).on( "click", function(){
var n = $("input[type=checkbox]:checked").length;
if(n){
$(".permanent-address").attr("disabled", 'disabled');
}else{
$(".permanent-address").removeAttr("disabled");
}
});
HTML
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
<input class="form-control permanent-address" rv-value="address:address" name="model.cid" data-validate="required" />
Pure javascript anwser
function checkAddress(checkbox) {
var inputs = document.querySelectorAll('input:not([type=checkbox])');
var selects = document.querySelectorAll('select');
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = checkbox.checked;
}
for (var i = 0; i < selects.length; i++) {
selects[i].disabled = checkbox.checked;
}
}
HTML code
<input type="checkbox" onclick="checkAddress(this)">
https://jsfiddle.net/0ba4f7jd/
Simply create a function that gets called when the checkbox is checked, which disables the div and all child elements:
$('#checkbox').change(function(){
var div = $('#everything');
if (div.attr('class')!="disabled") {
div.addClass("disabled");
$("#everything *").attr("disabled", true);
}
else {
div.removeClass("disabled");
$('#everything *').attr('disabled',false);
}
});
DEMO
I'm trying to add a submit button beside my select option drop down menu. I can't seem to get to align properly above the message box.
It sits in a basic div but didn't think it was needed.
<form id="contact-form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<h5>Join us now</h5>
<div class="form-group">
<label for="subject">
Select Option</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">Nutritional Support</option>
<option value="suggestions">Nutritional Support and Exercise Pescription</option>
<option value="product">Single Nutrition or Exercise Plan</option>
</select>
</div>
<label for="name">
Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="name">
Message</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-skin pull-right" id="btnContactUs">
Send Message</button>
</div>
</div>
</form>
I modified the rows and columns in your code, you can find it in this JSFiddle , hope this helps.
<form id="contact-form">
<div class="row">
<div class="col-md-6 col-xs-6">
<h5>Join us now</h5>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="subject">
Select Option
</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">Nutritional Support</option>
<option value="suggestions">Nutritional Support and Exercise Pescription</option>
<option value="product">Single Nutrition or Exercise Plan</option>
</select>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<button type="submit" class="btn btn-skin pull-right buttonTest" id="btnContactUs">
Send Message
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="name">
Name
</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address
</label>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" />
</div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="name">
Message
</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div>
</div>
</div>
</div>