Develop Reference

How to display data in textbox from database MySQL based on selected option?

I have a table "tb_seri" in MySQL, with columns "id_seri", "nm_seri" and "value_seri"
So, I want to select "nm_seri" in the select option, and then "value_seri" will appear in the textbox afterwards based on "nm_seri" selected
Here is the code to select "nm_seri" from the database
<select name="nm_seri" id="nm_seri" onchange="myfunction()" required>
<option disabled selected>-Pilih Seri-</option>
<?php
$qu="Select DISTINCT nm_seri from tb_seri";
$res=$koneksi->query($qu);
while($r=mysqli_fetch_row($res))
{
echo "<option data-value='$r[1]' value='$r[0]'> $r[0] </option>";
}
?>
</select>
And I've tried various codes from here, but I'm still confused.
And this textbox code to display "value_seri"
<input type="text" name="value_seri" id="value_seri" value="" disabled><br></td>
<script>
function myFunction()
{
var value_seri = $('#value').find(':selected').data('nm_seri');
$('#value').val(value_seri);
}
</script>

In your current js code there is no value it should be nm_seri .Then , you are getting data attribute using data('nm_seri') it should be data('value') and show this value inside input box using $('#value_seri').val(value_seri); .Also ,your function name should match with onchange="myfunction()" so change that as well.
Demo Code :
function myfunction() {
var value_seri = $('#nm_seri').find(':selected').data('value');
$('#value_seri').val(value_seri);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="nm_seri" id="nm_seri" onchange="myfunction()" required>
<option disabled selected>-Pilih Seri-</option>
<option data-value='1' value='soemthing'> soemthing</option>
<option data-value='2' value='soemthing2'> soemthing2</option>
<option data-value='3' value='soemthin3g'> soemthing3</option>
</select>
<input type="text" name="value_seri" id="value_seri" value="" disabled><br>

How to restrict user to submit form if he doesnot select value from select Box-PHP

I am working on a project where admin have rights to add new users.
In ADD NEW USER form i have a select BOX of Designation which is populated from database . i want to know if user not select any designation from select options it will give error please select designation or some thing like this.
Here is my code:
<select class="form-control" name="designation" id="designation" style="color: black;" required>
<option value="<?php echo $row['designation_id']; ?>">Please Select designation</option>
<?php
$sel_cus = "select designation_name ,designation_id from designation ";
$res_cus = mysqli_query($connection, $sel_cus);
while ($row = mysqli_fetch_array($res_cus)) { ?>
<option value="<?php echo $row['designation_id ']; ?>"><?php echo $row['designation_name']; ?></option>
<?php
}
?>
</select>
If selected index of select box is 0 which is [Please Select designation] it will give error please select designation from list.
Need kind guidance.

You are accessing $row variable before it even exist in the following statement,
<option value="<?php echo $row['designation_id']; ?>">Please Select designation</option>
please replace this statement with following,
<option value="">Please Select designation</option>
value should be blank for the first option of select to work with required attribute.
Refer to this specification
And if you dont want the error to appear just remove the required attribute from the select element.

You can use this approach.
<form action="" method="post" onsubmit="return validateForm()">
<select class="form-control" name="designation" id="designation" style="color: black;" required>
<option value="0">Please Select designation</option>
<option value="1">designation 1</option>
<option value="2">designation 2</option>
</select>
<input type="submit" value="Submit">
</form>
<script>
function validateForm(){
var e = document.getElementById('designation');
var selectedDesig = e.options[e.selectedIndex].value;
if(selectedDesig == 0){
alert('Please Select designation');
return false;
}
return true;
}
</script>

Textbox fill empty value every time while changing the db dropdown value

I have one dropdown box and one textbox. I want when I select the dropdown value then, it will fill the matching database textbox value automatically based on the database drop-down selection.
Here is my code:-
Dropdown and Textbox:-
<select name="product" required>
<option value=""></option>
<?php
while($productRow = mysqli_fetch_assoc($productResult)){?>
<option value="<?php echo $productRow['ID'];?>">
<?php echo $productRow['Category']; ?></option><?php } ?>
</select>
<input placeholder="Phone Number" name="phoneNumber" id="pnum" type="text">
Script :-
<script>
$(document).ready(function(){
$('select[name="product"]').change(function()
{
$('#pnum').val($('select[name="product"] option:selected').data('Mobile'));
}
);
});
</script>
Now textbox fills the empty value in every time when dropdown value change.
pls help a lot.

You need to change the html to
<select name="product[]" size=20 multiple required>
<?php
while($productRow = mysqli_fetch_assoc($productResult)){?>
<option value="<?php echo $productRow['ID'];?>">
<?php echo $productRow['Category']; ?></option><?php } ?>
</select>
Then remove the script because it is no longer required. All the selection of items is done in the <select> element.
On the server-side you will pickup the values in the product array.

Unhide A Div Tag On Radio Button Select

I am new to HTML/JQuery and am attempting to unhide a div tag based off of a radio button selection. In my instance below if the user selects SR readio button, I want to unhide the s div - likewise, if the user selects the C radio button, I want to unhide the C div
I put together the below syntax, but when the page loads regardless which radio button is pressed. Neither div becomes visible.
<script>
$(document).ready(function() {
$("input[name$='src']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#src" + test).show();
});
});
</script>
<Input type = 'Radio' Name ='src' value= 'sr'>SR<p>
<Input type = 'Radio' Name ='src' value= 'C'>C
<p><p>
<div id="st" class="desc">
SR:
<select name="sp" id="SR" visible="false">
<option selected="selected">All</option>
<?php
foreach ($qry2 as $SR) {
?>
<option value="<?= $SR->SR ?>"><?= $SR->SR ?></option>
<?php };
?>
</select>
</div>
<div id="c" class="desc" visible="false">
C:
<select name="C" id="C">
<option selected="selected">All</option>
<?php
foreach ($qry1 as $name) {
?>
<option value="<?= $name->C ?>"><?= $name->C ?></option>
<?php };
?>
</select>
</div>

