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(){
}
});
Related
I have multiple select box on my form.
<form id="form">
<?php
for($i = 1; $i<=9; $i++)
{
?>
<input type="hidden" name="modelID" value="1"/>
<div>
Process <?php echo $i; ?>
<select class="process" name="process[]" id="Process<?php echo $i; ?>">
<option value="">Choose One</option>
<option value="P1">Process 1</option>
<option value="P2">Process 2</option>
<option value="P3">Process 3</option>
</select>
</div>
<?php
}
</form>
And now I need to get the value of each value for select box that only filled to PHP.
Example I only choose Process 2, then store it to PHP to be Process 2: P2.
And on the PHP I need to save it to table.
//maybe using foreach?
$insert = oci_parse($c1, "INSERT INTO tbl_process(MODELID, PROCESS1, PROCESS2, PROCESS3) VALUES('1', '', '', '')");
//ONLY insert filled select box, on my example PROCESS2 will be filled P2 to table column.
And the JS
$('#btnSave').on('click', function()
{
var modelID = $("#modelID").val();
var form_data = $("#form").serialize();
alert(form_data);
$.ajax(
{
'type': 'post',
'url': 'saveProcess',
'data': {
'form_data': form_data
},
'success': function(response)
{
}
});
});
My question, how to ONLY insert filled select box, on my example PROCESS2 will be filled P2 to table column?
What you can do is only pass the modelID and processID using the ajax call.
Whenever the user changes the process you save the data through the ajax call.
<form id="form">
<?php for($i = 1; $i<=9; $i++) { ?>
Process <?php echo $i; ?>
<select class="process" modelID="<?php echo $i; ?>">
<option value="P1">Process 1</option>
<option value="P2">Process 2</option>
<option value="P3">Process 3</option>
</select>
<br>
<?php } ?>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('.process').change(function(){
var modelID = $(this).attr('modelID');
var processID = $(this).val();
$.ajax({
url: 'saveProcess.php',
dataType: 'json',
type: 'post',
data: {'modelID':modelID, 'processID':processID},
success: function( data, textStatus, jQxhr ){
console.log(data);
},
error: function( jqXhr, textStatus, errorThrown ){
console.log( errorThrown );
}
});
});
});
</script>
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.
});
My page keeps refreshing when I select an item from a listbox. I'm new to Ajax and still learning from it. Here's my code I want to make Ajax code for this one.
<form id="myform" action="home_log.php" method="post">
<label1>Room Type:*</label1>
<select name="roomtype" onchange="this.form.submit();">
<option value="Standard Room A">Standard Room A</option>
<option value="Standard Room B">Standard Room B</option>
<option value="Deluxe Room">Deluxe Room</option>
</select>
</form><br>
<label1>Room Number:*</label1>
<div id="form_output">
<?php
$roomtype = isset($_POST['roomtype']) ? $_POST['roomtype'] : '';
echo "<select>";
include_once 'includes/dbh-inc.php';
$result = $conn->query("select RoomName from tblroom_sample where RoomType='".$roomtype."'");
while ($row = $result->fetch_assoc()) {
unset($roomtype);
$RoomName = $row['RoomName'];
echo '<option value="'.$RoomName.'">'.$RoomName.'</option>';
}
echo "</select>";
?>
</div>
Ajax:
$(document).ready(function () {
$('#myform').on('submit', function(e) {
e.preventDefault();
$.ajax({
url : $(this).attr('action') || window.location.pathname,
type: "GET",
data: $(this).serialize(),
success: function (data) {
$("#form_output").html(data);
},
error: function (jXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
});
This question is SOLVED - solution is on the bottom of the question.
Let's say I have this form:
<form id="form1" action="" method="POST">
<select name="cars">
<option value="">Choose a car</option>
<option value="Ferrari">Ferrari</option>
<option value="Lamborghini">Lamborghini</option>
</select>
<select name="colors">
<option value="">Choose a color</option>
<option value="Green">Green</option>
<option value="Red">Red</option>
</select>
Php:
$cars = $_POST['cars'];
$colors = $_POST['colors'];
echo "Car: ".$cars." - Color: ".$colors."";
Ajax:
<script type='text/javascript'>
$('select[name="colors"]').on('change', function(){
$.ajax({
type: "POST",
url: "phpfile.php",
data: $("#form1").serialize(),
success: function(data){
$('#target1').html(data);
}
});
return false;
})
</script>
I want to show on html the results:
<div id="target1"></div>
I want to show the results when I choose the color (The 2nd dropdown):
onchange="this.form.submit()"
IT IS DONE:)
I used this code and it I am getting what I want:
<script type='text/javascript'>
$("#colorID").on("change", function() {
var $form = $("#form1");
var method = $form.attr("method") ? $form.attr("method").toUpperCase() : "GET";
$.ajax({
url: 'phpfile.php',
data: $form.serialize(),
type: method,
success: function(data){
$('#target1').html(data);
}
});
});
</script>
Technically you dont need ajax to get what your asking for but heres jQuery ajax example:
Change your HTML to:
<select name="colors" onchange="this.form.submit()">
<option value="">Choose a color</option>
<option value="Green">Green</option>
<option value="Red">Red</option>
</select>
$( "#form1" ).submit(function( event ) {
event.preventDeafault();
alert('form submitted');
$.ajax({
type: "POST",
url: "<YOUR PHP FILE PATH>",
data: $("#form1").serialize(),
success: function(data){
alert('ajax success');
$('#target1').html(data);
}else{
alert('ajax error');
}
});
return false;
})
In your PHP:
print_r($_POST);
$car = $_POST['car'];
$color = $_POST['color'];
echo "<p>Car: ".$car." - Color: ".$color."</p>";
This is untested - I've just typed it out on my phone during my lunch break!
To debug the php add this line ( to unsure the post worked):
print_r($_POST);
Use your browser developer tools to debug your AJAX and JS
I've add alerts to help you debug - you can remove these when its working
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>