Get First Option on Text on Dropdown After Button Click - javascript

EDIT 1 - BRIEF
This is how it is. https://ibb.co/9WY5gLL it has a datatable, which is sorted according to dropdown selections and there is a button to reset the sortings. the reset part is working fine except the text in dropdown is not changing. but if I remove the slect box class in dropdown HTML all working fine.
//DROPDOWN HTML
<select name="status" id="status" class="statusbox SlectBox form-control">
<?php echo loadStatus(); ?>
</select>
//DATATABLE
$(document).ready(function() {
var table= $('#tableone').DataTable( {
"serverSide": true,
"ajax": {
url :"sonme.php",
type : "POST",
data : function(data){
var status = $('#status').val();
data.status= status;
}
} );
} );
//TABLE FILTER
$('#status').change(function(){
table.draw();
});
//RESET TABLE
$('#reset').click(function() {
$("select.statusbox").val($("select.statusbox option:first").val()).change();
});
//PHP RETURNED BY AJAX CALL
function location(){
global $con;
$output.= '<option value="_allCity">All Results</option>';
$_selectquery= "SELECT * FROM _tableone";
$result = mysqli_query($con, $_selectquery);
while($row = mysqli_fetch_array($result)){
$output.= '<option value = "'.$row["name"].'">'.$row["name"].'</option>';
}
return $output;
}

Since this is the sumo select jquery plugin, all what I had to is reviewing the documentation.
This line - $('select.SlectBox')[0].sumo.reload(); reset the dropdown and value as the default. Please check the doc: https://hemantnegi.github.io/jquery.sumoselect/

Related

ajax to change content from dropdown not working

I have created a website. I have created a dropdown in it for displaying different data while the user selects different dropdown, my code is as below
$(document).ready(function(){
// code to get all records from table via select box
$("#course_title").change(function() {
var tid = $(this).find(":selected").val();
var dataString = 'tid='+ tid;
$.ajax({
url: 'mycourses.php',
dataType: "json",
data: dataString,
cache: false,
success: function(employeeData) {
if(employeeData) {
$("#heading").show();
$("#no_records").hide();
$("#emp_name").text(employeeData.tid);
$("#emp_age").text(employeeData.training_name);
$("#records").show();
} else {
$("#heading").hide();
$("#records").hide();
$("#no_records").show();
}
}
});
})
});
<select class="form-control sel" name="trainings" id="trainings" >
<option value="select options" selected disabled>Select Training Course</option>
<? $sql_trainings = "SELECT * FROM tbl_data";
$trainings_data = mysqli_query($con,$sql_trainings);
while($row = mysqli_fetch_assoc($trainings_data) ){
$trainingid = $row['tid'];
$training_name = $row['training_name'];
echo "<option value='".$trainingid."' >".$training_name."</option>";
}
?>
</select>
i have another page as getcourses.php as below
<?php
include "config.php";
$trainingid = $_POST['tid']; // department id
$sql = "SELECT tid,training_name FROM tbl_data WHERE id=".$departid;
$result = mysqli_query($con,$sql);
$users_arr = array();
while( $row = mysqli_fetch_array($result) ){
$userid = $row['tid'];
$name = $row['training_name'];
$users_arr[] = array("tid" => $userid, "training_name" => $name);
}
// encoding array to json format
echo json_encode($users_arr);
The dropdown is first displayed in a page, then when the user clicks the dropdown, they are taken to different page showing the content of the dropdown they selected, it's showing the content the first time when the user clicks the dropdown and is being taken to the different page to show content, but when the user clicks different dropdown from the result page the dropdown doesn't work, nothing happens, I want to display the content of dropdown which the user selects in the resulting page, whenever user changes dropdown it should be appearing. my table name is tbl_data and my columns are tid and training_name.
Can anyone tell me what is wrong with my code?
$("#course_title").change(function() {
should be,
$("#trainings").change(function() {
So your js code should be like,
$(document).ready(function() {
// code to get all records from table via select box
$("#trainings").change(function() {
var tid = $(this).val(); // this is enough to get selected value
$.ajax({
url: 'mycourses.php',
type: 'POST', // you forgot type
data: {tid : tid},
success: function(employeeData) {
// same as your code
}
});
})
});

How to display data with radio buttons based on drop down selection?

I'm trying to dynamically generate radio buttons with data in front of them. The data that is to be displayed in front of the radio button is based on a drop down selection, which also displays some data in a text box using javascript.
I tried taking the selected option in a string and use it in the next query, but I know I am doing it wrong.
Database Connection
$db = pg_connect("");
$query = "select account_name,account_code,address1,address2,address3 FROM
customers";
$result = pg_query($db,$query);
//NEW QUERY
$sql1= "select name from conferences";
$result1= pg_query($db, $sql1);
//END
//New Code
<select class="form-control" id="conference" name="conference">
<option value="">Select Conference...</option>
<?php while($rows1 = pg_fetch_assoc($result1)) { ?>
<option value="<?= $rows1['code']; ?>"><?= $rows1['name']; ?></option>
<?php } ?>
</select>
<br>
// END OF NEW CODE
Dropdown to select the data.
<select onchange="ChooseContact(this)" class="form-control"
id="account_name" name="account_name" >
<?php
while($rows= pg_fetch_assoc($result)){
echo '<option value=" '.$rows['address1'].' '.$rows['address2'].'
'.$rows['address3'].''.$rows['account_code'].'">'.$rows['account_name'].'
'.$_POST[$rows['account_code']].'
</option>';
}?>
</select>
Displaying data in the text area based on the selcted value using javascript. (The code works fine till here)
<textarea readonly class="form-control" style="background-color: #F5F5F5;"
id="comment" rows="5" style="width:700px;"value=""placeholder="Address...">
</textarea>
<script>
function ChooseContact(data) {
document.getElementById ("comment").value = data.value;
}
</script>
Displaying data in front of the radio buttons based on the selected option(This code works if I use some random value in the query, but not if I use the selected value 'account_code' from the previous query. I'm using POST GET method to carry the selected value)
<?php
//NEW CODE
$sql = "select order_number, order_date from orders where
customer_account_code = '3000614' and conference_code='DS19-'"; <-Data
gets displayed when put random value like this.
$code = $_GET[$rows['account_code']];
$conf = $_GET[$rows1['conference_code']];
$sql = "select order_number, order_date from orders where
customer_account_code = '$code' and conference_code= '$conf']"; <- But I
want to display the data against the selected value, i.e, the 'account_code'
in the variable $code from the dropdown select
//END
$res = pg_query($db,$sql);
while($value = pg_fetch_assoc($res) ){
echo "<input type='radio' name='answer'
value='".$value['order_number']." ".$value['order_date']."'>"
.$value['order_number'].$value['order_date']." </input><br />";
}
?>
I need to help to find a way to put the selected 'account_code' in a variable and use it in the $sql query.
Please try with this code : (It's work for me)
1- Add this line to your HTML <head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
2- Edit your CODE to this:
Dropdown to select the data:
<select class="form-control" id="account_name" name="account_name">
<option value=""></option>
<?php while($rows = pg_fetch_assoc($result)) { ?>
<option value="<?= $rows['address1'].' '.$rows['address2'].' '.$rows['address3'].'-'.$rows['account_code']; ?>"><?= $rows['account_name']; ?></option>
<? } ?>
</select>
Displaying data in the text area based on the selected value using jQuery:
<textarea readonly class="form-control" style="background-color: #F5F5F5;"
id="comment" rows="5" style="width:700px;" value="" placeholder="Address..."></textarea>
jQuery Code:
<script type="text/javascript">
$('#comment').val($('#account_name').val()); // MAKE A DEFAULT VALUE
(function($) {
$('#account_name').change(function() {
$('#results').html(''); // REMOVE THE OLD RESULTS
var option = $(this).val();
$('#comment').val(option);
// EDIT RADIO WITH AJAX
$.ajax({
type: "POST",
url: "path/test.php",
dataType:'JSON',
data: $('#account_name').serialize()
}).done(function(data) {
for (var i = 0; i < data.length; i++) {
// ADD RADIO TO DIV RESULTS
$('#results').append('<input type="radio" name="answer" value="'+data[i].order_number+'">'+data[i].order_date+'</input><br>');
}
});
});
})(jQuery);
</script>
after that, add this HTML to your page, to show RESULTS FROM AJAX DATA
<!-- RADIOs -->
<div id="results"></div>
3- Create a new file like path/test.php
in this file, use this CODE to return values with JSON :)
<?php
header('Content-type: application/json');
// CONNECT (JUST USE YOUR CUSTOM CONNECTION METHOD & REQUIRE CONFIG FILE IF YOU WANT)
$db = pg_connect("");
$value = explode('-', $_POST['account_name']);
// EXPLODE AND GET LAST NUMBER AFTER < - >
$code = (int) end($value);
$sql = "select order_number, order_date from orders where customer_account_code = '$code'";
$res = pg_query($db, $sql);
// CREATE JSON RESULTS
$is = '';
while($data = pg_fetch_assoc($res)) {
$is .= json_encode($data).', ';
}
// AND GET ALL
echo '['.substr($is, 0, -2).']';
?>

How can I fetch MySQL datas in bootstrap multiselect?

I created an admin panel for MySQL database, and when I click on the edit button, I want to print all of the datas in Bootstrap multi select. If I didn't use Bootstrap multi select, just the normal multi select, it's working. How can I do this?
This is how it looks like (in the button, it show the current datas, but when I open, it didn't showin the select menu):
index.php
<select name="classification[]" id="classification" multiple="multiple">
<?php
while($row = $classificationResult -> fetch_array()) {
?>
<option value="<?php echo $row['classification_id'];?>"><?php echo $row['name'];?></option>
<?php
}
?>
</select>
<script>
// If I didn't add the multi select jquery, it's working
$('#classification').multiselect({
nonSelectedText: 'Select Framework',
maxHeight : 400,
includeSelectAllOption : false,
enableFiltering : false,
buttonWidth : '100%',
dropRight : true
});
$(document).on('click', '.edit_data', function(){
$("#classification option").prop("selected", false);
var data_id = $(this).attr("id");
$.ajax({
url:"fetchRole.php",
method:"POST",
data:{'data_id':data_id},
dataType:"json",
success:function(data){
$.each(data.classifications, function(i, e) {
$("#classification option[value='" + e + "']").prop("selected", true);
});
$('#data_id').val(data.id);
$('#insert').val("Edit");
$('#add_data_Modal').modal('show');
}
});
});
</script>
fetchRole.php
$query2 = $conn -> prepare("SELECT classification.classification_id AS class_id
FROM classification
LEFT JOIN role_classification ON classification.classification_id = role_classification.classification_id
WHERE role_classification.role_id = ?");
$query2 -> bind_param('i', $role['id']);
$query2 -> execute();
$result2 = $query2 -> get_result();
$query2 -> close();
while ($classification = $result2 -> fetch_assoc()) {
$classificationIdList[] = $classification["class_id"];
}
$return = array_merge($role, ["classifications" => $classificationIdList]);
echo json_encode($return);
You need to refresh the multiselect after you set new selected options using .prop("selected", true).
$.each(data.classifications, function(i, e) {
$("#classification option[value='" + e + "']").prop("selected", true);
});
$('#classification').multiselect('refresh');
Description of the refresh method:
This method is used to refresh the checked checkboxes based on the
currently selected options within the select.
You can see the full list of available methods HERE.

jquery UI.js prevents to load dynamically loaded select menu

I tried to load dynamically loaded select menu for my page using Ajax/PHP. But jquery UI plugging prevents to load that dynamically loaded data. So I can't see nothing when i change the first select menu.
My code like this.
<script>
$(document).ready(function($) {
var list_target_id = 'list-target'; //first select list ID
var list_select_id = 'list-select'; //second select list ID
var initial_target_html = '<option value="">-Select-</option>'; //Initial prompt for target select
$('#'+list_target_id).html(initial_target_html); //Give the target select the prompt option
$('#'+list_select_id).change(function(e) {
//Grab the chosen value on first select list change
var selectvalue = $(this).val();
//Display 'loading' status in the target select list
$('#'+list_target_id).html('<option value="">Loading...</option>');
if (selectvalue == "") {
//Display initial prompt in target select if blank value selected
$('#'+list_target_id).html(initial_target_html);
} else {
//Make AJAX request, using the selected value as the GET
$.ajax({url: 'loadcity.php?svalue='+selectvalue,
success: function(output) {
//alert(output);
$('#'+list_target_id).html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});
}
});
});
</script>
<form method="post">
<div class="select-country">
<label>District</label>
<select name="list-select" id="list-select">
<option value="">Please select..</option>
<?php
$sel_dis2 = mysql_query("SELECT * FROM district", $connection);
confirm_query($sel_dis2);
while($dis2 = mysql_fetch_assoc($sel_dis2)){
?>
<option value="<?php echo $dis2["id_district"]; ?>"><?php echo $dis2["district"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="select-state">
<label>City</label>
<select name="list-target" id="list-target"></select>
</div>
</form>
I tested the code without including jquery UI and it worked properly. But i want to add jquery UI for this page. This is the php file
<?php
$connection = mysqli_connect("localhost", "user", "password", "database");
$selectvalue = mysqli_real_escape_string($connection, $_GET['svalue']);
mysqli_select_db($connection, "database");
$result = mysqli_query($connection, "SELECT city.id_city, city.city FROM city WHERE city.district_id = '$selectvalue'");
echo '<option value="">-Select-</option>';
while($row = mysqli_fetch_array($result))
{
echo '<option value="'.$row['id_city'].'">' . $row['city'] . "</option>";
//echo $row['drink_type'] ."<br/>";
}
mysqli_free_result($result);
mysqli_close($connection);
?>
Something else is breaking your select. Tested at jsfiddle: https://jsfiddle.net/ddpdhr5a/
$(document).ready(function($) {
var list_target_id = 'list-target'; //first select list ID
var list_select_id = 'list-select'; //second select list ID
var initial_target_html = '<option value="">-Select-</option>'; //Initial prompt for target select
$('#'+list_target_id).html(initial_target_html); //Give the target select the prompt option
$('#'+list_select_id).change(function(e) {
//Grab the chosen value on first select list change
var selectvalue = $(this).val();
//Display 'loading' status in the target select list
$('#'+list_target_id).html('<option value="">Loading...</option>');
if (selectvalue == "") {
//Display initial prompt in target select if blank value selected
$('#'+list_target_id).html(initial_target_html);
} else {
//Make AJAX request, using the selected value as the GET
$.ajax({url: 'loadcity.php?svalue='+selectvalue,
success: function(output) {
//alert(output);
$('#'+list_target_id).html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<form method="post">
<div class="select-country">
<label>District</label>
<select name="list-select" id="list-select">
<option value="">Please select..</option>
<option value="something">Something</option>
</select>
</div>
<div class="select-state">
<label>City</label>
<select name="list-target" id="list-target"></select>
</div>
</form>
This seems to work perfectly, although I had to remove the PHP, naturally, and just use some mock location

Change items in a drop-down list depending on the selected option in another drop-down list

I have the following code:
<select name="trec">
<? $d -> gettreatment(); ?>
</select>
<select name="treratment">
<? $d -> gettreat(); ?>
</select>
the <? $d -> gettreatment(); ?>
will display echo "<option value='$r[id]'>$r[cat]</option>";
and <? $d -> gettreat(); ?>
will display echo "<option value='$r[id]'>$r[treatment]</option>";
How to dynamically narrow down (or limit) the items in a second drop down list based on the selected item from first selected item? For example if we have one list of countries in first drop down list and have list of states in the second list then once USA is selected from the country list then the second list should change to list only the states of USA
<script type="text/javascript">
$(function() {
$("#form_process").click(function() {
//$("#choice").val(); //you cannot use the same id for more than 1 tag
var choice = 0;
if(document.getElementById("choice1").checked) choice='Yes';
else if(document.getElementById("choice2").checked) choice='No';
else if(document.getElementById("choice3").checked) choice='Dont Know';
var comments = document.getElementById('comments').value; //$("#comments").val();
var dataString = 'choice='+ choice + '&comments=' + comments;
$.ajax({
type: "POST",
url: "**ABSOLUTE URL TO PROCESSOR**",
data: dataString
});
});
});
</script>

Categories

Resources