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>
Related
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 am updating the status of a user as in this post here.
My Problem is now that only the first row of the table is changed normally and whatever the value of the drop list of the rows, the value displayed and sent is now select.
Here is my Ajax script:
$(document).ready(function()
{
$(document).on('change', '#patient_status ', function()
{
var pid = $(this).closest('tr').attr('id');
var current_status = $(this).closest('tr').children('td.change_status').text();
var new_status = $("#patient_status").val();
if(current_status == new_status)
{
alert("The status selected is already the same!");
}
else
{
if(confirm("Are you sure you want to change the status of a patient ?"))
{
$(this).closest('tr').children('td.change_status').text(new_status);
//console.log(pid + " " + new_status);
$.ajax({
url: '../php/changeStatus.php',
type: 'POST',
dataType: 'TEXT',
data: {pid: pid, new_status: new_status},
success:function(resp){
},
error:function(resp){
},
})
}
}
});
});
And here my HTML table:
<tr id="<?php echo $patient['patient_id']; ?>">
<td id="change_status"><?php echo $patient['patient_status']; ?></td>
<tr>
<td>
<select style="color: #0090ff; " class="form-control select" name="patient_status" id="patient_status">
<option value="select">Select</option>
<option value="Active">Active</option>
<option value="Deceased">Deceased</option>
<option value="Discharged">Discharged</option>
<option value="Defaulter">Defaulter</option>
</select>
</td>
The result is like the following:
The first row is changed normally to Active as the drop list indicates.
The second row the value was discharged, and the value in database and on the screen was changed to select.
I think the problem is in here:
var new_status = $("#patient_status").val();
or the on change event is not the case to use here.
EDIT
Whatever the value selected in the second row and afterwards I console it and it was just: select as the value displayed.
I changed the line that I am suspecting into:
var new_status = $("#patient_status option:selected").text();
But nothing changed at all.
You've given every select the same id, but an id has to be unique.
I suggest giving the select a class patient_status instead and changing the JS accordingly.
So something like this:
$(function() {
$(document).on('change', '.patient_status', function() {
var $select = $(this);
var $tr = $select.closest('tr');
var pid = $tr.attr('id');
var $status = $tr.children('td.change_status');
var current_status = $status.text();
var new_status = $select.val();
if (current_status == new_status) {
alert("The status selected is already the same!");
}
else {
if (confirm("Are you sure you want to change the status of a patient ?")) {
$status.text(new_status);
//console.log(pid + " " + new_status);
$.ajax({
url: '../php/changeStatus.php',
type: 'POST',
dataType: 'TEXT',
data: { pid: pid, new_status: new_status },
success: function(resp) {},
error: function(resp) {}
});
}
}
});
});
There's also an issue with an open tr tag somewhere in the middle of your html and a reference to td.change_status, but this element and class combination doesn't exist in your html. There is a td with an id of change_status but then you have the same problem as stated above in that it is not unique.
Edit: HTML fix below
<tr id="<?php echo $patient['patient_id']; ?>">
<td class="change_status"><?php echo $patient['patient_status']; ?></td>
<td>
<select style="color: #0090ff; " class="form-control select patient_status" name="patient_status">
<option value="select">Select</option>
<option value="Active">Active</option>
<option value="Deceased">Deceased</option>
<option value="Discharged">Discharged</option>
<option value="Defaulter">Defaulter</option>
</select>
</td>
</tr>
So I have this HTML form:
<select name="finder[4]" id="finder-2--4" class="pffield pf-make">
<option value="0">Please Select...</option>
<option value="52505">Alfa Romeo</option>
<option value="52506">Audi</option>
<option value="52499">BMW</option>
<option value="52501">Ford</option>
</select>
I have this jQuery
<script type="text/javascript">
jQuery("document").ready(function(){
//console.log('on load');
jQuery(".js-ajax-php-json").submit(function(){
//console.log('post');
var data = {
"action": "test"
};
data = jQuery(this).serialize() + "&" + jQuery.param(data);
jQuery.ajax({
type: "POST",
dataType: "json",
url: "/reglookup.php", //Relative or absolute path to response.php file
data: data,
success: function(data) {
console.log(data);
console.log(data['make']);
//$(".pf-make option:selected").text("Ford");
//$(".pf-make option:contains(Ford)").attr('selected', true);
//$(".pf-make option[text=" + data["make"] +"]").attr("selected","selected");
$(".pf-make").val('52499');
alert("Form submitted successfully.\nReturned json: " + data["make"]);
}
});
return false;
});
});
</script>
I get the following return from the json post
Object {make: "Ford", model: "Focus", year: "2010", engine: 2.5, fuel: "Petrol"}
So the post and call back work fine as these get logged in the console, and I need to be able to take the called back make data["make"] and update the selected option in the select form.
You can see I have tried a number of different options, even hand typing "Ford" into the code, but I always seem to get the following error back in the console:
(index):221 Uncaught TypeError: Cannot read property 'val' of null
For the life of me I cant get this working at the moment.
get the option value using contains, then set the select:-
var ford = $('.pf-make option:contains("Ford")').val();
$('.pf-make').val(ford);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="finder[4]" id="finder-2--4" class="pffield pf-make">
<option value="0">Please Select...</option>
<option value="52505">Alfa Romeo</option>
<option value="52506">Audi</option>
<option value="52499">BMW</option>
<option value="52501">Ford</option>
</select>
A simple solution is to iterate over the options to find the matching text, then access its value.
var $select = jQuery('.pf-make');
var value = 0;
$select.find('option').each(function(){
if(jQuery(this).text() == data.make){
value = jQuery(this).val();
return false;
}
});
$select.val(value);
Instead of $ use jQuery, and also use Instead of data["make"] to data.make
see this updated code. Please take note that it uses ID rather than class name to make it more specific
<script type="text/javascript">
jQuery("document").ready(function(){
//console.log('on load');
jQuery(".js-ajax-php-json").submit(function(){
//console.log('post');
var data = {
"action": "test"
};
data = jQuery(this).serialize() + "&" + jQuery.param(data);
jQuery.ajax({
type: "POST",
dataType: "json",
url: "/reglookup.php", //Relative or absolute path to response.php file
data: data,
success: function(data) {
jQuery("#finder-2--4").val(data.make);
}
});
return false;
});
});
</script>
I have 2 select2 boxes. First is Category and next is Sub-category.
Now, I want to change the options for subcategory box based on Category box selected value. And the data for Subcategory box should load using AJAX.
Please help me.
just solved it myself
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<select class="js-data-example-ajax" id="category" >
<option value="">Select a category</option>
<option>cat1</option>
<option>cat2</option>
<option>cat3</option>
</select>
<select class="js-data-example-ajax" id="sub-category" >
</select>
<script>
$("#category").select2({
placeholder: "Select a category",allowClear: true
});
$("#sub-category").select2({
placeholder: "Select sub-category",allowClear: true
});
$('#category').on("change", function (e) {
var result = '';
var catval = $(this).val();
if(catval != '') {
url = "subcats_top/"+ catval;
$.ajax({
type: "GET",
url: url,
dataType: 'json',
success: function(data){
var length = data.length;
if(length > 0) {
for(key in data) {
result += '<option value="' + data[key].id + '">' + data[key].name + '</option>';
}
} else {
}
$("#sub-category").html(result);
}
});
}
});
</script>
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
}
}
});
});