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:
$qryac = "SELECT * from app_codes order by code";
	$resac = mysqli_query($link, $qryac);
	$na = mysqli_num_rows($resac);

Open in new window


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>

Open in new window

All this works exactly as expected. The select has the descr values from the table.

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
Richard KortsBusiness Owner / Chief DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
You have a couple of options here Richard,

You can either store the code as the value and the descr as the display text:

<?php while ($ac = mysqli_fetch_array($resac, MYSQLI_ASSOC)): ?>
    <option value="<?= $ac['code'] ?>"><?= $ac['descr'] ?></option>
<?php endwhile; ?>

Open in new window

Or you can store the code as a data-attribute

<?php while ($ac = mysqli_fetch_array($resac, MYSQLI_ASSOC)): ?>
    <option data-code="<?= $ac['code'] ?>" value="<?= $ac['descr'] ?>"><?= $ac['descr'] ?></option>
<?php endwhile; ?>

Open 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
1
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
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.
0
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
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:

<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Chris StanyonWebDevCommented:
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() );
});

Open in new window

1
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Sounds perfect, I'll try it.

Richard
0
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
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:
<script>
  $(function() {
    $( "#datepickerid" ).datepicker();
  });
  $('[name=appl_type]').change(function() {
    $('#app_code').text( $(this).val() );
});
	  
</script>

Open in new window


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>

Open in new window


Text element:
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>

Open in new window


After selecting an option from the select, nothing shows in this text box.

Thanks,

Richard
test_chris_Jquery.JPG
0
Chris StanyonWebDevCommented:
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:

$(function() {
    $( "#datepickerid" ).datepicker();
    $('[name=appl_type]').change(function() {
        $('#app_code').text( $(this).val() );
    });
});

Open in new window

0
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
I hate to be stupid, but I don't know what a document.ready block is.

Can you point me to an example?

Richard
0
Chris StanyonWebDevCommented:
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:

$( document ).ready(function() {

    // any code in here won't fire until the document is ready

});

Open in new window

In your code, you have already used the shorthand version of the document ready block:

$(function() {

    // any code in here won't fire until the document is ready

});

Open in new window

In the original code you posted, the change event was outside of this function. My edit just moved it inside.
1
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Chris,

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;">&nbsp;</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">&nbsp;</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">&nbsp;</div>
</div>	
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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;">&nbsp;</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">&nbsp;</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;">&nbsp;</div>
</div>	
<br><br>	
</div>
</form>
</div>
</body>
</html>

Open in new window


Nothing shows in the text box to the right of "Specific Application Information" when the value of the select is changed,

Thanks,

Richard
0
Chris StanyonWebDevCommented:
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:

$(function() {
    $( "#datepickerid" ).datepicker();
});

$('[name=appl_type]').change(function() {
    $('#app_code').text( $(this).val() );
});

Open in new window

You need to move the 'change' event handler so that's inside of the ready block, so it should look like:

$(function() {
    $( "#datepickerid" ).datepicker();

    $('[name=appl_type]').change(function() {
        $('#app_code').text( $(this).val() );
    });
});

Open in new window

0
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
I did that, does not work.

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;">&nbsp;</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">&nbsp;</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">&nbsp;</div>
</div>	
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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">&nbsp;</div>
</div>
<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</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;">&nbsp;</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">&nbsp;</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;">&nbsp;</div>
</div>	
<br><br>	
</div>
</form>
</div>
</body>
</html>

Open in new window

0
Chris StanyonWebDevCommented:
Ahh. OK Richard,

Just noticed you're trying to set a textbox to the value selected. The textbox doesn't have text method- you need to use val instead, so this:

$('#app_code').text( $(this).val() );

should be this:

$('#app_code').val( $(this).val() );

You may have some other errors in your JS which you probably want to fix as well. Any errors could lead to things not quite working the way you expect. When you load up your page, check the browsers console for any script errors.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Perfect, thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.