i have a form that has select boxes. this form has a table and each row has been created by php while loop from database. for example
<select name="1265483" id="1265483" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<select name="5894253" id="5894253" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
the id of each select is that entry's id in database. i want to get those ids to make an onchange function then send that id to ajax.
You can use something like:
$("select").change(function () {
$this = $(this);
$.post("some/url/dot.php", {data: $this.attr("id")}, function () {
// code...
});
});
you can do by below code
var your_selected_value = $('#5894253 option:selected').val();
$.ajax({
type: "POST",
url: "your_url",
data: {selected: your_selected_value},
success: function(data) {
// Stuff
},
error: function(data) {
// Stuff
}
});
put this code in onchange function
Try using the select class name:
$("select.form-control").change(function (e) {
var selectId = $(this).attr('id'),
ajaxUrl = "demo_test.php?id=" + selectId;
$.ajax({
url: ajaxUrl,
success: function (result) {
if (result) {
//success code
}
}
});
});
Related
I have this select box. The selected option is sent with ajax to a server side script.
<select id="main_select">
<option selected="selected" value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
</select>
jquery script
$(document).ready(function() {
$('#main_select').change(function() {
$.ajax({
url: "itemscript.php",
type: "post",
data: {
option: $(this).val()
},
success: function(data) {
$("#details").html(data);
}
});
}).change();
});
And in the server sided script (itemscript.php) I get the variable from the select box like that:
if(isset($_POST["option"]))
{
$itemlevel = $_POST["option"];
}
Now I want to extend this script to send an additional php variable called $element to the server sided script (itemscript.php). The $element variable is a part of the the current url address.
How can I send the additional $element variable within this jquery/ ajax script?
Just add the other data items into the data{} part, separated by commas.
Assuming that your $element data is inside an inputbox, then
HTML
<input id="element">
<br>
<select id="main_select">
<option selected="selected" value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
</select>
$(document).ready(function() {
$('#main_select').change(function() {
$.ajax({
url: "itemscript.php",
method: "POST",
data: {
option: $(this).val(),
element: document.getElementById("element").value
},
.success: function(data) {
$("#details").html(data);
}
});
}).change();
});
In the above, $_POST["element"] will be passed to your php scripts
I have some problem when I pass variable across php , javascript and ajax.
html - when I change the selected value, ajax will post the new value:
<select name="PACKAGE_CATEGORY" id="PACKAGE_CATEGORY" onclick="fireAjax()" class="form-control" >
<option value="0" disabled selected hidden> -- select an option -- </option>
<option value="PLINE">Phone Line Only</option>
<option value="UNIFI">Unifi for New Registration</option>
<option value="STREAMYX">Streamyx for New Registration</option>
<option value="WEBE">Webe</option>
<option value="DOME">Lease Line (DOME)</option>
</select>
ajax - I get the value by javascript and save it in var1:
<script>
function fireAjax(){
$.ajax({
url: 'form.php',
type: 'POST',
data: {var1: document.getElementById('PACKAGE_ID').innerHTML },
success: function(data) {
console.log("success");
}
});
}
javascript function - I want to take the value var1 from ajax, but fail:
<script>
$(function () {
var pricestore = [
<?php
$var1 = $_POST['var1']; // I cannot get the var1, please help me T.T
$sqlpid=mysqli_query($conn, "select no from product where P_NAME = '$var1' ");
//some function
//.............
?>
];
});
</script>
Change onclick() to onchange()
<select name="PACKAGE_CATEGORY" id="PACKAGE_CATEGORY" onchange="fireAjax()" class="form-control" > //Here
<option value="0" disabled selected hidden> -- select an option -- </option>
<option value="PLINE">Phone Line Only</option>
<option value="UNIFI">Unifi for New Registration</option>
<option value="STREAMYX">Streamyx for New Registration</option>
<option value="WEBE">Webe</option>
<option value="DOME">Lease Line (DOME)</option>
Try the following:
Html:
<select name="PACKAGE_CATEGORY" id="PACKAGE_CATEGORY" onchange="fireAjax()" class="form-control" >
<option value="0" disabled selected hidden> -- select an option -- </option>
<option value="PLINE">Phone Line Only</option>
<option value="UNIFI">Unifi for New Registration</option>
<option value="STREAMYX">Streamyx for New Registration</option>
<option value="WEBE">Webe</option>
<option value="DOME">Lease Line (DOME)</option>
</select>
Javscript:
<script>
function fireAjax(){
$.ajax({
url: 'form.php',
type: 'POST',
data: {var1: document.getElementById('PACKAGE_CATEGORY').value},
success: function(data) {
console.log("success");
}
});
}
Changed onclick to onchange, changed id, changed innerHtml to value
Try to change your ajax call into change event of selector,
$('#PACKAGE_CATEGORY').change(function(){
$.ajax({
url: 'form.php',
type: 'POST',
data: {
'var1': $(this).val()
},
success: function(data) {
console.log("success");
}
});
})
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>
ajax work for 4 time onchange event after that it not generate response
//this is function call when dropdownlist value is change
function doAjaxPost(instituteId) {
alert(instituteId);
// get the form values
/* var name = $('#name').val();
var education = $('#education').val(); */
$.ajax({
type : "POST",
url : "/paymentGateway/merchant",
dataType : "json",
data : "institutionId=" + instituteId,
success : function(data) {
// we have the response
alert(data + "hiee");
var $merchantId = $('#merchant');
$merchantId.find('option').remove();
$("#merchant").append("<option value='ALL'>ALL</option>");
$.each(data, function(key, value) {
$('<option>').val(value.merchantId).text(value.merchantId)
.appendTo($merchantId);
});
},
error : function(e) {
alert('Error: ' + e);
}
});
}
//HTML code
<select name="institutionId" onchange="doAjaxPost(this.value)" id="instiuteId">
<option value="ALL">ALL</option>
<c:forEach var="institute" items="${instititionList}">
<option value="${institute.institutionId}">${institute.institutionId}</option>
</c:forEach>
</select>
//this is dropdown which should be loaded whenever onchange event is occur on institutionid dropdown
<select name="merchantId" id="merchant">
<option value="ALL">ALL</option>
<c:forEach var="merchant" items="${merchantList}">
<option value="${merchant.merchantId}">${merchant.merchantId}</option>
</c:forEach>
</select>
I'm a newbie to Javascript so I couldn't find an answer to my problem. I want to add an extra select when a previous select is changed. I know my code should look something likes this but it isn't working:
$(function(){
$('#artist').change(function(){
$.ajax({
url: "artist_field.php",
dataType:"html",
type: "post",
success: function(data){
$('#artist').append(data);
}
});
});
});
HTML
<td id="artist">
<select name="artist_1" id="artist">
<option value=""></option>
</select>
</td>
My problem is that I don't know how to get the values in artist_field.php that I'm trying to send (because I'm trying to exclude the previous selected option in the new select). I hope someone can help me! Thanks in advance.
$(document).ready(function() {
$('#select_2').hide();
$('#artist').change(function(){
$('#select_2').show();
});
});
HTML
<td id="artist">
<select name="artist_1" id="artist">
<option value=""></option>
</select>
</td>
<td>
<select name="select_2" id="select_2">
<option value=""></option>
</select>
</td>
It will only show the second select if you chose something on the first one
Update: I just noticed that you have the ID artist in the code twice. You might change the TD to <td id="artist_td"> or something for my example to work
To send the currently selected option back to the server in the post, you can do something like:
$('#artist').change(function(){
$.ajax({
url: "artist_field.php",
data: { "value": $("#artist").val() },
dataType:"html",
type: "post",
success: function(data){
$('#artist').append(data);
}
});
});
Then in the PHP document, you can get the value with $_POST["value"];, and use that value to limit the return options.
update
If you are going to fire the change event off multiple times, it's going to append the new data every time. If this is not the behavior that you want, add a div or something to put the new data into like:
<td id="artist_td">
<select name="artist_1" id="artist">
<option value=""></option>
</select>
<div id="newdata"></div>
</td>
Then edit the success function
success: function(data){
$('#newdata').empty().append(data);
}
With "artist_field.php" returning a string containing all elements to place in the <select> element separated by commas. I hope it will help ☻ ☺
window.addEventListener("load", function(){
var list = document.getElementById("artist");
var xhr = Xhr();
xhr.onreadystatechange = function(e){
if(xhr.status === 4 || xhr.status === 200)
{
var results = (xhr.responseText).split(',');
for(var i = 0; i < results.length; ++i)
{
var el = document.createElement("option");
el.innerHTML = results[i];
list.appendChild(el);
}
}
};
xhr.open("GET", "artist_field.php", false);
xhr.send(null);
}, false);
function Xhr()
{
try {
return new XMLHttpRequest();
}catch(e){}
try {
return new ActiveXObject("Msxml3.XMLHTTP");
}catch(e){}
try {
return new ActiveXObject("Msxml2.XMLHTTP.6.0");
}catch(e){}
try {
return new ActiveXObject("Msxml2.XMLHTTP.3.0");
}catch(e){}
try {
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){}
try {
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
return null;
}
Here is the code where you can easily understand select Tag on change with ajax request using PHP.
HTML Code
<div class="form-group">
<label>Select SMS Template</label>
<select id="sms-select" name="sms-select" onchange="smschange(this.value)" class="form-control">
<option value="">Select SMS Template</option>
<?php foreach ($sms as $row) { ?>
<option value="1">Sample SMS</option>
<option value="2">Test SMS</option>
<?php } ?>
</select>
</div>
Javascript Code
<script>
function smschange(id)
{
$.ajax({
type: 'post',
data: {'id': id},
url: 'sms.php',
dataType: 'json',
success: function(res){
alert(res);
},
error: function(res){
$('#message').text('Error!');
$('.dvLoading').hide();
}
});
}
</script>
JQuery Library Source Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">