We Keep Coding

Using DIV like dependent dropdown lists [PHP + JS]

I have a DIV element as drop-down in PHP as below:
<div id="files" value="fileselect" selected="selected">Choose Folder1
<input type="hidden" name="test" id="hiddenfield" />
</div>
<div id="files2" value="fileselect2" selected="selected">Choose Folder2
<input type="hidden" name="test2" id="hiddenfield2" />
</div>
Now I try to get the value of selected option as follows:
<?php $content = ?>
<script type = text/javscript>
document.getElementById("files").value;
</script>
<?php echo $content; ?>
but I get unknown variable $content error.
And, I tried to create 'change' event handling in DIV element as follows:
$(document).ready(function()
{
//Bind a change event to the folder selector
$("#files").change(function()
{
var dir = $(this).val();
// Get file names in directory dir and pass it to the next drop-down DIV
$.get("listfiles.php", {"dir":dir}, function(response){
//Show the files
$("#files2").html(response);
//alert($('#files2 option:selected').val());
alert(response);
$(response).appendTo('#hiddenfield2');
});
});
});
But this doesn't help passing the 'response' to the second DIV "files2".
I need to use the two DIVs like dependent drop-down lists. I make the dropdown-list "selection1" interact with DIV "selection2" like dependent dropdowns as follows:
<select name="field1" id="selection1">
<option selected="selected" name ="selection1">Folder 1</option>
<?php
$selections = array('Folder A', 'Folder B', 'Folder C');
foreach($selection as $selections){
?>
<option value="<?php echo strtolower($selection); ?>"><?php echo
$selection; ?></option>
<?php
}
?>
</select>
$("#selection1").change(function()
{
var dir = $(this).val();
$.get("listdirs1.php", {"dir":dir}, function(response){
//Show the files
$("#files").html(response);
// alert($('#selection2 option:selected').val());
//alert(response);
$(response).appendTo('#selection2');
});
});
But this doesn't work in case both "selection1" and "selection2" are DIVs.
I already referred to how to submit a div value in a form stackoverflow answer
I am all new to PHP and JavaScript. Please help. Thanks in advance.

PHP / SQL: Multiple delete data using Select Option

Now I create a system that can delete multiple data using select option. But here I got some issues. When i only select one data, and press button delete, it will delete. But if I choose more than one data, for example, 3 data, it will only delete the latest id of the data. Below is my the image
And below is my code:
index.php
<form method="post" id="multiple_select_form">
<select name="framework" id="framework" class="form-control selectpicker" data-live-search="true" multiple>
<?php foreach ($results as $row2): ?>
<option value= <?php echo $row2["framework_id"]; ?>><?php echo $row2["framework_name"];?></option>
<?php endforeach ?>
</select>
<br /><br />
<input type="hidden" name="framework_id" id="framework_id" />
<input type="submit" name="submit" class="btn btn-info" value="Submit" />
</form>
<script>
$(document).ready(function(){
$('.selectpicker').selectpicker();
$('#framework').change(function(){
$('#framework_id').val($('#framework').val());
});
$('#multiple_select_form').on('submit', function(event){
event.preventDefault();
if($('#framework').val() != '')
{
var form_data = $(this).serialize();
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
success:function(data)
{
//console.log(data);
$('#framework_id').val('');
$('.selectpicker').selectpicker('val', '');
alert(data);
}
})
}
else
{
alert("Please select framework");
return false;
}
});
});
</script>
insert.php
<?php
include("configPDO.php");
$smt = $conn->prepare("DELETE FROM frame_list WHERE framework_id = '".$_POST["framework_id"]."'");
$smt->execute();
if($smt){
echo "Data DELETED";
}else{
echo "Error";
}
?>
Can anyone knows how to solve this problem? Thanks

framework will hold one value every time.
Use input arrays -
Change name="framework" to name="framework[]".
and in query -
WHERE framework_id in ('". implode("','", $_POST["framework_id"]) ."')"
Try to use parameter binding for security.

How i get the values in select option using javascript

