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>
Related
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 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.
});
i want to make a ajax call to controller when a value
is selected from select box.
this is my code:
<select class="form-control required" name="law_name" id="law_name">
#foreach($law_name as $lawname)
<option value="{{$lawname->id}}">{{$lawname->law_name}}
</option>
#endforeach
</select>
<script>
$("#law_name").on('change', function(){
alert('123');
$.ajax({
type: 'POST',
dataType: "json",
data: data,
url: "{{ URL::to('admin/SubLawController/index') }}",
success: function (response) {
}
});
});
</script>
my script is not running when i change value from select box
following is jquery code for making ajax call on change event of dropdown box,
$(function() {
$("#law_name").change(function () {
alert( $('option:selected', this).text() );
$.ajax({url: "http://xyz"+ $( this ).text(), success: function(result)
{
$("#div1").html(result);
}});
});
});
Code is in jquery , you have to use xmlhttprequest object for pain javascript.
How to post one variable in ajax call to multiple php file's using URL method..
My data is as follow..
<select name="districts" id="district_list" class="update" onChange="getDist(this.value)" >
<option value="d1">east</option>
<option value="d2">west</option>
</select>
I want to pass these id value to another two php files using ajax and i tried as follow..
function getState(val) {
$.ajax({
type: "POST",
url: "get_dist.php",
url: "get_city.php",
data:'states_id='+val,
success: function(data){
$("#district_list").html(data);
}
});
}
Please try this
<select name="districts" id="district_list" class="update" onChange="getDist(this.value) ; getCity(this.value)" >
<option value="d1">east</option>
<option value="d2">west</option>
</select>
<script>
function getDist(val){
$.ajax({
type: "POST",
url: "get_dist.php",
data:'states_id='+val,
success: function(data){
$("#district_list").html(data);
}
});
}
function getCity(val){
$.ajax({
type: "POST",
url: "get_city.php",
data:'states_id='+val,
success: function(data){
$("#city_list").html(data);
}
});
}
</script>
on my web page i have text area like this
and i suppose to get data in textarea when i alternate the value of select box( or onChange event), so i used ajax function
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function myCall() {
var request = $.ajax({
url: "ajax.php",
type: "GET",
dataType: "html"
});
request.done(function(msg) {
$("#mybox").html(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
</script>
and this is my select box code,
<select name="txtname" id="txtname" onChange="myCall()" >
<option value="0">Select Age:</option>
<option value="100083">100083</option>
<option value="22-26">22-26</option>
<option value="26-30">26-30</option>
<option value="30-34">30-34</option>
</select>
actualy i want to fetch record on the basis of select box value, this function working fine for static value but i am puzzled how to get data from data base..
and my ajax page coding is here..
<?php
$con=mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("hmc", $con);
$sql="SELECT * FROM news WHERE name = '22-26'";
$result = mysql_query($sql);
?>
<?php
while($row=mysql_fetch_array($result))
{
?>
<tr>
<td>
<?php echo $row['news1'];?></h3></td>
</tr><br /><hr /><br />
<?php
}
?>
</div>
any idea will be appreciated...
Your ajax call is not proper, you need to pass your select box value to the php side, like this
$.ajax({
url: "ajax.php",
type: "GET",
dataType: "html",
data:"value="+$("#txtname").val();
});
then use this value on php side using $_GET['value']