Brandon Brandon - 11 months ago 53
jQuery Question

change event on drop down

I am trying to code a page to modify database entries. I want to pull the database up and place the 3rd column into a drop down list. When an item from the drop down list is selected I then want to have the info from the row that selection was in, in the database, to populate the form. I have the drop down populated and working but my question would be, what am I doing wrong, or what would your suggestion be to code the change event? I am attempting to use a jQuery change event but I am still learning and apparently I dont have it coded right. I tried to start simple and just have it echo the item that was selected to make sure I have the on change correct first, but apparently I do not.

<?php
include("header.html");
include("connection.php");
$query= "SELECT * FROM components";
if($result = mysqli_query($link, $query)) {
$item="<p><select name='part' id='inp'>";
while ($row=mysqli_fetch_array($result)) {
$item.="<option>".$row[2]."</option>";
}
$item.="</select></p>";
}
?>
<html>
<body>
<script>
$('select').on('change',function () {
$sel=$(this).value;
});
</script>
<div id="main">
<div id="test"></div>
<?php
echo $item;
echo $sel;
?>
<form method = "post">
<p><input name="itemnumber" id ="inp" type="text" placeholder="Item #"></p>
<p><input name="cost" id ="inp" type="text" placeholder="Price"></p>
<p><input name="company" id ="inp" type="text" placeholder="Company"></p>
<p><input name="contact" id ="inp" type="text" placeholder="Contact"></p>
<p><input name="address1" id ="inp" type="text" placeholder="Address"></p>
<p><input name="address2" id ="inp" type="text" placeholder="City / State / Zip"></p>
<p><input name="phone" id ="inp" type="text" placeholder="Phone Number"></p>
<p><select name="part" id="inp">
<option value="select" selected>Choose One</option>
<option value="base">Base Product</option>
<option value="coating">Coating</option>
<option value="topping">Topping</option>
<option value="film">Film</option>
<option value="corrugate">Corrugate</option>
</select></p>
<p><input type="submit" name="submit" id="submitbutton" value = "Submit"></p>
</form>
</div>
</body>
</html>
<?php include("footer.html"); ?>

Ima Ima
Answer Source

The basic thing is that you cannot execute php after the page is really loaded in the browser. So if you want to do any thing after the page is loaded, either you have to use javascript that executes in the browser or use javascript to do a request back to your server and execute php script.

Here your requirement is simple you need to show the selected value of dropdown in the page

<script>
$('select').on('change',function () {
    $('#selectedvalue').html($(this).val());
});
</script>


<?php
echo $item;
?>
<div id="selectedvalue"></div>

Note: I expect you include jquery library js in the page