I am fetching acno from table when i select a party name in option.I have so far tired i get the acno from the table but it is not place in the option box.
My controller code:
public function get_states2()
{
$name = $this->input->post('name');
$result = $this->db->query("SELECT TAcNo FROM tipup_payment LEFT OUTER JOIN parmaster on parmaster.pcode = tipup_payment.TName WHERE PName='$name' ")->result_array();
echo json_encode($result);
}
My View page code:
<div class="col-md-6">
<div class="form-group form-group-xs">
<div class="col-lg-9">
Party Name:
<select class="form-control countries" name="City">
<option></option>
<?php foreach ($PName as $row ): ?>
<option value="<?php echo trim($row['PName']); ?>"><?php echo trim($row['PName']); ?></option><?php endforeach ?>
</select>
</div>
</div>
<div class="form-group form-group-xs">
<div class="col-lg-9">
AcNo:
<select multiple="multiple" style="height: 85px;" id="Name" class="form-control states">
<option value=""></option>
</select>
<?php echo form_error('Area', '<div class="text-danger">', '</div>'); ?>
</div>
</div>
<div id="item">
<input type="checkbox" name="item">With Details</center></div>
</div>
</div>
My Script Code:
<script type="text/javascript">
$(document).ready(function(){
$('.countries').change(function(){
var name = $('.countries').val();
$.ajax({
type: "POST",
url: "<?php echo base_url();?>Tieup/get_states2",
data:{name:name},
datatype: 'json',
success: function (data) {
/*get response as json */
alert(data);
var result = jQuery.parseJSON(data);
var no = result.TAcNo;
$("#Name").val(no);
/*ends */
}
});
});
});
</script>
This is my view page when i select a party name it should display the acno in acno option box( it down the party name).

give a class or id to ur dropdown
ur html
<select class="product">
</select>
ur jquery code
loop through all ur value and set it in ur option value one by one and at the end inject all ur html to ur select option using .html()
var value = [{"TAcNo":"341"}]
var options = '<option value="">Select</option>';
$(value).each((index, item) => { //loop through your elements
console.log(item)
options += '<option value="'+item.TAcNo+'">'+item.TAcNo+'</option>';
});
$('.product').html(options);
Hope it helps

Solution
you need to trigger change like this to update select value
$("#Name").val(no).change();

<Script> functions not working when reducing screen size

I have a problem with the reservation module I developed in the last few months. You can have a look at it at the following address:
Taxi milan
Everything is working perfectly except for one issue. When I reduce the size of the browser window, I decided to make the image disappear and leave only the reservation module. When it is resized it stops working: all the script functions (the one providing the arrivals based on the departure selection and the "get price" button) do not work. Can you tell me what is causing the issue?
Below you can find the main parts of the code in which you may find the issue.
HOMEPAGE
<body>
<?php
$explode = explode('/', $_SERVER['REQUEST_URI']);
if($explode[1] == 'it' and $explode[2] == 'ros-ncc'){
?>
<div id="image">
<div id="modulemax">
<?php
require('wp-content/themes/customizr/prenota/index.php');
?>
</div>
</div>
<?php
}else if($explode[1] == '' and $explode[2] == ''){
?>
<div id="image">
<div id="modulemax">
<?php
require('wp-content/themes/customizr/book/index.php');
?>
</div>
</div>
<?php
} else {
}
?>
<div id="modulemin">
<?php
$explode = explode('/', $_SERVER['REQUEST_URI']);
if($explode[1] == 'it' and $explode[2] == 'ros-ncc'){
require('wp-content/themes/customizr/prenota/index.php');
}else if($explode[1] == '' and $explode[2] == ''){
require('wp-content/themes/customizr/book/index.php');
} else {
}
?>
</div>
</body>
INDEX - BOOK (english reservation module)
<?php include "prova1.php"; ?>
<script>
function getArrival(val) {
$.ajax({
type: "POST",
url: "wp-content/themes/customizr/book/process.php",
data:'dep_name='+val,
success: function(data){
$("#arrivals-list").html(data);
}
});
}
</script>
<script>
function chk(){
var var1=document.getElementById('departures-list').value;
var var2=document.getElementById('arrivals-list').value;
var var3=document.getElementById('passengers').value;
var var4=document.getElementById('bags').value;
var dataString='var1='+ var1 +'&var2='+ var2 +'&var3='+ var3 +'&var4='+ var4;
$.ajax({
type: "POST",
url: "wp-content/themes/customizr/book/process2.php",
data:dataString,
cache:false,
success: function(html){
$('#resbox').html(html);
}
});
return false;
}
</script>
<body>
<div id="rcorners1">
<form action='wp-content/themes/customizr/book/index.php' method='post'>
<label>Departure:</label>
<select name="departures" id="departures-list" class="form-control" onchange="getArrival(this.value);">
<option value="">Select Departure</option>
<?php
require('wp-content/themes/customizr/book/prova1.php');
$sql1 = "SELECT * FROM departures";
$result1 = $mysqli->query($sql1);
while($row1 = $result1->fetch_assoc()){
?>
<option value="<?php echo $row1["dep_name"]; ?>|<?php echo $row1["dep_air"]; ?>"><?php echo $row1["dep_name"]; ?></option>
<?php } ?>
</select>
<label>Arrival:</label>
<select id="arrivals-list" name="arrivals">
<option value="">Select Arrival</option>
</select>
<input id="input" type="submit" name="submit" onclick="return chk()" value="Get Price" />
</form>

