J'ai une table dans la base de données comme ci-dessous
<form>
<select class="form-control" id="service">
<option></option>
<option value='1'>Wifi</option>
<option value='2'>Fiber Optic</option>
</select>
<table>
<tbody>
<tr class="main">
<td></td>
<td>
<input type="text" name="service" class="form-control" placeholder="service">
</td>
<td>
<input type="text" name="rate" class="form-control" placeholder="Rate / Price">
</td>
<td>
<input type="text" name="unit" class="form-control" placeholder="Mbps/Km">
</td>
</tr>
</tbody>
</table>
</form>
3 Réponses :
Utilisation de certains PHP de base pour émuler une recherche de base de données et certains vanilla JavaScript, vous feriez généralement quelque chose comme ça. Envoyez une demande Ajax à un script PHP qui recherche la base de données basée sur la valeur / ID envoyée dans la demande. Laissez le script PHP envoyer une réponse contenant les données correctes, puis utilisez le rappel AJAX pour remplir les champs de formulaire.
<?php
/* To emulate a database lookup */
$dbtable=array(
1 => (object)array('service' => 'wifi', 'rate' => 1000, 'unit' => 'mbps'),
2 => (object)array('service' => 'fibre optic', 'rate' => 1500 , 'unit' => 'km')
);
if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['id'] ) ){
ob_clean();
$obj=array_key_exists( $_POST['id'], $dbtable ) ? $dbtable[ $_POST['id'] ] : false;
header('Content-Type: application/json');
exit( $obj ? json_encode( $obj ) : $obj );
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Set Form field values based upon selected option</title>
<script>
const ajax=function(url,params,callback){
let xhr=new XMLHttpRequest();
xhr.onload=function(){
if( this.status==200 && this.readyState==4 )callback.call( this, this.response )
};
xhr.open( 'POST', url, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send( params );
};
document.addEventListener('DOMContentLoaded',()=>{
document.querySelector('select[id="service"]').addEventListener('change',function(e){
ajax( location.href, 'id='+this.value, function(r){
if( !r ){
alert( 'Bad foo!' );
return;
}
let json=JSON.parse( r );
Object.keys( json ).map( k=>{
let field=document.querySelector('input[name="'+k+'"]');
if( field )field.value=json[k]
})
});
});
});
</script>
</head>
<body>
<select class='form-control' id='service'>
<option selected disabled hidden>Please select service
<option value=1>Wifi
<option value=2>Fibre Optic
</select>
<table>
<tr class='main'>
<td></td>
<td>
<input type='text' name='service' class='form-control' placeholder='service' />
</td>
<td>
<input type='text' name='rate' class='form-control' placeholder='Rate / Price' />
</td>
<td>
<input type='text' name='unit' class='form-control' placeholder='Mbps/Km' />
</td>
</tr>
</table>
</body>
</html>
Si la table contient ces deux valeurs uniquement, vous pouvez obtenir la valeur de l'option sélectionnée et récupérer le résultat en fonction de cela. Donnez un nom à sélectionner -
$selectedOption = $_REQUEST['service']; //this will store the value of option
$con=mysqli_connect("server","username","password","db_name");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM table_name where id = $selectedOption");
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td><input value='" . $row['service'] . "'></td>";
echo "<td><input value='" . $row['rate'] . "'></td>";
echo "<td><input value='" . $row['unit'] . "'</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
Je vous suggère d'utiliser jQuery. Pour que vous puissiez déclencher une demande Ajax à votre contrôleur. Dans votre contrôleur, vous obtenez l'option sélectionnée et Fatch Data de votre table de base de données avec modèle. Ensuite, renvoyez les données de contrôleur à la demande Ajax et repeuplez-la avec le formulaire HTML. Voici un exemple. Demande de déclenchement Ajax à contrôleur à partir de la page HTML.
$service = $_POST['service'];
$service_info = array();
if(!empty($service)){
//get data from model
$service_info = $data_from_model;
}
header('Content-Type: application/json');//set header
if(!empty($service_info)){
echo json_encode(array('result'=>1,'service_name' =>
$service_info['name'],'rate'=>$service_info['rates'],
'units'=>$service_info['units']));
}else{
echo json_encode(array('result'=>0));
}
Bonjour @infomasud, alors comment convertir les données JSON en tableau dans le formulaire?
Essayer: var jsondata = json.parse (données);
@LKRAMSHABRI Vous devez mettre un attribut d'identifiant à tous vos champs de saisie. Alors essayez: var jsondata = json.parse (données); if (jsondata.result == 1) {$ ("# service_input_id"). Val (jsondata.service_name); }
Votre table HTML n'est pas valide - pas de fermeture
Tody outr tags