Develop Reference

Transfer data from input to another input

I have some inputs. "input and select" data in the id value of "customer-1", I want to match and transfer with "class" value if click add button.
For example, id="customer-1" "input and select" data in, I want it imported into class="customer-1".
$('.customer-add').click(function(){
var customer_id = $('.customer-add').closest('.customer-bar').find("input").attr("id");
$("." + customer_id).val($("#" + customer_id).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="customer-bar">
<div id="customer-1">
<input type="text" id="customer-name" value="john" disabled />
<input type="text" id="customer-surnamename" value="doe" disabled />
<select name="" id="customer-day" disabled>
<option value="">14</option>
</select>
<select name="" id="customer-month" disabled>
<option value="">02</option>
</select>
<select name="" id="customer-year" disabled>
<option value="">1995</option>
</select>
</div>
<br />
<div class="customer-add" style="cursor:pointer;background:red;color:white;display:inline-block;">Click to add customer details</div>
<br /><br />
<div class="customer-1">
<input type="text" class="customer-name" value="" />
<input type="text" class="customer-surnamename" value="" />
<select name="" class="customer-day">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-month">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-year">
<option value=""></option>
<option value="">2012</option>
<option value="">2015</option>
</select>
</div>
</div>
<br><br><br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="customer-bar">
<div id="customer-2">
<input type="text" id="customer-name" value="john" disabled />
<input type="text" id="customer-surnamename" value="doe" disabled />
<select name="" id="customer-day" disabled>
<option value="">14</option>
</select>
<select name="" id="customer-month" disabled>
<option value="">02</option>
</select>
<select name="" id="customer-year" disabled>
<option value="">1995</option>
</select>
</div>
<br />
<div class="customer-add" style="cursor:pointer;background:red;color:white;display:inline-block;">Click to add customer details</div>
<br /><br />
<div class="customer-2">
<input type="text" class="customer-name" value="" />
<input type="text" class="customer-surnamename" value="" />
<select name="" class="customer-day">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-month">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-year">
<option value=""></option>
<option value="">2012</option>
<option value="">2015</option>
</select>
</div>
</div>
I updated my code. I was able to transfer a single input, but I have to transfer them all

Change id to class
use closest and next
I assume you meant copy from customer1 to customer2
I cannot make a working snippet because you have the same IDs and no names, but the code will look this this
$(function() {
$(".customer-add").on("click",function() {
const $container = $(this).closest(".customer-bar")
const $nextContainer = $container.next(".customer-bar")
const $currentElements = $(":input",$container);
const $nextElements = $(":input",$nextContainer);
$currentElements.each(function(i) {
console.log(i,$(this).attr("class"))
$nextElements.eq(i).val($(this).val())
})
})
})

I updated my code. I was able to transfer a single input, but I have to transfer them all

Dropdown Calculate in real time

This is my form I want to after submission package and event id calculate with sum and guest field is always calculate (guest value * 5) then total result show in <div id="result">. How can I do that? and this result set in id="totalprice" value. Thanks
<form action="" class="myform" method="post" id="calculate">
<h1>Reservation Info</h1>
<input type="text" id="datepicker" name="date" placeholder="Date">
<select name="event" id="event">
<option id="50" value="event 1">Event 1</option>
<option id="150" value="event 2">Event 2</option>
<option id="300" value="event 3">Event 3</option>
<option id="500" value="event 4">Event 4</option>
</select>
<input type="text" name="guest" placeholder="Number of gests" />
<h1>Packages</h1>
<select name="package" id="asdasd">
<option id="100" value="100">Package 1</option>
<option id="200" value="200">Package 2</option>
<option id="300" value="300">Package 3</option>
<option id="400" value="400">Package 4</option>
</select>
<div id="result">
<input type="hidden" name="price" id="totalprice" />
<h1>Additional comments</h1>
<textarea rows="4" name="comment" placeholder="Additional comments"></textarea>
<br>
<button type="submit" name="submit">submit</button>
</form>

For calculating total price you need to create a JS function and then you need to call that function on change of guest, event and package field.
Below is the snippet where we have created a JS function calculateTotal() and in that function we are calculating the sum of all 3 fields. Please change calculation logic as per your need.
<form action="" class="myform" method="post" id="calculate">
<h1>Reservation Info</h1>
<input type="text" id="datepicker" name="date" placeholder="Date">
<select name="event" id="event" onchange="calculateTotal()">
<option id="50" value="50">Event 1</option>
<option id="150" value="150">Event 2</option>
<option id="300" value="300">Event 3</option>
<option id="500" value="500">Event 4</option>
</select>
<input type="text" id="guest" name="guest" placeholder="Number of guests" onchange="calculateTotal()"/>
<h1>Packages</h1>
<select name="package" id="package" onchange="calculateTotal()">
<option id="100" value="100">Package 1</option>
<option id="200" value="200">Package 2</option>
<option id="300" value="300">Package 3</option>
<option id="400" value="400">Package 4</option>
</select>
<div id="result">
<input type="hidden" name="price" id="totalprice" />
<h1>Additional comments</h1>
<textarea rows="4" name="comment" placeholder="Additional comments"></textarea>
<br>
<button type="submit" name="submit">submit</button>
</form>
<script>
function calculateTotal(){
var guest = parseInt(document.getElementById("guest").value);
var event = parseInt(document.getElementById("event").value);
var package= parseInt(document.getElementById("package").value);
var sum= event+package+(guest*5);
document.getElementById("totalprice").value=sum;
}
</script>

How to add and delete the multiple form field based on selection in php

I create the form with multiple form field.I have the Form Fields are Name,Mobile,Email and No Of Referrer. Based on selection option(No Of Referrer)....
Here i create the form for Refer and earn for student admission process.... when the user select no of referrer as 2 i need to show reference details fields 2 times if change again 1 means show the field one time.... After select the No of Referrer field i show the following field Name,Email,Mobile,City,Course...
$(document).ready(function() {
toggleFields();
$("#select_btn").change(function() {
toggleFields();
});
});
//this toggles the visibility of our parent permission fields depending on the current selected value of the underAge field
function toggleFields() {
if ($("#select_btn").val() <= 5 && $("#select_btn").val() != 0)
$("#parentPermission").show();
else
$("#parentPermission").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
<p>Name:
<input type="text" name="player_name" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>No of Referrer:
<select id="select_btn" name="age">
<option value="0">--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<div id="parentPermission">
<p>Name:
<input type="text" name="reference_name" />
</p>
<p>Mobile:
<input type="text" name="reference_mobile" />
</p>
<p>Email:
<input type="text" name="reference_email" />
</p>
<p>City:
<select id="city" name="City">
<option value="0">--Select City--</option>
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Delhi">Delhi</option>
<option value="Jammu">Jammu</option>
<option value="Ooty">Ooty</option>
</select>
</p>
<p>Course:
<select id="course" name="Course">
<option value="B.com">B.com</option>
<option value="B.A">B.A</option>
<option value="MBA">MBA</option>
<option value="B.Sc">B.Sc</option>
<option value="BCA">BCA</option>
</select>
</p>
<p>You must have parental permission before you can play.</p>
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>
Now it is the form field....But does not dynamically shows the form field based on selection... For example if i select No of Referrer option is 2 then need to show the form field 2 times... change it 3 means show 3 times,change to 1 means show only one times... How to do show and hide the form field based on the selection???

You need to use $('div').clone().html(). See the below working solution and it has some changes in html.
$(document).ready(function() {
$('#hidden-div').hide();
$("#select_btn").change(function() {
toggleFields();
});
});
function toggleFields() {
var selectVal = $("#select_btn").val();
if (selectVal <= 5) {
$hiddenHtml = $('#hidden-div').clone().html();
$("#parentPermission").html('');
for (var i = 0; i < selectVal; i++) {
$("#parentPermission").append($hiddenHtml);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
<p>Name:
<input type="text" name="player_name" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>No of Referrer:
<select id="select_btn" name="age">
<option value="0">--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<div id="hidden-div">
<p>Name:
<input type="text" name="reference_name" />
</p>
<p>Mobile:
<input type="text" name="reference_mobile" />
</p>
<p>Email:
<input type="text" name="reference_email" />
</p>
<p>City:
<select id="city" name="City">
<option value="0">--Select City--</option>
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Delhi">Delhi</option>
<option value="Jammu">Jammu</option>
<option value="Ooty">Ooty</option>
</select>
</p>
<p>Course:
<select id="course" name="Course">
<option value="B.com">B.com</option>
<option value="B.A">B.A</option>
<option value="MBA">MBA</option>
<option value="B.Sc">B.Sc</option>
<option value="BCA">BCA</option>
</select>
</p>
<p>You must have parental permission before you can play.</p>
</div>
<div id="parentPermission">
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>

This could be realized via .clone() and editing ids / names of the cloned objects. Alternatively: Your #select_btn already has number values for it, use them in a foreach to directly modify the html() output.

$(document).ready(function() {
$('#hidden-div').hide();
$("#select_btn").change(function() {
toggleFields();
});
});
function toggleFields() {
var selectVal = $("#select_btn").val();
if (selectVal <= 5) {
$hiddenHtml = $('#hidden-div').clone().html();
$("#parentPermission").html('');
for (var i = 0; i < selectVal; i++) {
$("#parentPermission").append($hiddenHtml);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="POST">
<p>Name:
<input type="text" name="player_name" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>No of Referrer:
<select id="select_btn" name="age">
<option value="0">--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<div id="hidden-div">
<p>Name:
<input type="text" name="reference_name" />
</p>
<p>Mobile:
<input type="text" name="reference_mobile" />
</p>
<p>Email:
<input type="text" name="reference_email" />
</p>
<p>City:
<select id="city" name="City">
<option value="0">--Select City--</option>
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Delhi">Delhi</option>
<option value="Jammu">Jammu</option>
<option value="Ooty">Ooty</option>
</select>
</p>
<p>Course:
<select id="course" name="Course">
<option value="B.com">B.com</option>
<option value="B.A">B.A</option>
<option value="MBA">MBA</option>
<option value="B.Sc">B.Sc</option>
<option value="BCA">BCA</option>
</select>
</p>
<p>You must have parental permission before you can play.</p>
</div>
<div id="parentPermission">
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>

Appending Checkbox values to Input Textbox (Jquery)

I have been making a product configurator for the past month and received some awesome help from Stackoverflow. I come back asking for some help. Before proceeding, I have Google'd for answers, looked on Stackoverflow, and tried messing around with the code myself. I am new to coding as well so I am aware that the code is not perfect by any means.
Anyways, my code works by taking an option from the dropdown or checkbox and places its value in an input textbox at the end. What I am trying to achieve is that in the "Options" section (which are all checkboxes), I would like the value to appear in the input textbox named "completeText" when checked and disappear when unchecked. I found some code that worked great, but if I made all of the dropdown selections before "Options" and then checked a checkbox, it would clear out the entire box except for that checkbox's value. I need the checkbox value to append to the other dropdown selections. The part number at the end should be all of the values appended to each other, separated by an "-". Again, I have tried a ton of different ways to achieve this and so far have been unsuccessful. Any direction or help would be marvelous! Thank you so much and my HTML/JS is below for reference if someone wants to help (WARNING LONG CODE):
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>‌​
<script src="http://www.flexotherm.net/templates/yoo_corona/js/samplepicture.js"> </script>
<script src="http://www.flexotherm.net/templates/yoo_corona/js/options.js"> </script>
<script src="http://www.flexotherm.net/templates/yoo_corona/js/sampleso.js"></script>
</head>
<br>
<div style="width: 900px; float: left; margin-left: 30px;"><h1><font face="bebas neue" size="15">Design your own</font></h1>
<div style="width: 520px; float: left; padding-right:30px;">
<h4 style="line-height:24px;"><font face="bebas neue" size="6">Heated Sample Lines</font></h4><br><br><br><br><br><br>
<img id="image" border="5" src='http://www.flexotherm.net/images/START2' height="253px" width="450px">
</div>
<div class="choices" style="width: 300px; float: right; padding: 20px; background-color: #eee;">
<div>
<body>
<form id="example" name="example">
<b>Series Type</b><br>
<select id="series" onchange="updateText('series')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="HSL">Heated Sample Lines</option>
</select>
<br>
<br>
<b>Tube Material</b><br>
<select id="tube" onchange="updateText('tube')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="E">PTFE Teflon®</option>
<option value="P">PFA Teflon®</option>
<option value="F">FEP</option>
<option value="PE">PEEK</option>
<option value="N11">Nylon 11</option>
<option value="S">316 Stainless Steel</option>
<option value="EPS">Electropolished Stainless Steel</option>
<option value="CS">Corrugated Stainless Steel (Overbraided)</option>
<option value="ESSBT">PTFE Stainless Steel Overbraided Teflon®</option>
<option value="PSSBT">PFA Stainless Steel Overbraided Teflon®</option>
</select>
<br>
<br>
<b>Tube Size</b><br>
<select id="size" onchange="updateText('size')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="4/2">1/4” O.D. x 1/8” I.D. (0.635cm x 0.318cm)</option>
<option value="4/3">1/4” O.D. x 3/16” I.D. (0.635cm x 0.476cm)</option>
<option value="6/4">3/8” O.D. x 1/4” I.D. (0.953cm x 0.635cm)</option>
<option value="6/5">3/8” O.D. x 5/16” I.D. (0.953cm x 0.794cm)</option>
<option value="/8">PTFE</option>
<option value="4">1/4” O.D. x 0.035” Wall (0.635cm x 0.089cm)</option>
<option value="5">5/16” O.D. x 0.035” Wall (0.7938cm x 0.089cm)</option>
<option value="6">3/8” O.D. x 0.035” Wall (0.953cm x 0.089cm)</option>
<option value="8">1/2” O.D. x 0.035” Wall (1.27cm x 0.089cm)</option>
<option value="4C">1/4" O.D.</option>
<option value="6C">3/8" O.D.</option>
<option value="8C">1/2” O.D.</option>
</select>
<br>
<br>
<b>Voltage</b><br>
<select id="voltage" onchange="updateText('voltage')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="A">110 / 115 / 120 VAC</option>
<option value="B">208 VAC</option>
<option value="C">220 / 230 / 240 VAC</option>
<option value="D">440 / 450 / 460 VAC</option>
<option value="E">12 VDC</option>
<option value="F">24 VDC</option>
</select>
<br>
<br>
<b>Power Connector</b><br>
<select id="connector" onchange="updateText('connector')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="A">7 Pin AMP™ (Power Pins 3-5)</option>
<option value="T">Mini Twist Lock (NEMA ML2-15)</option>
<option value="T2">Mini Twist Lock (NEMA ML3-15)</option>
<option value="W">Straight-Blade (NEMA 5-15)</option>
<option value="M">Molex 3 - Pin</option>
<option value="L">LAPP</option>
<option value="N">None - Flying Leads</option>
<option value="S">Special / Custom</option>
</select>
<br>
<br>
<b>Sensor Connector</b><br>
<select id="senseconnect" onchange="updateText('senseconnect')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="M">Miniture</option>
<option value="S">Standard</option>
<option value="F">Flying Leads</option>
</select>
<br>
<br>
<b>Sensor Placement</b><br>
<font size="1">After selection, specify length from lead or non-lead side</font>
<select id="placement" onchange="updateText('placement')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="N">T/C Non-Lead Side</option>
<option value="L">Lead Side</option>
</select> <select id="length" onchange="updateText('length')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="1">1 ft.</option>
<option value="2">2 ft.</option>
<option value="3">3 ft.</option>
<option value="4">4 ft.</option>
<option value="5">5 ft.</option>
<option value="6">6 ft.</option>
<option value="7">7 ft.</option>
<option value="8">8 ft.</option>
<option value="9">9 ft.</option>
<option value="10">10 ft.</option> </select>
<br>
<br>
<b>Operating Temperature</b><br>
<input type="text" id="temperature" onchange="updateText('temperature')" /> <font size="2"> °F</font>
<script>
document.getElementById("temperature").onkeyup=function(){
var input=parseInt(this.value);
if(input<1 || input>9999)
alert("Value should be between 1°F - 9999°F");
return;
}
</script> <br><br>
<b>Exterior Sleeve</b><br>
<select id="sleeve" onchange="updateText('sleeve')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="M">Black Nylon Mesh</option>
<option value="CT">Adaptaflex Corrugated Tubing</option>
<option value="A">Aluminized Gray Silicone</option>
<option value="S">Aluminized Rust-Red Silicone</option>
<option value="S">Aluminized Black Silicone</option>
<option value="CB">Cool Blue Aluminized Silicone (Premium)</option>
<option value="AC">Armored Cover</option>
<option value="TF">Tigerflex™</option>
<option value="GF">Gatorflex™</option>
<option value="BV">Blue Vinyl</option>
</select>
<br>
<br>
<b>Port Size</b><br>
<select id="port" onchange="updateText('port')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="2S">1/8"</option>
<option value="4S">1/4"</option>
<option value="6S">3/8"</option>
<option value="8S">1/2"</option>
</select>
<br>
<br>
<b>Port Type</b><br>
<font size="1">Please specify type if "Custom" is selected</font><br>
<select id="porttype" onchange="updateText('porttype')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="TS">Tube Stubs</option>
<option value="JIC">JIC Swivels</option>
<option value="SF">Sanitary Flange</option>
<option value="C">Custom</option>
</select> <input type="text" id="custom" onchange="updateText('custom')" />
<br>
<br>
<b>Line Length</b><br>
<input type="text" id="line" onchange="updateText('line')" /><font size="2"> ft</font>
<script>
document.getElementById("line").onkeyup=function(){
var input=parseInt(this.value);
if(input<1 || input>9999)
alert("Value should be between 1 ft. - 9999 ft.");
return;
}
</script>
<br>
<br>
<b>Lead Length</b><br>
<input type="text" id="lead" onchange="updateText('lead')" /><font size="2"> ft</font>
<script>
document.getElementById("lead").onkeyup=function(){
var input=parseInt(this.value);
if(input<1 || input>9999)
alert("Value should be between 1 ft. - 9999 ft.");
return;
}
</script>
<br>
<br>
<b>Options</b>
<br>
<font size="1"> Please select all options wanted</font>
<br>
<div id="inputs">
<input type="checkbox" id="prof" class="choice" value="PR" onchange="updateText('prof')"> Profiled w/ Data</input><br>
<input type="checkbox" id="slaveboth" class="choice" value="SL" onchange="updateText('slaveboth')"> Slaved Both Ends<br>
<input type="checkbox" id="slavelead" class="choice" value="SLL" onchange="updateText('slavelead')"> Slaved Lead End<br>
<input type="checkbox" id="slavenl" class="choice" value="SLNL" onchange="updateText('slavenl')"> Slaved Non-Lead End<br>
<input type="checkbox" id="silco" class="choice" value="SN" onchange="updateText('silco')"> SilcoNert® Coating<br>
<input type="checkbox" id="dur" class="choice" value="DR" onchange="updateText('dur')"> Dursan Coating<br>
<input type="checkbox" id="ss" class="choice" value="SR" onchange="updateText('ss')"> Stainless Steel 1/16" Braided Strain Relief<br>
<input type="checkbox" id="thermo" class="choice" value="TP" onchange="updateText('thermo')"> Thermocouple Pass Through* </div><input type="text" id="thermoquant" onchange="updateText('thermoquant')" size="4" /><br>
<input type="checkbox" id="pass" class="choice" value="PP" onchange="updateText('pass')"> Power Pass Through* <br></div>
<input type="text" id="quantity" onchange="updateText('quantity')" size="4" />
<br>
<font size="1">*Specify quantity</font><br>
<br>
<hr>
<center><input type="hidden" value="" maxlength="1" size="1" id="seriesText" />
<input type="hidden" value="" maxlength="1" size="1" id="tubeText" />
<input type="hidden" value="" maxlength="1" size="1" id="sizeText" />
<input type="hidden" value="" maxlength="1" size="1" id="voltageText" />
<input type="hidden" value="" maxlength="1" size="1" id="connectorText" />
<input type="hidden" value="" maxlength="1" size="1" id="sensorText" />
<input type="hidden" value="" maxlength="1" size="1" id="placementText" />
<input type="hidden" value="" maxlength="1" size="1" id="temperatureText" />
<input type="hidden" value="" maxlength="1" size="1" id="sleeveText" />
<input type="hidden" value="" maxlength="1" size="1" id="portText" />
<input type="hidden" value="" maxlength="1" size="1" id="porttypeText" />
<input type="hidden" value="" maxlength="1" size="1" id="customText" />
<input type="hidden" value="" maxlength="1" size="1" id="lineText" />
<input type="hidden" value="" maxlength="1" size="1" id="leadText" />
<input type="hidden" value="" maxlength="1" size="1" id="thermoText" />
<input type="hidden" value="" maxlength="1" size="1" id="thermoquantText" />
<input type="hidden" value="" maxlength="1" size="1" id="passText" />
<input type="hidden" value="" maxlength="1" size="1" id="quantityText" />
<input type="text" value="" maxlength="1" size="1" id="completeText" style="font-size:7pt; height:15px; width: 298px; border:1px solid #CC0000;" /> <br> {qluetip title=[What Next?]}<div style="width: 230px; float: left;">
<div style="width: 150px; float: left; padding-top: 5px;">
<font size="5"><font face="bebas neue"><span style="color: #d80101;">Send Us</span><span style="color: #d80101;"> an</span> email</font></font></b><br><p class="tool"> <font size="1.5"> Copy your part number and click the "Email Us" button below and we will get in contact with you:</font></p>
<a class="readmore" href="mailto:mike.seacord#neptechinc.com;rick#neptechinc.com;brian.church#neptechinc.com?Subject= (CONFIG)%20Temperature%20Controller%20Part Number"><span class="readmore-1"> <span class="readmore-2">Email Us</span></span></a> </center>
</br>
<hr>
<font face="bebas neue" size="5"><span style="color: #d80101;">Give us</span><span style="color: #d80101;"> a</span> Call</font><br><p class="tool"> <font size="1.5"> Provide your custom part number and let our dedicated sales staff help you directly by calling:</br></p><font size="2"> <b>810.225.2222</b> </font> </font>
{/qluetip}
</form>
<script type="text/javascript">
function updateText(type) {
var id = type+'Text';
var endValue;
var inputValue = document.getElementById(type).value;
document.getElementById(id).value = inputValue;
endValue = document.getElementById("seriesText").value;
if(document.getElementById("tubeText").value != ""){
endValue = endValue+"-"+document.getElementById("tubeText").value;
}
if(document.getElementById("sizeText").value != ""){
endValue = endValue+"-"+document.getElementById("sizeText").value;
}
if(document.getElementById("voltageText").value != ""){
endValue = endValue+"-"+document.getElementById("voltageText").value;
}
if(document.getElementById("connectorText").value != ""){
endValue = endValue+"-"+document.getElementById("connectorText").value;
}
if(document.getElementById("sensorText").value != ""){
endValue = endValue+"-"+document.getElementById("sensorText").value;
}
if(document.getElementById("placementText").value != ""){
endValue = endValue+"-"+document.getElementById("placementText").value;
}
if(document.getElementById("temperatureText").value != ""){
endValue = endValue+"-"+document.getElementById("temperatureText").value;
}
if(document.getElementById("sleeveText").value != ""){
endValue = endValue+"-"+document.getElementById("sleeveText").value;
}
if(document.getElementById("portText").value != ""){
endValue = endValue+"-"+document.getElementById("portText").value;
}
if(document.getElementById("porttypeText").value != ""){
endValue = endValue+"-"+document.getElementById("porttypeText").value;
}
if(document.getElementById("customText").value != ""){
endValue = endValue+"-"+document.getElementById("customText").value;
}
if(document.getElementById("lineText").value != ""){
endValue = endValue+"-"+document.getElementById("lineText").value;
}
if(document.getElementById("leadText").value != ""){
endValue = endValue+"-"+document.getElementById("leadText").value;
}
if(document.getElementById("thermoquantText").value != ""){
endValue = endValue+"-"+document.getElementById("thermoquantText").value;
}
if(document.getElementById("quantityText").value != ""){
endValue = endValue+"-"+document.getElementById("quantityText").value;
}
document.getElementById("completeText").value = endValue;
}
</script>
</body>
</div>
</div>
</div>
</div>

How to align div content to center in following scenario?

I have a div having two divs inside as follows.
HTML code:
<div style="margin: 20px auto;" align="center">
<div style="float:left;">
<input type="button" class="myButton" value="Add"/>
<input type="button" class="myButton" value="Modify"/>
<input type="button" class="myButton" value="Delete"/>
</div>
<div>
<form id = "country_form" method="post">
<select id="country_name" name = "country_name" style = "position: relative;width:60px;" onChange="return country_change();">
<option value="">Select</option>
<option value="India">India</option>
<option value="Australia">Australia</option>
<option value="Malaysia">Malaysia</option>
<option value="UAE">U.A.E</option>
<option value="Singapore">Singapore</option>
<option value="USA">U.S.A</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="China">China</option>
</select>
<select id="country_port" name = "country_port" style = "position: relative;margin-left:5px;width:60px;">
<option value="">Select</option>
<option value="Macau">Macau</option>
<option value="Ningbo">Ningbo</option>
<option value="Beijing">Beijing</option>
<option value="Shanghai">Shanghai</option>
<option value="Guangzhou">Guangzhou</option>
<option value="Shenzhen">Shenzhen</option>
</select>
<input type="hidden" value="yes" name="submit_value"/>
<input type="submit" class="myButton" value="Search"/>
</form>
</div>
</div>
As i am doing float left to first inner div the outer div is going to left of screen.
So how to make it center.
Please help me to make it possible
jsFiddle: DEMO

See if this helps.........
<div style="margin: 20px auto; width:80%;" align="center">
http://jsfiddle.net/XNdJw/