I want to update TextBox value on basis of selectChange
HTML:
<select name="abc" id="def">
<option value="1">1st Record</option>
<option value="2">2nd Record</option>
<option value="3">3rd Record</option>
</select>
<input value="" name="final_value" id="final_value" />
JS:
$("#selectboxid").change(function() {
$.ajax({ url: "test.php", data:"value="+$("#def").val() , success: function(){
$("#final_value").val(data);
}});
});
PHP:
<?php
function abc($data){
// Database operations
echo json_encode($response);
}
abc($_GET);
?>
With this approach value is updating very nicely But i have below points:
above approach prints values and one can see in Network Tab. Is it a nice way to do it?
I also tried using return $response in PHP function but then response is null and console.log(data) in ajax shows null array.
So, how to update Input value after Ajax without echoing. I do not want that user shall see any type of response even in Network Tab.
I have seen various websites which does the same and not showing any values in Network tab.
** Is there any different approach to do this?
You can alternatively try like this
All HTTP requests can possible to watch on their own network. You can restrict this
$(document).ready(function(){
var params = {};
params['value'] = $("#def").val();
$.post('test.php', params, function(response){
console.log(response);
alert(response);
});
});
I've not tested this, but immediatly I've spotted a couple of things:
$("#selectboxid").change(function() {
// .val is a function
$.ajax({ url: "test.php", data:"value"+$("def").val() , success: function(data) { //Your success callback needs to take an argument
//data will be either a string or a JSON object, so depending on what you want from it, you'll probably not be able to just pass it to the val() function
$("#final_value").val(data);
}});
});
Not 100% complete I'm sure, but hopefully will give you a good starting point
It should be like this
$("#selectboxid").change(function() {
$.ajax({
url: "test.php",
data:{
"value": $("def").val()
},
success: function(){
$("#final_value").val(data);
}
});
});
Related
I know this question was already answered one million times but I'm becoming desperate with this code.
I have two files php files and I want to send a variable from a part written in JS to the other PHP file. So here's the code:
carga_datos.php
<script>
function MyAlert() {
var radio1 = $("input[name='inputTipoActividad']:checked").val();
$.ajax({
url : 'post.php',
type : "POST",
data: {'radio1' : radio1},
dataType:'json',
success : function(data) {
alert(data);
},
});
}
</script>
I'm calling to MyAlert() in a radio button form
post.php
<?php
$radio1 = $_POST['radio1'];
echo $radio1;
?>
And I call post.php into carga_datos.php like this:
And this is the error I'm retrieving:
Notice: > Undefined index: radio1 in C:\xampp\htdocs\gis\post.php on line 2
Edit:
It seems you have used dataType "json" so it will expect a "json", if none is returned you will get undefined or an empty response.
If you remove dataType: "json" you should be able to retrieve the data just fine.
function MyAlert() {
var radio1 = $("input[name='inputTipoActividad']:checked").val();
$.ajax({
url : 'post.php',
method : "POST",
data: {"radio1" : radio1},
success : function(data) {
console.log(data);
}
});
}
If you want to check with "dataType: 'json'" still in your code, you need to return your PHP code like the following:
<?php echo json_encode($_POST); ?>
This will then either return your $_POST data or just an empty [] array.
// Old Answer for just true/false values
If you just want to see if the checkbox was checked or not to retrieve a boolean, please try the following:
var radio1 = $("input[name='inputTipoActividad']").prop("checked");
This will return TRUE or FALSE. If not wrong, if you use
$("input[name='inputTipoActividad']:checked").val()
it'll return "on" or nothing (might be wrong here though).
Tested it with the ".prop("checked")" and it worked for me.
This is my ajax code
<script type="text/javascript">
$('#right_make').change(function() {
var make = document.getElementById('right_make').value;
alert(make);
$.ajax({
url: 'get.php',
async: true,
cache: false,
data: {make:make},
dataType: "html",
type:'post',
success: function (result) {
var select = document.getElementById('right_model');
select.insertAdjacentHTML('beforeend', result);
}
});
});
</script>
I am getting data in form of html reverted from backend php ,I want to append this data in select tag ,given below
<select name="model" id="right_model" class="custom-select c_model right_model">
<option value="">Model</option>
</select>
I tried the above thing but it is producing gaps between the options ,
this is what I am appending from backend
<?php
include 'includes/config.php';
include 'includes/database.php';
$make=$_POST['make'];
$stmt=$db->prepare("SELECT distinct `model` FROM `car` WHERE make=?");
$stmt->bind_param("s",$make);
$stmt->execute();
$stmt->bind_result($model);
while ($stmt->fetch()) {
echo "<option>".$model."<option>";
}
?>
Any idea ow to do that?
Generally, if you want to communicate some data with a php server, you may use JSON.
JSON keeps a very sample solution to traduce javascript or php to a very sample string. After, you can traduce JSON to php, Javascript or what else...
You may do this because php do not understand javascript and javascript do not understand php, of course.
When you pass data with your ajax, you may do like this:
$.ajax({
url: 'get.php',
async: true,
cache: false,
data: {make:JSON.stringify (make)}, // Traduce to simply string.
dataType: "html",
type:'post',
success: function (result) {
var select = document.getElementById('right_model');
select.insertAdjacentHTML('beforeend', result);
}
});
Then, when you get the data in your php, you may do like this:
$make=json_decode ($_POST['make']); // Traduce to php.
When you use echo:
echo json_encode ("<option>".$model."<option>");
And finally in your javascript:
success: function (result) {
var select = document.getElementById('right_model');
select.insertAdjacentHTML('beforeend', JSON.parse (result));
}
Consult the documentation.
What I want to do:
I want to do a input text field with a jquery autocomplete function which gets the source data from a cross-domain curl request. The result should look similar like this: http://abload.de/img/jquerydblf5.png (So I actually want to show additional infos which I get from the curl Request). The URL to get the source data is http://www.futhead.com/15/players/search/quick/?term= and in the end I add those letters which are currently typed in at my input field (for example "Ronaldo").
At the moment I only tried to perform the searchrequest without showing all infosin the dropdown as shown in the screen above. I only want to see which playernames I actually got back by the curl request. Later I will try to add more information for the dropdown. Maybe you guys can help me as well with this as well (I think its called custom renderItem ??).
This is what I've tried:
<script>
$( "#tags" ).autocomplete({
source: function (request, response) {
$.ajax({
type: 'GET',
url: 'playerscraper.php',
dataType: "json",
data: function () {
return $("#results").val()
},
success: function (data) {
// I have no idea what this response and map is good for
response($.map(data, function (item) {
return {
label: item.label,
id: item.value,
};
}));
},
});
}
});
</script>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
My playerscraper.php is performing the curl request and actually returns a array (tested with echo):
$term = $_GET['term'];
$curlRequest = new CurlRequest();
$result = $curlRequest->get('http://www.futhead.com/15/players/search/quick/?term=' . $searchterm);
$players = array();
return json_encode($result);
My problem:
I have no idea how to do the source part for the autocomplete function this way, that I get the right results from the ajax request with my searchterm from the input field. When I type in something in the input field, nothing happens (the function which defines the source is getting called - tested with an alert).
I am new to codeigniter , I am trying to call a controller on AJAX call sucess...
I tried to search stackoverflow but i didn't get what i needed..
Form in my view
<form onsubmit="categorysearch()" method="GET">
<label for="username">Category : </label>
<select id="category" name="category">
<option value="android">android</option>
<option value="iphone">iphone</option>
<option value="windowsphone">windowsphone</option>
<option value="blackberry">blackberry</option>
</select>
<input type="submit" name="searchkeywordsubmit" title="Search" id="searchkeywordsubmit" />
</form>
When the form is submitted the below java script is executed.
JavaScript in my View
function categorysearch()
{
var categorykeyword = document.getElementById("category").value;
alert("Category keyword is " + categorykeyword);
$.ajax({
type: "GET",
async: false,
//dataType: "json",
url: "http://localhost/2009074/index.php/rest/resource/categorysearch/category/" + categorykeyword + "",
success: function(data)
{
alert("Returned data is " + data);
// i want to call the constructor here with the returned data
//$("body").html(data);
//$('body').append(output_string);
},
error: function(data)
{
alert("error is " + data);
}
});
}
AJAX call works successfully , I can see the returned data in the alert (Returned data is JSON encoded)
Now i want to call another controller with the recieved data ...
Please help me to figure this out
you just need to redirect the control the required controller :
success: function(data)
{
window.location.href="http://localhost/my_project_name/my_controller_name";// you just need to add this event on success call.
},
A really dirty way to do it is save the JSON object as session variable and navigate to a page or reload the page and in the constructor of the page, check for the session variable and use the variable.
well that's the only way I can think of at the moment.
So here I have two dropdowns:
<select id="CountryId">
<option value="16">UK</option>
<option value="17">Germany</option>
<option value="18">Italy</option>
<option value="19">Spain</option>
</select>
<select id="CityId"> </select>
And in the app I have a php function which returns a list of cities by the country's ID:
{"63":"Rome","65":"Palermo","72":"Torino","73":"Milan"}
What I try to achieve is onChange of the first dropdown to take the country's ID and populate the second list with the returned cities.
I try to achieve it with this AJAX call, and tried to debug it, but nothing seems to work. The var data is being picked up, but nothing else happens. Here is the snippet:
$('#CountryId').change(function(){
var data = $('#EventCustomerId option:selected').val();
$.ajax({
type:'POST',
async: true,
cache: false,
url: <?php echo Router::url(array('controller'=>'projects','action'=>'getbycustomer')) ?>,
success: function(response) {
jQuery('#CityId').html(response);
},
data: data
});
return false;
})
I am not quite secure about the way of filling the second dropdown with the response. The response is returned in plain HTML in JSON.
Any help is much much appreciated.
have you tried with putting async to false?
$('#CountryId').change(function(){
var data = $('#EventCustomerId option:selected').val();
$.ajax({
type:'POST',
async: false,
cache: false,
url: <?php echo Router::url(array('controller'=>'projects','action'=>'getbycustomer')) ?>,
success: function(response) {
jQuery('#CityId').html(response);
},
data: data
});
});
can you post your response here if the call should work now