How to display companion code from an HTML Select
I have a MySQL database table called app_codes. It has 8 rows, 2 cols. It is shown in the attached file.
I have the following php code to access the table:
Then I have his HTML/php to populate an HTML select element:
Now, I need to know the code column connected with the selected description.
How can I do that in php or Javascript? I can build Javascript arrays of both table columns.
Thanks
Appl_type_table.JPG
I have the following php code to access the table:
$qryac = "SELECT * from app_codes order by code";
$resac = mysqli_query($link, $qryac);
$na = mysqli_num_rows($resac);Then I have his HTML/php to populate an HTML select element:
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><select name="appl_type">
<option value=""></option>
<? for ($i = 0; $i < $na; $i++) {
$ac = mysqli_fetch_array($resac,MYSQLI_ASSOC); ?>
<option value="<? print $ac['descr']; ?>"><? print $ac['descr']; ?></option>
<? } ?>
</select></div>Now, I need to know the code column connected with the selected description.
How can I do that in php or Javascript? I can build Javascript arrays of both table columns.
Thanks
Appl_type_table.JPG
ASKER
I like option one; the code can be used to look up the description in later code if the need be.
I'll try it.
I'll try it.
ASKER
Chris,
If I make the "code" the option value, how do I show it farther down on the page. The user, of course, want's it to "magically" appear. The following code I had put in as a placeholder, assuming I could do it in Javascript:
If I make the "code" the option value, how do I show it farther down on the page. The user, of course, want's it to "magically" appear. The following code I had put in as a placeholder, assuming I could do it in Javascript:
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:20px;font-size:17px;">Specific Application Information</div>
<div class="col-sm-5 col-xs-5 text-right"><script>get_app_code()</script></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
If you want the value of the selected option (the code) to appear somewhere else in the page when the user makes a selection, the easiest way is to bind to the change event and update the text of another element. The following assumes you're using the jQuery library, and you want to show the code in an element with an ID of placeholder
$('[name=appl_type]').change(function() {
$('#placeholder').text( $(this).val() );
});ASKER
Sounds perfect, I'll try it.
Richard
Richard
ASKER
Chris,
I can't seem to make that work. See attached page (what it looks like AFTER I made a selection). The text box above Submit LS-250 should contain the code value. Here are the key code snippets:
HTML select population:
Text element:
After selecting an option from the select, nothing shows in this text box.
Thanks,
Richard
test_chris_Jquery.JPG
I can't seem to make that work. See attached page (what it looks like AFTER I made a selection). The text box above Submit LS-250 should contain the code value. Here are the key code snippets:
<script>
$(function() {
$( "#datepickerid" ).datepicker();
});
$('[name=appl_type]').change(function() {
$('#app_code').text( $(this).val() );
});
</script>HTML select population:
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><select name="appl_type">
<option value=""></option>
<? for ($i = 0; $i < $na; $i++) {
$ac = mysqli_fetch_array($resac,MYSQLI_ASSOC); ?>
<option value="<? print $ac['code']; ?>"><? print $ac['descr']; ?></option>
<? } ?>
</select></div>Text element:
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:20px;font-size:17px;">Specific Application Information</div>
<div class="col-sm-5 col-xs-5 text-right"><input type="text" id="app_code"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>After selecting an option from the select, nothing shows in this text box.
Thanks,
Richard
test_chris_Jquery.JPG
Hey Richard,
The only think I can see that may cause your problem is the way you've bound your jQuery event. When binding events to a DOM element, you should do it within a document.ready block. In your code, you're doing it outside of the ready block. This means that the binding could potentially run before the element has loaded, so the event doesn't get bound. Just move the binding to inside your ready block and see if that sorts it out:
The only think I can see that may cause your problem is the way you've bound your jQuery event. When binding events to a DOM element, you should do it within a document.ready block. In your code, you're doing it outside of the ready block. This means that the binding could potentially run before the element has loaded, so the event doesn't get bound. Just move the binding to inside your ready block and see if that sorts it out:
$(function() {
$( "#datepickerid" ).datepicker();
$('[name=appl_type]').change(function() {
$('#app_code').text( $(this).val() );
});
});ASKER
I hate to be stupid, but I don't know what a document.ready block is.
Can you point me to an example?
Richard
Can you point me to an example?
Richard
Ahh, sorry Richard.
You already have one !
Basically, when you need to run any javascript that uses elements from the document, you should always defer running that code until you are sure that all the elements are loaded. The purpose of a document.ready block is to make sure that your code won't run until the document is ready.
In jQuery, the document ready block traditional looks like this:
You already have one !
Basically, when you need to run any javascript that uses elements from the document, you should always defer running that code until you are sure that all the elements are loaded. The purpose of a document.ready block is to make sure that your code won't run until the document is ready.
In jQuery, the document ready block traditional looks like this:
$( document ).ready(function() {
// any code in here won't fire until the document is ready
});$(function() {
// any code in here won't fire until the document is ready
});ASKER
Chris,
Sorry, I don't remember where we left this. Too many others going on.
The code right now is (full program):
Nothing shows in the text box to the right of "Specific Application Information" when the value of the select is changed,
Thanks,
Richard
Sorry, I don't remember where we left this. Too many others going on.
The code right now is (full program):
<?php
ini_set('session.cache_limiter','public');
session_cache_limiter(false);
session_start();
include "db_connect_nb.php";
$pid = $_GET['pid'];
// get project title
$qryp = "SELECT * from projects where ruid = " . $_SESSION['ruid'] . " and pid = " . $pid;
$resp = mysqli_query($link, $qryp);
$p = mysqli_fetch_array($resp,MYSQLI_ASSOC);
$qryac = "SELECT * from app_codes order by code";
$resac = mysqli_query($link, $qryac);
$na = mysqli_num_rows($resac);
//echo "na = " . $na . "<br>";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<title>Lakos Configurator - Select Cleaning Type</title>
<style>
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.wrapper{
max-width:1100px;
min-width:900px;
margin:0 auto;
}
</style>
<script type="text/javascript">
ac = "";
appd = [];
appc = [];
na = <? print $na; ?>;
<? for ($i = 0; $i < $na; $i++) { ?>
appd[<? print $i; ?>] = "<? print $ac['descr']; ?>";
appc[<? print $i; ?>] = <? print $ac['code']; ?>;
<? } ?>
function chk_vals() {
if (ac == "c") {
document.st.action = "projects.php";
return true;
}
if (document.st.proj_loc.value == "" || document.st.eng_co_name.value == "" || document.st.eng_loc.value == "" || document.st.purch_loc.value == "" || document.st.purch_co_name.value == "" || document.st.const_type.value == "" || document.getElementById("datepickerid").value == "") {
alert ("All values marked * are required");
return false;
}
if (document.st.po.value != "") {
val = document.st.po.value;
ln = val.length;
valok = false;
for (j = ln - 1; j > 0; j--) {
if (field.charAt(j) == ".") {
ext = val.substr(j+1, ln-j+1);
if (ext == "pdf" || ext == "doc" || ext == "docx") {
valok = true;
break;
}
}
}
if (! valok) {
alert ("Invalid PO file type");
return false;
}
}
return true;
}
function chk_new_proj() {
if (document.st.proj.value == "new") {
document.st.action = "main.php?new=y";
document.st.submit();
} else {
document.st.action = "main.php?proj=" + document.st.proj.value ;
document.st.submit();
}
}
function get_app_code() {
for (i = 0; i < na; i++) {
if (document.st.appl_type.selected) {
j = i;
break
}
}
ret = appc[j];
if (ret < 1000) {
ret = "0" + ret;
}
return ret;
}
function prof_window() {
window.open("profile.php", "profile", "width=1000, height=600, left=800, top=300, scrollbars=yes, menubar=yes, resizable=yes");
return false;
}
</script>
<!-- Global site tag (gtag.js) - Google
Analytics -->
<script async
src="https://www.googletagmanager.com
/gtag/js?id=UA-96994211-3"></script>
<script>
window.dataLayer = window.dataLayer
|| [];
function
gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-96994211-3');
</script>
<script>
$(function() {
$( "#datepickerid" ).datepicker();
});
$('[name=appl_type]').change(function() {
$('#app_code').text( $(this).val() );
});
</script>
</head>
<body>
<div class="wrapper">
<form method="post" name="st" action="save_ls250n1.php?pid=<? print $pid; ?>" onSubmit="return chk_vals();" enctype="multipart/form-data">
<input type="hidden" name="hvtype">
<div class="container-fluid" >
<? include "header.php"; ?>
<div class="row">
<div class="col-sm-12 col-xs-12" style="padding-top:3px;"> </div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 text-center" style="padding-top:2px; padding-bottom:2px; background-color:#0A2F98; color: white; font-size:20px"><b>IND Product Configurator</b></div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 text-center" style="padding-top:2px; padding-bottom:2px;font-size:20px"><b>Submit LS-250</b></div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10" style="padding-top:2px;"><b>Project/End-User Information</b><br><img src="images/blue_line.jpg" height="1" width="900"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Project/End-User Name</div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><? print $p['project_name']; ?></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Project Location (City, State, Country) <span style="color: red; font-size:18px;">*</span></div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><input type="text" name="proj_loc" style="width:400px;"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10" style="padding-top:10px;"><b>Engineering Information</b><br><img src="images/blue_line.jpg" height="1" width="900"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Spec Engineering Company Name <span style="color: red;font-size:18px;">*</span></div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><input type="text" name="eng_co_name" style="width:400px;"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Spec Engineer Location (City, State, Country) <span style="color: red;font-size:18px;">*</span></div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><input type="text" name="eng_loc" style="width:400px;"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10" style="padding-top:10px;"><b>Contractor Purchasing Information</b><br><img src="images/blue_line.jpg" height="1" width="900"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Purchasing Contractor Company Name <span style="color: red;font-size:18px;">*</span></div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><input type="text" name="purch_co_name" style="width:400px;"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Purchasing Contractor Location (City, State, Country) <span style="color: red;font-size:18px;">*</span></div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><input type="text" name="purch_loc" style="width:400px;"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Purchasing Contractor Contact Name</div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><input type="text" name="purch_con_cont" style="width:400px;"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Estimated Close Date <span style="color: red;font-size:18px;">*</span></div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><input type="text" name="estcldate" id="datepickerid"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Upload Purchase Order (Word or pdf)</div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><input type="file" name="po"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10" style="padding-top:10px;"><b>Application Information</b><br><img src="images/blue_line.jpg" height="1" width="900"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Type of Application <span style="color: red;font-size:18px;">*</span></div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><select name="appl_type">
<option value=""></option>
<? for ($i = 0; $i < $na; $i++) {
$ac = mysqli_fetch_array($resac,MYSQLI_ASSOC); ?>
<option value="<? print $ac['code']; ?>"><? print $ac['descr']; ?></option>
<? } ?>
</select></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Comments:</div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><textarea rows="5" cols="80" name="comments"></textarea></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10" style="padding-top:10px;">After clicking "Submit LS-250", Lakos will review your submission and determine if you should get all available<br>specification credit. Consult Lakos or your Regional Sales Manager if you have any questions.</div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10" style="padding-top:10px;font-size:17px; color:red;">* indicates required field.</div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:20px;font-size:17px;">Specific Application Information</div>
<div class="col-sm-5 col-xs-5 text-right"><input type="text" id="app_code"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10 text-right" style="padding-top:10px; padding-bottom:10px;"><input type="submit" value="Cancel & Return to my Projects" style="color:white; background-color: #5B9BD5; border-style: solid; border-color:#41719C; box-shadow: 4px 4px 2px #C3BDBD;" onMousedown="ac='c';"><span style="padding-right:50px;"> </span><input type="submit" value="Submit LS-250" style="color:white; background-color: #5B9BD5; border-style: solid; border-color:#41719C; box-shadow: 4px 4px 2px #C3BDBD;" onMousedown="ac='s';"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12" style="font-size:15px;">Please email any questions, comments, or feedback to <a href="mailto:lit@lakos.com">lit@lakos.com</a></div>
</div>
<div class="row">
<div class="col-sm-10 col-xs-10" style="padding-top:4px;"> </div>
</div>
<br><br>
</div>
</form>
</div>
</body>
</html>Nothing shows in the text box to the right of "Specific Application Information" when the value of the select is changed,
Thanks,
Richard
OK Richard,
We left it where your javascript wasn't firing and I suggested you move it so that it's inside of the document ready block (or the shorthand version of it in your case). Line 124-129 of your code shows this:
We left it where your javascript wasn't firing and I suggested you move it so that it's inside of the document ready block (or the shorthand version of it in your case). Line 124-129 of your code shows this:
$(function() {
$( "#datepickerid" ).datepicker();
});
$('[name=appl_type]').change(function() {
$('#app_code').text( $(this).val() );
});$(function() {
$( "#datepickerid" ).datepicker();
$('[name=appl_type]').change(function() {
$('#app_code').text( $(this).val() );
});
});ASKER
I did that, does not work.
Here is full source (not php, html):
Here is full source (not php, html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<title>Lakos Configurator - Select Cleaning Type</title>
<style>
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.wrapper{
max-width:1100px;
min-width:900px;
margin:0 auto;
}
</style>
<script type="text/javascript">
ac = "";
appd = [];
appc = [];
na = 8;
appd[0] = "";
appc[0] = ;
appd[1] = "";
appc[1] = ;
appd[2] = "";
appc[2] = ;
appd[3] = "";
appc[3] = ;
appd[4] = "";
appc[4] = ;
appd[5] = "";
appc[5] = ;
appd[6] = "";
appc[6] = ;
appd[7] = "";
appc[7] = ;
function chk_vals() {
if (ac == "c") {
document.st.action = "projects.php";
return true;
}
if (document.st.proj_loc.value == "" || document.st.eng_co_name.value == "" || document.st.eng_loc.value == "" || document.st.purch_loc.value == "" || document.st.purch_co_name.value == "" || document.st.const_type.value == "" || document.getElementById("datepickerid").value == "") {
alert ("All values marked * are required");
return false;
}
if (document.st.po.value != "") {
val = document.st.po.value;
ln = val.length;
valok = false;
for (j = ln - 1; j > 0; j--) {
if (field.charAt(j) == ".") {
ext = val.substr(j+1, ln-j+1);
if (ext == "pdf" || ext == "doc" || ext == "docx") {
valok = true;
break;
}
}
}
if (! valok) {
alert ("Invalid PO file type");
return false;
}
}
return true;
}
function chk_new_proj() {
if (document.st.proj.value == "new") {
document.st.action = "main.php?new=y";
document.st.submit();
} else {
document.st.action = "main.php?proj=" + document.st.proj.value ;
document.st.submit();
}
}
function get_app_code() {
for (i = 0; i < na; i++) {
if (document.st.appl_type.selected) {
j = i;
break
}
}
ret = appc[j];
if (ret < 1000) {
ret = "0" + ret;
}
return ret;
}
function prof_window() {
window.open("profile.php", "profile", "width=1000, height=600, left=800, top=300, scrollbars=yes, menubar=yes, resizable=yes");
return false;
}
</script>
<!-- Global site tag (gtag.js) - Google
Analytics -->
<script async
src="https://www.googletagmanager.com
/gtag/js?id=UA-96994211-3"></script>
<script>
window.dataLayer = window.dataLayer
|| [];
function
gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-96994211-3');
</script>
<script>
$(function() {
$( "#datepickerid" ).datepicker();
$('[name=appl_type]').change(function() {
$('#app_code').text( $(this).val() );
});
});
</script>
</head>
<body>
<div class="wrapper">
<form method="post" name="st" action="save_ls250n1.php?pid=25" onSubmit="return chk_vals();" enctype="multipart/form-data">
<input type="hidden" name="hvtype">
<div class="container-fluid" >
<script>
page = location.pathname.substring(1);
pq = page.indexOf("?");
if (pq != -1) {
page = page.substr(0,pq);
}
if (page.substr(0,4) == "dev/") {
ln = page.length;
page = page.substr(4,ln-4);
}
function chk_link_msg() {
ok = false;
if (page == "projects.php" || page == "main.php" || page == "summary.php") {
ok = true;
}
if (! ok) {
jj = confirm("Going to My Projects will loose the current configuration. OK?");
if (!jj) {
return false;
}
}
return true;
}
</script>
<div class="row hidden-xs">
<div class="col-sm-4 col-xs-4"><a href = "http://www.lakos.com/hvac.htm" border="0" target="_blank"><img src="images/logo.jpg" class="img-responsive"></a></div>
<div class="col-sm-1 col-xs-1 text-center" style="color:#0C63A9;"><a href="main.php"><h4>Home</h4></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="projects.php" onClick="return chk_link_msg();"><h4>My Projects</h4></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="http://www.lakos.com/About/contact-us" target="blank"><h4>Contact LAKOS</h4></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="profile.php" onClick="return prof_window();"><h4>Profile</h4></a></div>
<div class="col-sm-1 col-xs-1 text-center" style="color:#0C63A9;"><a href="logout.php"><h4>Logout</h4></a></div>
</div>
<div class="row visible-xs">
<div class="col-sm-4 col-xs-4"><a href = "http://www.lakos.com/hvac.htm" border="0" target="_blank"><img src="images/logo_sm.jpg" ></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="main.php"><h5>Home</h5></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="http://www.lakos.com/About/contact-us" target="blank"><h5>Contact LAKOS</h5></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="profile.php" onClick="return prof_window();"><h5>Profile</h5></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="logout.php"><h5>Logout</h5></a></div>
</div><div class="row">
<div class="col-sm-12 col-xs-12" style="padding-top:3px;"> </div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 text-center" style="padding-top:2px; padding-bottom:2px; background-color:#0A2F98; color: white; font-size:20px"><b>IND Product Configurator</b></div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 text-center" style="padding-top:2px; padding-bottom:2px;font-size:20px"><b>Submit LS-250</b></div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10" style="padding-top:2px;"><b>Project/End-User Information</b><br><img src="images/blue_line.jpg" height="1" width="900"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Project/End-User Name</div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Project to test LS-350</div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Project Location (City, State, Country) <span style="color: red; font-size:18px;">*</span></div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><input type="text" name="proj_loc" style="width:400px;"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10" style="padding-top:10px;"><b>Engineering Information</b><br><img src="images/blue_line.jpg" height="1" width="900"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Spec Engineering Company Name <span style="color: red;font-size:18px;">*</span></div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><input type="text" name="eng_co_name" style="width:400px;"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Spec Engineer Location (City, State, Country) <span style="color: red;font-size:18px;">*</span></div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><input type="text" name="eng_loc" style="width:400px;"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10" style="padding-top:10px;"><b>Contractor Purchasing Information</b><br><img src="images/blue_line.jpg" height="1" width="900"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Purchasing Contractor Company Name <span style="color: red;font-size:18px;">*</span></div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><input type="text" name="purch_co_name" style="width:400px;"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Purchasing Contractor Location (City, State, Country) <span style="color: red;font-size:18px;">*</span></div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><input type="text" name="purch_loc" style="width:400px;"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Purchasing Contractor Contact Name</div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><input type="text" name="purch_con_cont" style="width:400px;"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Estimated Close Date <span style="color: red;font-size:18px;">*</span></div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><input type="text" name="estcldate" id="datepickerid"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Upload Purchase Order (Word or pdf)</div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><input type="file" name="po"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10" style="padding-top:10px;"><b>Application Information</b><br><img src="images/blue_line.jpg" height="1" width="900"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Type of Application <span style="color: red;font-size:18px;">*</span></div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><select name="appl_type">
<option value=""></option>
<option value="300">Municipal Water Supply</option>
<option value="600">Food Processing</option>
<option value="1400">Oil/Gas</option>
<option value="1800">Power Plants</option>
<option value="3000">General Industrial</option>
<option value="3100">Automotive</option>
<option value="3200">Primary Metals</option>
<option value="5000">Biofuels/Ethanol</option>
</select></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;">Comments:</div>
<div class="col-sm-5 col-xs-5" style="padding-top:2px; padding-bottom:2px;"><textarea rows="5" cols="80" name="comments"></textarea></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10" style="padding-top:10px;">After clicking "Submit LS-250", Lakos will review your submission and determine if you should get all available<br>specification credit. Consult Lakos or your Regional Sales Manager if you have any questions.</div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10" style="padding-top:10px;font-size:17px; color:red;">* indicates required field.</div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-5 col-xs-5" style="padding-top:20px;font-size:17px;">Specific Application Information</div>
<div class="col-sm-5 col-xs-5 text-right"><input type="text" id="app_code"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-10 col-xs-10 text-right" style="padding-top:10px; padding-bottom:10px;"><input type="submit" value="Cancel & Return to my Projects" style="color:white; background-color: #5B9BD5; border-style: solid; border-color:#41719C; box-shadow: 4px 4px 2px #C3BDBD;" onMousedown="ac='c';"><span style="padding-right:50px;"> </span><input type="submit" value="Submit LS-250" style="color:white; background-color: #5B9BD5; border-style: solid; border-color:#41719C; box-shadow: 4px 4px 2px #C3BDBD;" onMousedown="ac='s';"></div>
<div class="col-sm-1 col-xs-1"> </div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12" style="font-size:15px;">Please email any questions, comments, or feedback to <a href="mailto:lit@lakos.com">lit@lakos.com</a></div>
</div>
<div class="row">
<div class="col-sm-10 col-xs-10" style="padding-top:4px;"> </div>
</div>
<br><br>
</div>
</form>
</div>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Perfect, thanks.
You can either store the code as the value and the descr as the display text:
Open in new window
Or you can store the code as a data-attributeOpen in new window
Which option you prefer will depend on how you want to access the data. The first example is ideal if the select is to be submitted along with a form (it would be the code that gets submitted, not the description). The second option may be more suitable if you're dealing with the <select> using Javascript