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 get a PHP array index converted to a javascript variable

I'm getting a set of user roles from the database using PHP and they are put in a <select> tag's <option>s as follows:
<div class="col-md-3">
<select name="role" id="user_role" class="form-control" onkeyup="clearMsg('roleerr')" onchange="getRole()"/>
<option value="">Select a Role</option>
<?php while($rowrole = $resultrole->fetch(PDO::FETCH_BOTH)) { ?>
<option value="<?php echo $rowrole ['role_id']; ?>">
<?php echo $rowrole ['role_name']; ?>
</option>
<?php } ?>
</select>
<span id="roleerr" class="error">*</span>
</div>
And I want to get the selected value of the dropdown 'onchange' and for that getRole() javascript function is written. How to get this done?

When the element changes, the value of the dropdown will be set to the value attributed to the selected option. So you would just define your javascript function and have it fetch the value of the dropdown:
function getRole(){
var finalVal = document.getElementById("user_role").value;
// And then here you can do whatever you want with the information
}

You can assign value in paramater in onchange()
this should work below
function getRole(value) {
if(value != "")
alert(value)
}
<div class="col-md-3">
<select name="role" id="user_role" class="form-control" onchange="getRole(this.value)"/>
<option value="">Select a Role</option>
<option value="23">select 23</option>
<option value="24">select 24</option>
<option value="25">select 25</option>
</select>
<span id="roleerr" class="error">*</span>
</div>

You could try event of onchange.
onchange="getRole(event)"
Javascript.
function getRole(event) {
var selectElement = event.target;
var value = selectElement.value;
alert(value);
}
I tested it with hard data.
function getRole(event) {
var selectElement = event.target;
var value = selectElement.value;
alert(value);
}
<div class="col-md-3">
<select name="role" id="user_role" class="form-control" onchange="getRole(event)"/>
<option value="">Select a Role</option>
<option value="1">admin</option>
<option value="2">user</option>
<option value="3">support</option>
</select>
<span id="roleerr" class="error">*</span>
</div>

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>

How to call HTML required attribute when the value is 0?

I have a drop down list where I'm populating data from the database.
<div class="form-group">
<label>Title:</label>
<select class="form-control" name="Title" id ="titleselect" required>
<!-- <option value="" selected="selected">?</option> -->
<?php foreach ($titles as $row) {
if($this->session->userdata('status')=='active' && $this->session->userdata('Title') == $row->id) { ?>
<option value="<?php echo $row->id; ?>" selected="selected"><?php echo $row->value; ?></option>
<?php }else{?><option value="<?php echo $row->id; ?>"><?php echo $row->value; ?></option><?php } }?>
</select>
</div>
My form,
How values are populated from the database,
My database table,
I want to add a validation when the title form is populated with the value "0", which is "?", it should call the HTML required attribute.
Or I would like to disable the option with the '?' mark.
How can I do achieve this?

I have managed to find a solution to my issue. I managed to do it without any JS or Jquery. Just added an if statement.
<div class="form-group">
<label>Title:</label>
<select class="form-control" name="Title" id ="titleselect" required>
<?php foreach ($titles as $row) {
if($this->session->userdata('status')=='active' && $this->session->userdata('Title') == $row->id) { ?>
<?php if(($this->session->userdata('Title') == 0)) { ?>
<option value="" selected disabled><?php echo $row->value; ?></option>
<?php } else{?>
<option value="<?php echo $row->id; ?>" selected="selected"><?php echo $row->value; ?></option>
<?php } ?>
<?php }else{?><option value="<?php echo $row->id; ?>"><?php echo $row->value; ?></option><?php } }?>
</select>

you can use jquery like this: you can use an id for ? like id="yourZeroOption" and then
$('option#yourZeroOption').each(function() {
if ($(this).isChecked())
$("select").attr("required", true);
else
alert('this filled cannot be ?');
});
since what you asked was'nt clear enough this code might helf and if you manipulate this code you can get what you want from your code. but this for sure will give you a gist of what you should do. by the way this code does not need to submit it will show the alert before that

If this is in Laravel there is a way to catch certain number to be pass. In this case, try with greater_than rule with a custom message.
Example
$this->form_validation->set_rules('title', 'Title', 'greater_than[0]');
$this->form_validation->set_message('greater_than', 'Please select one of these value');
Note: JS validation works, But keep mind it's not always.

You should mark your <select> field as required, then the first option as disabled (and selected):
<select required>
<option value="" selected disabled>?</option>
<option value="1">Mr.</option>
<option value="2">Miss</option>
<option value="3">Mrs.</option>
</select>
This will make the first entry work as a placeholder basically.

we cant make it require with 0 value it can be done only if value=""
here is my idea,
<form action="/action_page.php">
<select required>
<option value="0">?</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select option:selected").val("");
});
</script>
<style>

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.