Looks like you've almost got it.
IDs of the .desc elements don't match the selectors you build based on the clicked inputs' values. For example, if I click on the "SR" button, the code tries to show an element with ID "srcSR", which does not exist.
Here's an adjusted example:
$(document).ready(function() {
$("input[name$='src']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#list_" + test).show();
});
})
.desc {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Input type='Radio' Name='src' value='sr'>SR
<Input type='Radio' Name='src' value='C'>C
<div id="list_sr" class="desc">
SR:
<select name="sp" id="SR" visible="false">
<option selected="selected">All</option>
<option value="">STUFF</option>
</select>
</div>
<div id="list_C" class="desc" visible="false">
C:
<select name="C" id="C">
<option selected="selected">All</option>
<option value="">STUFF</option>
</select>
</div>

Onchange select without refresh

When change value my page is refresh because i have to send value to query data
but my selector doesn't show value when selected
<form name='active' action='' method='GET'>
<select class="form-control" id="section" name="section" onchange="list()" >
<option value="0"> - - Select All - - </option>
<?php
$section = $db->fetch();
foreach ($section as $key => $v) {
$section_name = $v['section'];
echo "<option value='".$section_name."'>",$section_name,"</option>";
}
?>
<script type="text/javascript">
function list(){
document.active.submit();
}
</script>

For an option in a dropdown other than the first one to be selected on page load, you have to add the selected="selected" attribute to one of the <option> elements like so :
<select class="form-control" id="section" name="section" onchange="list()" >
<option value="0"> - - Select All - - </option>
<option value="1" selected="selected"> I'm selected </option>
<option value="2"> I'm not selected </option>
</select>
In your case, it implies checking either the GET variable or the database value in your foreach loop to set the attribute accordingly.