我想当我单击模态上的单选按钮 (objectart) 时,它应该更改另一个 div(objecttype) 中模态上的其他 div 数据(获取数据库)
i want when i click on radio button (objectart) on modal then it should change other div data (fetch database) on modal in another div(objecttype)
当我单击按钮时,会弹出此模式。
这是我的 Modal div 代码:如果我单击 objectart,则应在 Modal 上更改 objecttype 选项。对象类型 div 正在调用函数并根据 objectart_id 获取记录。通过 ajax,我正在获取 objectart_id。请帮助我。
Modal.php
<div class="form-group row mb-3">
<div class="modal" id="myModal">
<div class="modal-content">
<div class="modal-header">
<span class="close" id="shut">×</span>
</div>
<div class="modal-body row">
<div class="col-lg-3 p-2">
<div class="row">
<label><input type="radio" name="objektart_id" value="1"> Room</label>
<label><input type="radio" name="objektart_id" value="2" <?php echo ($objectart_id == 2) ? 'checked' : "" ?>> Flat</label>
<label><input type="radio" name="objektart_id" value="3" <?php echo ($objectart_id == 3) ? 'checked' : "" ?>> Haus</label>
<label><input type="radio" name="objektart_id" value="4" <?php echo ($objectart_id == 4) ? 'checked' : "" ?>> Land</label>
<label><input type="radio" name="objektart_id" value="5" <?php echo ($objectart_id == 5) ? 'checked' : "" ?>> Office</label>
</div>
</div>
<div class="col-lg-3 p-2">
<div class="row" id="objekttyp">
<label class="col-md-12 col-form-label"> Objecttype</label>
<?php echo getObjektartSubtyp($objectart_id); ?>
</div>
</div>
<div class="p-5" id="submit-detail">
<button type="submit" class="btn btn-success btn-lg mt-2 mt-sm-0">Search</button>
</div>
</div>
</div>
</div>
myFunction.php
函数 getObjektartSubtyp($ids){
global $db;
$sql = 'SELECT * FROM objekt_objektart_subtyp WHERE suche = "J" and objekt_objektart_id = ' . $ids;
$result = $db->query($sql)->fetchAll();
$html = '';
foreach($result as $subtyp){
$html.= '<label class="col-md-12 col-form-label search-objektart-subtyp" data-objektart="'.$subtyp['objekt_objektart_id'].'">
<input type="checkbox" name="objektart_subtyp_id[]" value="'.$subtyp['objekt_objektart_subtyp_id'].'"';
// if(in_array($subtyp->objekt_objektart_subtyp_id, $ids)){ $html.= ' checked="checked"'; }
$html.= '> '.$subtyp['name'].'</label>';
}
return $html;
}
使用 ajax 从数据库中获取特定单选按钮的详细信息,然后更新 objekttype
分部。
<script>
var id;
document.getElementsByName('objektart_id').forEach(item => {
item.addEventListener('change', event => {
if(item.checked == true) {
id = item.getAttribute("object_id");
//console.log(id); //for debugging
//Now ajax call
$.post("somePHP.php",{id: id, type: "get_subType"},
function(data, status){
if(status == "success"){
$("#objekttype").html(data);
}
})
};
})
})
</script>
somePHP.php
if(isset($_POSST['type'])){
if($_POST['type'] == "get_subType"){
global $db;
$id = $_POST['id'];
$sql = 'SELECT * FROM objekt_objektart_subtyp WHERE suche = "J" and objekt_objektart_id = ' . $ids;
$result = $db->query($sql)->fetchAll();
$html = '';
foreach($result as $subtyp){
$html.= '<label class="col-md-12 col-form-label search-objektart-subtyp" data-objektart="'.$subtyp['objekt_objektart_id'].'">
<input type="checkbox" name="objektart_subtyp_id[]" value="'.$subtyp['objekt_objektart_subtyp_id'].'"';
// if(in_array($subtyp->objekt_objektart_subtyp_id, $ids)){ $html.= ' checked="checked"'; }
$html.= '> '.$subtyp['name'].'</label>';
}
echo $html;
}
}
如果您希望有一个单独的函数来获取子类型,您可以 add_action
或在 type == 'get_subType'
上调用该函数。
如有任何疑问,请在下方评论。
当我单击按钮时,会弹出此模式。 这是我的 Modal div 代码:如果我单击 objectart,则应在 Modal 上更改 objecttype 选项。对象类型 div 正在调用函数并根据 objectart_id 获取记录。通过 ajax,我正在获取 objectart_id。请帮助我。
Modal.php
<div class="form-group row mb-3">
<div class="modal" id="myModal">
<div class="modal-content">
<div class="modal-header">
<span class="close" id="shut">×</span>
</div>
<div class="modal-body row">
<div class="col-lg-3 p-2">
<div class="row">
<label><input type="radio" name="objektart_id" value="1"> Room</label>
<label><input type="radio" name="objektart_id" value="2" <?php echo ($objectart_id == 2) ? 'checked' : "" ?>> Flat</label>
<label><input type="radio" name="objektart_id" value="3" <?php echo ($objectart_id == 3) ? 'checked' : "" ?>> Haus</label>
<label><input type="radio" name="objektart_id" value="4" <?php echo ($objectart_id == 4) ? 'checked' : "" ?>> Land</label>
<label><input type="radio" name="objektart_id" value="5" <?php echo ($objectart_id == 5) ? 'checked' : "" ?>> Office</label>
</div>
</div>
<div class="col-lg-3 p-2">
<div class="row" id="objekttyp">
<label class="col-md-12 col-form-label"> Objecttype</label>
<?php echo getObjektartSubtyp($objectart_id); ?>
</div>
</div>
<div class="p-5" id="submit-detail">
<button type="submit" class="btn btn-success btn-lg mt-2 mt-sm-0">Search</button>
</div>
</div>
</div>
</div>
myFunction.php
函数 getObjektartSubtyp($ids){
global $db;
$sql = 'SELECT * FROM objekt_objektart_subtyp WHERE suche = "J" and objekt_objektart_id = ' . $ids;
$result = $db->query($sql)->fetchAll();
$html = '';
foreach($result as $subtyp){
$html.= '<label class="col-md-12 col-form-label search-objektart-subtyp" data-objektart="'.$subtyp['objekt_objektart_id'].'">
<input type="checkbox" name="objektart_subtyp_id[]" value="'.$subtyp['objekt_objektart_subtyp_id'].'"';
// if(in_array($subtyp->objekt_objektart_subtyp_id, $ids)){ $html.= ' checked="checked"'; }
$html.= '> '.$subtyp['name'].'</label>';
}
return $html;
}
使用 ajax 从数据库中获取特定单选按钮的详细信息,然后更新 objekttype
分部。
<script>
var id;
document.getElementsByName('objektart_id').forEach(item => {
item.addEventListener('change', event => {
if(item.checked == true) {
id = item.getAttribute("object_id");
//console.log(id); //for debugging
//Now ajax call
$.post("somePHP.php",{id: id, type: "get_subType"},
function(data, status){
if(status == "success"){
$("#objekttype").html(data);
}
})
};
})
})
</script>
somePHP.php
if(isset($_POSST['type'])){
if($_POST['type'] == "get_subType"){
global $db;
$id = $_POST['id'];
$sql = 'SELECT * FROM objekt_objektart_subtyp WHERE suche = "J" and objekt_objektart_id = ' . $ids;
$result = $db->query($sql)->fetchAll();
$html = '';
foreach($result as $subtyp){
$html.= '<label class="col-md-12 col-form-label search-objektart-subtyp" data-objektart="'.$subtyp['objekt_objektart_id'].'">
<input type="checkbox" name="objektart_subtyp_id[]" value="'.$subtyp['objekt_objektart_subtyp_id'].'"';
// if(in_array($subtyp->objekt_objektart_subtyp_id, $ids)){ $html.= ' checked="checked"'; }
$html.= '> '.$subtyp['name'].'</label>';
}
echo $html;
}
}
如果您希望有一个单独的函数来获取子类型,您可以 add_action
或在 type == 'get_subType'
上调用该函数。
如有任何疑问,请在下方评论。