You have two different div in your website. One of it has id = image, and second is id = modulemin. Div with id = image hiding when screen size < 800px width with css( display = none ), and second is hiding when screen size > 799px width with css( display = none ). And both of them have similar forms. Why you need it? Why to have 2 similar forms only for different screen sizes?
Your main problem is with id's of your form inputs variables var1, var2 ....
Your trying to got some info using ids of inputs in this lines:
var var1=document.getElementById('departures-list').value;
But, as you can understand, you always will get only inputs from first form in DOM tree, because after finding first occurrence of any id, js stoped searching and return it. More detailed about it you can find in any js documentation.
You can use class instead of id for getting all inputs with same classname from page. You can use some differ id for forms, and then get inputs with id/name/class/tagname as child node of that form( ex. ).
Also, strongly not recommend to send ajax request to some other file. Instead of it, use wp-ajax.

To hide the div on ajax call if I get result

Here, I am getting result through ajax.
I want to hide div if I get the result from ajax.
The below div that I want to hide if get the result through the ajax.
Here is my code,
$("button").click(function(){
var dateselect=$("#dateselect").val();
var userselect = $("#employee").val();
$.ajax({
type: 'GET',
url: "<?php base_url() ?>manage_attendance/listing",
data:'dateselect='+dateselect+'&userselect='+userselect,
dataType: "json",
success: function(data) {
$('.clkin_time').html(data.result);
if(data.clkout_result != "0000-00-00 00:00:00") {
$('.clkout_time').html(data.clkout_result);
//document.getElementById('selecttime').style.display = "hidden";
}
else
{
$('.clkout_time').html("---");
}
}
});
});
My html part is,
<div id="selecttime">
<label class="col-lg-4 control-label">Select Time</label>
<div class="input-group date col-lg-2" id="datetimepicker5" style="display:inline-flex;">
<select id="time_date1" class="form_control" name="time_date1">
<?php
for($i=00;$i<=23;$i++)
{
echo '<option value='.$i.'>'.$i.'</option>';
}
?>
</select>
<select id="time_date2" class="form_control" name="time_date2">
<?php
for($i=00;$i<=59;$i++)
{
echo '<option value='.$i.'>'.$i.'</option>';
}
?>
</select>
<select id="time_date3" class="form_control" name="time_date3">
<?php
for($i=00;$i<=59;$i++)
{
echo '<option value='.$i.'>'.$i.'</option>';
}
?>
</select>
</div>
</div>
Here, I want to hide this div if I get the result as above.
How can we do this?

Try like following. Use display attribute value none instead of hidden.
document.getElementById('selecttime').style.display = "none";
Or you can use jquery hide() function like following.
$("#selecttime").hide();

You have to use
//this will do display:none in style
$("#selecttime").hide();
and for show use
//this will do remove display:none from style
$("#selecttime").show();
Please check Document