javascript - How to fill a Select from another Select from different tables in the DB in php, Js and Ajax?
one text
I am making a small form where it asks to enter "Password", when entering it and pressing the enter key, automatically with Ajax it makes the query to the database, and if that password exists, it fills the fields of "User" and "Company", the User field is a text field, and the Company field is a Select, now, the problem I have is that there is also another Select, where the branch of the selected company goes, so far I can fill perfectly the user and the drop-down list of options of the Select of "Company", what I have not been able to achieve is to fill the Select of "Branch" from the DB depending on the Company that the user chooses, that is, I want that when selecting a certain company , automatically the list of Branch options is filled depending on the branches that the company that was selected has, the companies are in a different table in the DB, and the branches are also in a different table, so I want to make a query to the Select of "Branch" verifies the ID of the company and shows the branches indicated for said company. Thank you very much in advance
I attach my Html code:
<!DOCTYPEhtml>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="./app.js" charset="utf-8"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="home5.css">
<link rel="stylesheet" href="style2.css">
<title>Management 2022</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<div class="divarabove">
<h5>SDIG</h5>
<h6>Management</h6>
<div class="icon2 icon-key"></div>
<h1>Website Management</h1>
</div>
<div class="corner" style="display:none;"></div>
<table class="dataentries">
<tr>
<form method="POST">
<td><h2 class="password">Password:</h2></td> <td class="td"><input class="boxpassword" id="password" type="text" name="password " autocomplete="off" value=""></td>
</tr>
<tr>
<td><h2 class="user">User:</h2></td> <td><input type="text" class="userbox" id="user" name="user" disabled style=" background:transparent;border:none;" value=""></td>
</tr>
<td><h2 class="company">Company:</h2></td>
<td><select name="company" id="company" value="" style="width:98%; height:calc(1.2em + 1.2vw); font-family: Arial, Helvetica, sans-serif; ">
<option value="0"></option>
</select></td>
</tr>
<td><h2 class="branch">Branch:</h2></td>
<td><select name="branch" id="branch" value="" style="width:98%;
height:calc(1.2em + 1.2vw); font-family: Arial, Helvetica, sans-serif;">
<option value="0"></option>
</select></td>
</table>
<div id="Hidden"></div>
<script>
$("input[name='password']").keypress(function(e) {
if(e.which == 13) {
$.post('login.php', {
password : $("input[name='password']").val()
}, function(data){
$('#Hidden').html(data);
});
}
});
</script>
<div class="divabelow">
<table class="buttonsdown">
<tr>
<td><label style="color:green; background: white; font-size: calc(1em + 1vw); border-radius: 45%; width: 20%;"><input type="submit" id= "register" disabled class="btenter" value="Login" name="register"></td>
<td><button class="btcancel"><label style="color:white; font-size: calc(1em + 1vw);">??��</label> Cancel</button></td>
</tr>
</table>
</form>
</div>
<?php
include("login.php");
?>
<script language="javascript">
$(document).ready(function(){
$("#company").change(function () {
$("#company option:selected").each(function () {
$IDECOMPANY = $(this).val();
$.post("includes/enter.php", { IDEMPRESA: IDEMPRESA }, function(data){
$("#branch").html(data);
});
});
})
});
</script>
</body>
</html>
and my php code:
<?php
header("Content-Type: text/html;charset=utf-8");
$conex = mysqli_connect("SERVER", "USER", "PASSWORD", "DB");
if ($connect->connect_error) {
die('<p>Failed to connect to MySQL: '. $conex->connect_error .'</p>');
} else {
echo '<p>Connection to MySQL server successfully established.</p>';
}
?>
<script>
$("input[name='user']").val('');
$IDEMPRESA = $_POST['IDEMPRESA'];
</script>
<?php
$password = utf8_decode(is_numeric(htmlspecialchars(mysqli_real_escape_string($conex,$_POST['password']))))?$_POST['password']:NULL;
if(!is_null($password)){
$query = 'SELECT * FROM customers WHERE password= '.$password.';';
$row = $conex->query($query);
$record = $row->fetch_assoc();
$totalrows = $conex->affected_rows;
if($totalrows == 0){
echo "<script>alert('There are no values ??�??�matching the search.');</script>";
} else {
?>
<script>
$("input[name='username']").val("<?php echo $registration['username'];?>");
<?php
$sql = "SELECT COMPANYID, NAME FROM companydata LIMIT 10";
$resultset = mysqli_query($connect, $sql) or die("database error:". mysqli_error($connect));
while( $rows = mysqli_fetch_assoc($resultset) ) {
?>
$('#company').append( $('<option>', { value: "<?php echo $rows["COMPANY"]; ?>", text: "<?php echo $rows["NAME "]; ?>" } ) );
<?php }
?>
<?php
$IDEMPRESA = $_POST['IDEMPRESA'];
$sql = "SELECT BRANCHID, NAME FROM branches WHERE IDEMPRESA = '$IDEMPRESA';";
$resultset = mysqli_query($connect, $sql) or die("database error:". mysqli_error($connect));
while( $rows = mysqli_fetch_assoc($resultset) ) {
?>
$('#branch').append( $('<option>', { value: "<?php echo $rows["BRANCHID"]; ?>", text: "<?php echo $rows["NAME "]; ?>" } ) );
<?php }
?>
</script>
<?php
}
} else {
echo "<script>alert('You are entering a non-numeric value');</script>";
exit();
}
?>