Can someone help me in find what's my error in tihis ajax post request?
This is html
<select onchange="fetch_pro(this.value);">
<option>select</option>
<option value="1">option 1</ option>
<option value="2">option 2</ option>
<option value="3">option 3</ option>
</select>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function fetch_pro(val)
{
$.ajax({
type: 'post',
url: 'fetch.php',
data: {
id_reg:val
},
dataType: "json",
cache: false,
success: function (response) {
alert (response);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus); alert("Error: " + errorThrown);
} ,
});
}
</script>
and this is sample fetch.php
<?php
echo "ok";
?>
It return status error but error empty, what's wrong?
Related
how to show data not found,
when ajax call data not found using select option
<div class="col-md-6 col-12">
<div class="mb-1">
<label class="form-label" for="country-floating"><?php echo display('city')?></label>
<select name="city" id="city" class="select2 form-select" >
<option value="">No Selected</option>
</select>
</div>
</div>
where my ajax call function are as
<script type="text/javascript">
$(document).ready(function(){
$('#state').change(function(){
var id=$(this).val();
$.ajax({
url : "<?php echo base_url('suppliers/get_city');?>",
method : "POST",
data : {id: id},
async : true,
dataType : 'json',
success: function(data){
var html = '';
var i;
for(i=0; i<data.length; i++){
html += '<option value='+data[i].id+'>'+data[i].city_name+'</option>';
}
$('#city').html(html);
},
error: function(jqXHR, textStatus, errorThrown){
alert('Error: ' + textStatus + ' - ' + errorThrown);
}
});
return false;
});
});
</script>
I don't understand anything now , please help
my code is working properly i just want to show that when no data is found then i want to show "data not found" in select option
I have a "POST" ajax call to getSegnalazioniMappa.php.
When I try to recover the passed variable I have notice: undefined variable.
JavaScript code:
$(document).ready(function(){
$('#gravita').change(function(){
var index = document.getElementById("gravita").value;
$.ajax({
method: "POST",
data:{index:index},
url: "getSegnalazioniMappa.php",
processData: false,
success: function(data){
console.log(data);
},
error: function(e) {
alert(e.responseText);
},
dataType: "JSON"//set to JSON
});
});
});
This is getSegnalazioniMappa.php
<?php
require('../../../setup/database_connection.php');
if(isset($_POST['index'])){ //this one is always false
$index = $_POST['index'];
}
?>
HTML
<select name="gravita" onchange="updateTable(this.value)" style="width: 130px;" class="form-control" id="gravita" required>
<option value="all" selected>Tutto</option>
<option value="bassa">Bassa</option>
<option value="media">Media</option>
<option value="alta">Alta</option>
</select>
You got undefined in error because you did not get any response from the server. you can see in console.
also where is onchange="updateTable(this.value)" defined ???
$(document).ready(function(){
$('#gravita').change(function(){
var index = $(this).val();
$.ajax({
method: "POST",
data:{index:index},
dataType: "JSON",
url: "getSegnalazioniMappa.php",
processData: false,
success: function(data){
console.log(data);
},
error: function(xhr,textStatus,err) {
console.log("readyState: " + xhr.readyState);
console.log("responseText: "+ xhr.responseText);
console.log("status: " + xhr.status);
console.log("text status: " + textStatus);
console.log("error: " + err);
},
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="gravita" style="width: 130px;" class="form-control" id="gravita" required>
<option value="all" selected>Tutto</option>
<option value="bassa">Bassa</option>
<option value="media">Media</option>
<option value="alta">Alta</option>
</select>
Your PHP code should be like this:-
<?php
if(isset($_POST['index'])){
echo $index = $_POST['index'];
}
?>
ajax request should be :-
<script type="text/javascript">
$(document).ready(function(){
$('#gravita').change(function(){
var index = document.getElementById("gravita").value;
$.ajax({
method: "POST",
data:{index:index},
url: "getSegnalazioniMappa.php",
processData: true,
success: function(data){
alert(data);
console.log(data);
},
error: function(e) {
alert(e.responseText);
},
dataType: "JSON"//set to JSON
});
});
});
</script>
processData should be true.
I have two separate files, bargraph.html and data.php.
Part of bargraph:
<form method="POST" name="dataform" action="" id='dataForm'>
<select id="data1" name="data1">
<option value=""></option>
<option value="DateRecorded">DateRecorded</option>
<option value="InletVoltage">InletVoltage</option>
<option value="InletCurrent">InletCurrent</option>
<option value="ActivePower">ActivePower</option>
<option value="ApparentPower">ApparentPower</option>
<option value="PowerFactor">PowerFactor</option>
<option value="SystemID">SystemID</option>
</select>
<select id ="data2" name="data2">
<option value=""></option>
<option value="DateRecorded">DateRecorded</option>
<option value="InletVoltage">InletVoltage</option>
<option value="InletCurrent">InletCurrent</option>
<option value="ActivePower">ActivePower</option>
<option value="ApparentPower">ApparentPower</option>
<option value="PowerFactor">PowerFactor</option>
<option value="SystemID">SystemID</option>
</select>
<button type="button" id="submitButton" name="submitButton">Submit</button>
</form>
<script type="text/javascript">
$('#submitButton').click(function(e) {
var data1 = $("#data1").val();
var data2 = $("#data2").val();
$.ajax({
type: 'post',
url: 'data.php',
dataType: 'html',
data: {data1:data1,data2:data2},
success: function(data){
console.log(data);
console.log('#dataForm');
},
error: function (xhr, ajaxOptions, thrownError){
console.log(thrownError);
},
complete: function(){
}
});
e.preventDefault();
});
</script>
Part of data.php:
if (isset($_POST['data1'])) {
$opp1 = $_POST['data1'];
} else {
$opp1 = 'SystemID';
}
if (isset($_POST['data2'])) {
$opp2 = $_POST['data2'];
} else {
$opp2 = 'ApparentPower';
}
$sql = "SELECT $opp1, $opp2 FROM RaritanMachineDataa";
$result = sqlsrv_query($conn, $sql);
$data = array();
while ($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
$row = preg_replace("/[^0-9]/", "", $row);
$data[] = $row;
}
sqlsrv_free_stmt($result);
sqlsrv_close($conn);
echo json_encode($data);
?>
When I select from the two drop down menus, in my browser console, it prints that chosen data in JSON format and the values from my database, however when I load the data.php file via browser URL, it is printing SystemID and ApparentPower and not the chosen data. Why is this? Can someone help me please?
See below screenshot of browser console printing the chosen data from drop downs.
https://imgur.com/rdxgWaB
and screenshot of data.php loaded via browser after choosing from drop down InletCurrent and ActivePower.
https://imgur.com/a/eiDeTLs
The problem is dataType: 'html'
You post the json data but define the html
Try to change to json :
$.ajax({
type: 'post',
url: 'data.php',
dataType: 'json',
data: {data1:data1,data2:data2},
success: function(data){
console.log(data);
console.log('#dataForm');
},
error: function (xhr, ajaxOptions, thrownError){
console.log(thrownError);
},
complete: function(){
}
});
I have two seperate files, one bargraph.html, and the other data.php.
Bargraph.html is as follows:
<form method="POST" name="dataform" action="">
<select name="data1" id="data1-value">
<option value="DateRecorded">DateRecorded</option>
<option value="InletVoltage">InletVoltage</option>
<option value="InletCurrent">InletCurrent</option>
<option value="ActivePower">ActivePower</option>
<option value="PowerFactor">PowerFactor</option>
<option value="SystemID">SystemID</option>
</select>
<select name="data2" id ="data2-value">
<option value="DateRecorded">DateRecorded</option>
<option value="InletVoltage">InletVoltage</option>
<option value="InletCurrent">InletCurrent</option>
<option value="ActivePower">ActivePower</option>
<option value="PowerFactor">PowerFactor</option>
<option value="SystemID">SystemID</option>
</select>
</form>
<script type="text/javascript">
$('#data1-value').change(function(){
var data1Value = $(this).val();
$('#data2-value').change(function(){
var data2Value = $(this).val();
$.ajax({
type: 'post',
url: 'data.php',
dataType: 'html',
data: {data1, data2: data1Value, data2Value},
success:function(data){
alert(data);
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
},
complete: function(){
}
});
})});
</script>
A section of data.php is as follows:
if (isset($_POST['data1'])) {
$opp1 = $_POST['data1'];
$opp2 = $_POST['data2'];
} else {
$opp1 = 'SystemID';
$opp2 = 'ApparentPower';
}
$sql = "SELECT $opp1, $opp2 FROM RaritanMachineDataa";
In my bargraph.html I have two drop down menus. I want the options selected from the drop down menu to be sent using AJAX to my data.php file to perform a select statement on my database.
Currently when I run my code, it's returning an error
Uncaught ReferenceError: data1 is not defined
And this is pointing to line 53:
url: 'data.php',
Could someone give me some assistance on this please as I do not know how to fix this.
UPDATE: (Code below):
<script type="text/javascript">
$('#dataform').submit(function(e){
var data1Value = $("#data1").val();
var data2Value = $("#data2").val();
$.ajax({
type: 'post',
url: 'data.php',
dataType: 'html',
data: {data1, data1Value, data2: data2Value},
success:function(data){
alert(data);
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
},
complete: function(){
}
});
})});
</script>
Returning error:
Uncaught SyntaxError: Unexpected token }
On line (at the 2nd last line)
})});
I have tried removing the bracket, and curly bracket but cannot seem to get it to run. What have I done wrong? Thanks for the assistance
UPDATE (Submit button not POSTING data):
<option value="PowerFactor">PowerFactor</option>
<option value="SystemID">SystemID</option>
</select>
<input type="submit" name="submit" value="Submit">
</form>
<script type="text/javascript">
$('#dataform').submit(function(e){
var data1Value = $("#data1").val();
var data2Value = $("#data2").val();
$.ajax({
type: 'post',
url: 'data.php',
dataType: 'html',
data: {data1, data1Value, data2: data2Value},
success:function(data){
alert(data);
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
},
complete: function(){
}
});
e.preventDefault();
});
Your Error is here:
$.ajax({
type: 'post',
url: 'data.php',
dataType: 'html',
data: {data1, data2: data1Value, data2Value}, <-- Your error is here
Change this line to:
data: {data1: data1Value, data2: data2Value}
Also I've just noticed that you are doing this
('#data1-value').change(function(){
var data1Value = $(this).val();
$('#data2-value').change(function(){
var data2Value = $(this).val();
I don't believe that $('#data2-value').change is ever getting called. I suggest you handle the submission of the form after both values have been set!!!
With #Devpro comment, your dropdown menus now need to have an assigned id in order for this submit function to work
HTML
<select name="data1" id="data1-value"> to <select id="data1" name="data1" id="data1-value">
<select name="data2" id ="data2-value"> to <select id="data2" name="data2" id ="data2-value">
JQuery
$('#dataform').submit(function(e) {
var data1Value = $("#data1").val();
var data2Value = $("#data2").val();
//ajax submit with my edits
$.ajax....
e.preventDefault(); //prevent page refresh.
});
Hello I am trying to make a <select> menu from which when you select some of the options the selected option to be writen inside the database using Ajax, here is what I have acomplished so far:
this is my select menu:
<select name="status">
<option value="">Select option:</option>
<option value="aproved">aproved</option>
<option value="canceled">canceled</option>
</select>
Here is my java script which should select the change and send it to the backend php file where the database conection and the UPDATE query are, the select method is ot working ot it is not updating imediately after a selection is done. The Goal is once a user make a selection the result to go inside the database withoud the need of pressing button or doing anything else.
<script>
$(document).ready(function(e) {
$('select[name=status]').change(function(){
selectstatus = $("select[name=status]").val();
$.ajax({
type: "POST",
url: "selectbackend.php",
data: {"selectstatus": selectstatus
},
})
.done(function(data, textStatus, jqXHR){alert(textStatus);})
.fail(function(jqXHR, textStatus, errorThrown){alert(jqXHR+"--"+textStatus+"--"+errorThrown);});
});//end change
});//end ready
</script>
but it is not working either is giving any error, my suspicions are that the java script is not working in some way.
here is backend file:
<?php
$selectstatus = $_POST['selectstatus'];
$cxn = mysqli_connect($host,$user,$password,$dbname);
if (mysqli_connect_errno()) {echo "No connection" . mysqli_connect_error();}
$query = " UPDATE test
SET var = '$slectstatus'
WHERE id='1";
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<html>
<select id="status" name="status">
<option value="">Select option:</option>
<option value="aproved">aproved</option>
<option value="canceled">canceled</option>
</select>
</html>
<script>
$(document).ready(function(){
$('#status').change(function(){
//var selectstatus = $("select[name=status]").val();
$.ajax({
type: "POST",
url: "selectbackend.php",
data: {"selectstatus": $(this).val()},
})
.done(function(data, textStatus, jqXHR){alert(textStatus);})
.fail(function(jqXHR, textStatus, errorThrown){alert(jqXHR+"--"+textStatus+"-- +errorThrown);});
});//end change
});//end ready
</script>
Then:
<?php
$selectstatus = addslashes($_POST['selectstatus']);
$cxn = mysqli_connect($host,$user,$password,$dbname);
if (mysqli_connect_errno()) {echo "No connection" . mysqli_connect_error();}
$query = " UPDATE test
SET var = '$selectstatus'
WHERE id='1'";
try this:
<script>
$(document).ready(function(e) {
$('select[name=status]').change(function(){
selectstatus = $("select[name=status]").val();
$.ajax({
type: "POST",
url: "selectbackend.php",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({"selectstatus": selectstatus}),
})
.done(function(data, textStatus, jqXHR){alert(textStatus);})
.fail(function(jqXHR, textStatus, errorThrown){alert(jqXHR+"--"+textStatus+"--"+errorThrown);});
});//end change
});//end ready
</script>