I have dropdown list and i want to retrieve data from database when select value of downlist. This is working without having error. But this is working when i click on dropdown list, not in dropdown value. That mean work only for default value. please help me how to rectify this error. code as below.
HTML code for Dropdown list
<select name="lab_no" id="lab-no" class="form-control">
<option value="Lab 01" >Lab 01</option>
<option value="Lab 02">Lab 02</option>
</select>
Jquery Code is Here
<script type="text/javascript">
$(document).ready(function () {
$("option").click(function () {
var txt = $("#lab-no:selected").val();
if (txt = '') {
} else {
$('#table-row').html('');
$.ajax({
url: "../svr/com-list.php",
method: "post",
data: {search: txt},
dataType: "text",
success: function (data) {
$('#table-row').html(data);
}
});
}
});
});
</script>
First you need to target your select $('#lab-no') and use change event instead of click. Then you can target the selected option.
$(document).ready(function () {
$("#lab-no").change(function () {
var txt = $("select option:selected").val()
console.log(txt)
if (txt = '') {
} else {
$('#table-row').html('');
$.ajax({
url: "../svr/com-list.php",
method: "post",
data: {search: txt},
dataType: "text",
success: function (data) {
$('#table-row').html(data);
}
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="lab_no" id="lab-no" class="form-control">
<option value="Lab 01" >Lab 01</option>
<option value="Lab 02">Lab 02</option>
</select>
Try with $("#lab-no").change. This Way your event will trigger after you have made a change in the dropdown.
You should not use :selected in $("#lab-no:selected").val() since its not needed. $("#lab-no").val() will return the selected value.
Working Demo
$(document).ready(function() {
$("#lab-no").change(function() {
var txt = $("#lab-no").val();
console.log(txt)
if (txt = '') {
} else {
$('#table-row').html('');
$.ajax({
url: "../svr/com-list.php",
method: "post",
data: {
'search': txt
},
dataType: "text",
success: function(data) {
$('#table-row').html(data);
}
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="lab_no" id="lab-no" class="form-control">
<option value="Lab 01">Lab 01</option>
<option value="Lab 02">Lab 02</option>
</select>
You can use in simple way like:
var drpSelectedValue=$("#lab-no").val();
May this help for you.
You should try like this
1.You need to change jquery event
<script type="text/javascript">
$(document).ready(function () {
$("#lab-no").change(function () {
var txt = $("#lab-no").val();
alert(txt) //place alert and check value. You will get values which you have selected
if (txt == '') { //make changes here
} else {
$('#table-row').html('');
$.ajax({
url: "../svr/com-list.php",
method: "post",
data: {search: txt},
dataType: "text",
success: function (data) {
$('#table-row').html(data);
}
});
}
});
});
</script>
Related
I have json data in here
Which is obtained from the Propinsi id but I do not understand how to use json data into my combobox, my script in here... please tell me how to correct this
$(document).ready(function(){
$('#propinsi').on('change',function(){
var prop_kode = $('#propinsi').val();
console.log(prop_kode);
if (prop_kode == "") {
$('#kabupaten').prop('disabled', true);
}
else {
$('#kabupaten').prop('disabled', false);
$.ajax({
url:"<?=$url; ?>/show_kabupaten",
type:"POST",
data: {'prop_kode' : prop_kode},
dataType: 'html',
success: function(data){
$('#kabupaten').html(data);
// $.each(json, function(i, value) {
$('#kabupaten').append($('<option>').text('Pilih Kabupaten').attr('value', 'value'));
$.each( kabupaten, function( kab_nama, kab_kode ) {
alert( kabupaten.kab_nama);
});
console.log(data);
},
error: function(){
alert('error .......');
}
})
}
});
});
Something like this?
$('#propinsi').on('change', function() {
var prop_kode = $('#propinsi').val();
if (prop_kode == "") {
$('#kabupaten').prop('disabled', true);
return;
}
$('#kabupaten').prop('disabled', false);
// This is just because I don't know where to find your json data
var data = JSON.parse('{"kabupaten":[{"kab_id":"8","prop_kode":"12","kab_kode":"1201","kab_nama":"KABUPATEN NIAS","kab_status":"1","kab_created_by":"1","kab_created_date":"1496631492"},{"kab_id":"9","prop_kode":"12","kab_kode":"1202","kab_nama":"KABUPATEN MANDAILING NATAL","kab_status":"1","kab_created_by":"1","kab_created_date":"1496631518"}]}');
$("#kabupaten").html("");
$.each(data.kabupaten, function(i, kab) {
var id = kab.kab_id;
var name = kab.kab_nama;
$("#kabupaten").append('<option value="' + id + '">' + name + '</option>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="propinsi">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br>
<select id="kabupaten"></select>
To implement it into your JS, the code below may help.
// Add this code just below the line $('#kabupaten').prop('disabled', false);
$.ajax({
url: "<?=$url; ?>/show_kabupaten",
type: "POST",
data: {'prop_kode': prop_kode},
dataType: 'json',
success: function(data) {
$("#kabupaten").html("");
$.each(data.kabupaten, function(i, kab) {
var id = kab.kab_id;
var name = kab.kab_nama;
$("#kabupaten").append('<option value="'+id+'">'+name+'</option>');
});
},
error: function() {
alert('error .......');
}
});
This is dynamically loaded dropdown box from a php file. I have put a default option Select Language But this is not displaying once the ajax elements loaded.
How can I make the select language as default even after the ajax items are loaded?
<select id="name">
<option style="display:none;" selected>Select language</option>
</select>
<?php if (isset($_GET['place']) && $_GET['place'] != '') { ?>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$.ajax({
type: "POST",
data: {place: '<?= $_GET["place"] ?>'},
url: 'listplace.php',
dataType: 'json',
success: function (json) {
if (json.option.length) {
var $el = $("#name");
$el.empty(); // remove old options
for (var i = 0; i < json.option.length; i++) {
$el.append($('<option>',
{
value: json.option[i],
text: json.option[i]
}));
}
}else {
alert('No data found!');
}
}
});
</script>
$el.empty() statement removes all the options from the select. You shouldn't remove the first option.
For this, use not method and :first pseudo-class in order to keep the default option.
$el.find('option').not(':first').remove();
Because you need to remove old options, and add new ones without loosing the default "Select language" text, you can do like this:
<select id="name">
<option style="display:none;" selected>Select language</option>
</select>
<?php if (isset($_GET['place']) && $_GET['place'] != '') { ?>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$.ajax({
type: "POST",
data: {place: '<?= $_GET["place"] ?>'},
url: 'listplace.php',
dataType: 'json',
success: function (json) {
if (json.option.length) {
var $el = $("#name");
$el.empty(); // remove old options
//adding your default value
$el.append('<option selected>Select language value</option>');
for (var i = 0; i < json.option.length; i++) {
$el.append($('<option>',
{
value: json.option[i],
text: json.option[i]
}));
}
}else {
alert('No data found!');
}
}
});
</script>
I have a select dropdown box
<select name="status" id="status" onchange="changeStatus()">
<option value="step_1">step_1</option>
<option value="step_2">step_2</option>
<option value="step_3">step_3</option>
<option value="step_4">step_4</option>
</select>
And my javascript
<script>
function changeStatus() {
$('select.changeStatus').change(function(){
$.ajax({
type: 'POST',
url: 'update_status.php',
data: {changeStatus: $('select.changeStatus').val()},
dataType: 'html'
});
});
});
</script>
So I want the value selected from the select dropdown box send to the php file(update_status.php)
Select id using #. Since you are already using javascript onchange event in select field so no need to use jquery change() event. jQuery use # to select id and . to select class. since you are using id="status" so you must use # to select the id. The way you are trying to collect the value of the select field in this line $('select.changeStatus').val() is wrong. Because there are no class named changeStatus there.
function changeStatus() {
$.ajax({
type: 'POST',
url: 'update_status.php',
data: {changeStatus: $('#select').val()},
dataType: 'html'
});
}
$('#status').val() is used to get value of select options.
So try this
<script>
function changeStatus() {
$.ajax({
type: 'POST',
url: 'update_status.php',
data: {changeStatus: $('#status').val()},
dataType: 'html'
});
});
</script>
or
<script>
function changeStatus() {
$.post("update_status.php", {changeStatus: $('#status').val()}, function(data, status){
});
}
</script>
You don't need to mix jQuery and inline JS
HTML - we'll use your selects name in the function. I've removed the inline function call:
<select name="status" id="status">
<option value="step_1">step_1</option>
<option value="step_2">step_2</option>
<option value="step_3">step_3</option>
<option value="step_4">step_4</option>
</select>
jQuery - I have taken the code out of the function you were calling inline, it was not needed.
<script>
$(document).ready(function() {
$('select[name="status"]').change(function(){
var status = $(this).val();
$.ajax({
type: 'POST',
url: 'update_status.php',
data: {changeStatus: status},
dataType: 'html'
});
});
});
</script>
You can directly test when the select changes and grab its value right then. Here is an EXAMPLE
I have also wrapped the jQuery in a document ready handler. Depending on where you're loading the script in your page you may need to do this to make sure that your jQuery is run as soon as the DOM elements have been loaded.
Remove the onchange field from select and put the below code to your script and this is working. Use JQuery post functionality instead.
$("#status").change( function() {
alert($( this ).val());
$.post('update_status.php', { changeStatus: $(this).val()},
function(response) {
console.log( response);
});
});
<select name="status" id="status" onchange="changeStatus(this.value)">
<option value="step_1">step_1</option>
<option value="step_2">step_2</option>
<option value="step_3">step_3</option>
<option value="step_4">step_4</option>
</select>
function changeStatus(value) {
$.ajax({
type: 'post',
url: 'update_status.php',
data: {'get_data:value'},
success: function (response) {
document.getElementById("loadto").innerHTML=response;
}
});
}
I Hope it will be helpful .....
I have a problem with submiting my "form" with json. Its not form in traditional way, i will post a code now:
$('#select').on('change', function() {
document.getElementById("info").setAttribute("data-info", this.value);
})
$('#info').on('click', function() {
var id = $(this).data('info');
add(info);
});
function add(info) {
$.ajax({
type: 'get',
cache: false,
contentType: content_type,
beforeSend: function(xhr) {xhr.overrideMimeType(content_type);},
data: {'action': 'info_add', 'info': info },
url: sitepath + 'info/all',
success: function() { update(); }
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="select">
<option value="1">data1</option>
<option value="2">data2</option>
<option value="3">data3</option>
<option value="4">data4</option>
</select>
<div id="info">Button</div>
So as you see, when select is changed it adds "data-info" attribute to div. And when div is pressed it send data-info to php script. And the problem is that it always send the same value. But after refresh it sends fine only once and than again the same value as first. Its hard to explain but here is example:lets say that i change select to "data2" and press on div. It sends "2". But then when i change it to "data3", and press on div, it still sends "2", not "3". There is no cache set or something. Sorry for bad english and thanks in advance :)
Use jQuery for setting if you are also going to be reading it with jQuery
Change
document.getElementById("info").setAttribute("data-info", this.value);
to
$"#info").data("info", this.value);
Still wondering why you are using data atrrbutes when you are not just reading the value on demand.
add($('#select').val());
You are using confusing code, you can achieve the same using:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="select">
<option value="1">data1</option>
<option value="2">data2</option>
<option value="3">data3</option>
<option value="4">data4</option>
</select>
<div id="info">Button</div>
<script>
$('.product__cart, .stock-product__cart').on('click', function() {
var info = $('#select').val();
$.ajax({
type: 'get',
cache: false,
data: {'action': 'info_add', 'info': info },
url: sitepath + 'info/all',
success: function() { update(); }
});
});
</script>
How to pass javascript variable that came from select option to a PHP variable?
I want to set PHP variable depending on user selection.
I tried that code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$("select[name='sex']").change(function () {
var submitSearchData = jQuery('#extended-search').serialize();
var selectedValue=$('#sex').val();
jQuery.ajax({
type: "POST",
data: 'selected=' + selectedValue
url: "ajax.php",
success: function () {
// alert(submitSearchData);
alert(selectedValue);
}
});
});
});
</script>
<form id="extended-search" >
<div class="input-container">
<select class="select" name="sex" id="sex">
<option value="0">All</option>
<option value="1">M</option>
<option value="2">F</option>
</select>
</div>
</form>
<?php
var_dump ($_REQUEST['selected']); //that print NULL don't know why!
?>
You are passing data in wrong format. Data is passed as an object. Please refer below.
$("select[name='sex']").change(function () {
var submitSearchData = jQuery('#extended-search').serialize();
var selectedValue=$('#sex').val();
jQuery.ajax({
type: "POST",
data: {'selected': selectedValue},
url: "ajax.php",
success: function (response) {
// alert(submitSearchData);
alert(response);
}
});
});
Is not possible in the same instance of time:
yourfile -> ajax -> yourfile (here is the value, but you can't see this in your current webpage except that instead of ajax, send post form)
I hope this will help you...
dataType: "html",
data: {'selected': selectedValue},
and then u can get it via $_POST/$_REQUEST array since you have set your type to post.
$_REQUEST is null because it is not related to the ajax request you send. Try this for example:
<?php
if (isset($_POST["selected"])) {
echo $_POST["selected"];
} else {
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form id="extended-search">
<div class="input-container">
<select class="select" name="sex" id="sex">
<option value="0">All</option>
<option value="1">M</option>
<option value="2">F</option>
</select>
</div>
</form>
<script>
$(function() {
$("select[name='sex']").change(function () {
var selected = $(this).val();
$.ajax({
type: "POST",
data: {
selected: selected
},
url: "ajax.php",
success: function (data) {
alert(data);
}
});
});
});
</script>
</body>
</html>
<?php } ?>
EDIT:
I updated the script and tested it. You had some errors in your code. Hope this works for you.