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 KortsAsked:
Who is Participating?
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 KortsAuthor 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 KortsAuthor 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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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 KortsAuthor Commented:
Sounds perfect, I'll try it.

Richard
0
Richard KortsAuthor 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 KortsAuthor 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
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.