I need to POST the value of the selected option to use in a query on another page.
This is my form:
<form method="post" data-remote="true">
<select class="selectpicker" data-live-search="true" name="switch-area">
<?php while($test3 = sqlsrv_fetch_array($test2, SQLSRV_FETCH_ASSOC)) : ?>
<option data-tokens="<?php echo $test3['Name'] ?>" value="<?php echo $test3['Name'] ?>"><?php echo $test3['Name'] ?></option>
<?php endwhile; ?>
</select>
<button class="btn btn-info">View Area</button>
</form>
I am using ajax and this is my code:
$(document).ready(function() {
$('select[name="switch-area"]').change(function(){
var status = $(this).val();
$.ajax({
type: 'POST',
url: 'sim-area.php',
data: {changeStatus: status}
});
});
});
Then on sim-area.php this is my code to grab the data:
$selectedArea = $_POST['switch-area'];
But I keep getting an undefined index error, am I posting this in the correct way?
You're sending changeStatus but not switch-area in your data, you want
$selectedArea = $_POST['changeStatus'];
Related
Currently I have a select option where I'm running a forloop to fetch all the records from the database like so:
<?php if($cities) foreach($cities as $cit): ?>
<option value="<?php echo $cit['id']; ?>" <?php echo ($listing[0]['emirate'] == $cit['id'])?'selected="selected"':''?>><?php echo $cit['name']; ?></option>
<?php endforeach; ?>
Now this fetches around 30000 entries from my database which slows down my page everytime it is loaded in because it adds an extra 30000 lines of code. So I want a way to call this through a AJAX request that loads another view with the same forloop. To do this I tried creating a new file named ajaxcities.php and placed the following code:
<select name="emirate" class="form-control select2 selectsearch" <?php echo (isset($read) ? $read:''); ?> required>
<option value="<?php echo set_value('country'); ?>">Select City</option>
<?php if($cities) foreach($cities as $cit): ?>
<option value="<?php echo $cit['id']; ?>" <?php echo ($listing[0]['emirate'] == $cit['id'])?'selected="selected"':''?>><?php echo $cit['name']; ?></option>
<?php endforeach; ?>
</select>
Then I replaced this code where it was previously in my view class before to this:
<label class="control-labels ">City</label>
<span id="city-wrap">
<div class="invalid-feedback">Please choose a City</div>
<script>
function getcity(obj){
var dataString = new Object();
dataString.type = obj.val();
$.ajax({
type: "post",
url: "<?php echo site_url('listings/ajaxgetcity'); ?>/",
data: dataString,
success: function(result) {
$('#city-wrap').html(result);
}
});
}
</script>
And made a new controller with the following:
public function ajaxgetcity()
{
$views['cities'] = $this->listings_model->cities();
$this->load->view('crm/listings/ajaxcities',$views,false);
}
But this removed the select dropbox altogether. I want a way to load this only with an AJAX call and not everytime the page is reloaded
I have a question: How to get value form Ajax and sent value to PHP ? Can someone help me! Value percentold ajax sent to $percent for option value.
<div class="form-group p-1 m-0">
<h6>Percent </h6>
<select class="form-control form-control-lg p-2" name="percent" id="percent" >
<?php
$percent = 'val(data.percent)'; // <<<--- HERE HOW TO GET Value FORM Ajax and sent here
echo '<option class="text-white">'.$percent.'</option>';
for ($i=100; $i>=1; $i--) {
?>
<option value="<?php echo $i;?>"><?php echo $i;?>%</option>
<?php
}
?>
</select>
</div>
//////////////////////////////AJAX///////////////////////////
$("body").on("click",".editBtn", function(e){
e.preventDefault();
edit_skill = $(this).attr('id');
//console.log(edit_skill);
$.ajax({
url: 'assets/php/process.php',
method: 'post',
data: {edit_skill: edit_skill},
success:function(response){
//console.log(response);
data = JSON.parse(response);
//console.log(data);
$("#id").val(data.id);
$("#title").val(data.skill);
$("#percentold").val(data.percent);
$("#sequenceold").val(data.sequence);
$("#percentold").val(data.percent); <------Neet post go to php
}
});
});
what is val(data.percent). As is, its just string.
if you want to add it as option from javascript to select then you need to use
<script>
$('#percent').append(new Option(data.percent, ""));
</script>
in your case :
$('#percent').append(new Option(data.percent, ""));
I am trying to POST the value selected in a dropdown list using AJAX call. But the POST variable remains blank when the value is selected from the dropdown.
I have used the ECHO method to check whether it is returning the POST value. But it is empty.
Here is the code for reference:
Javascript (Jquery and Ajax):
<script>
$(document).ready(function(){
$("#booking_date").change(function(){ //listen when the option change
var optionValue = $("#booking_date").val(); //get the new value
$.ajax({
url: "doctordetails.php", //php file which recive the new value and save it to the database
data: { optionValue: optionValue }, //send the new value
type: "POST" , //use POST method
success: function(data) {
console.log(optionValue);
}
});
});
});
</script>
HTML:
<div class="row">
<div class="col-6">
<div class="form-group">
<input class="form-control" type="text" id="booking_date" name="booking_date" data-lang="en" data-min-year="2017" data-max-year="2020" data-disabled-days="10/17/2017,11/18/2017">
</div>
</div>
<div class="col-6">
<div class="form-group">
<select class="form-control">
<option value="">Select slot</option>>
<?php
require_once("dblogin.php");
?>
<option value="<?php echo $_POST[" optionValue "]; ?>">
<?php echo $_POST["optionValue"]; ?>
</option>
</select>
</div>
</div>
</div>
Expected result:
$_POST should return the selected value from booking_date and the $_POST value will be used in a SQL Query.
If this is dropdown list, then id must be on select box. You set id booking_date on textbox other than select box. write as:
<select id="booking_date" class="form-control">
</select>
If you want to value from select(dropdown) so you have to set id on <select> rather than textbox <input>
<select id="booking_date" class="form-control">
<option value="">Select slot</option>>
<?php require_once("dblogin.php"); ?>
<option value="<?php echo $_POST["optionValue"]; ?>">
<?php echo $_POST["optionValue"]; ?>
</option>
</select>
On Script:
<script>
$(document).ready(function(){
$("#booking_date").change(function(){ //listen when the option change
var optionValue = $(this).val(); //get the new value
$.ajax({
url: "doctordetails.php", //php file which recive the new value and save it to the database
data: { getValue: optionValue }, //send the new value
type: "POST" , //use POST method
success: function(data) {
console.log(data);
}
});
});
});
</script>
I am banging my head against a wall with this now so any help will go a long way with this one.
I am trying to get some data from a drop down list and update a database with the data selected.
This is my drop down list:
<form method="post" data-remote="true">
<select class="selectpicker" data-live-search="true" name="status[]">
<?php while($test3 = sqlsrv_fetch_array($test2, SQLSRV_FETCH_ASSOC)) : ?>
<option data-tokens="<?php echo $test3['Name']; ?>" value="<?php echo $test3['Name']; ?>">
</option
<?php endwhile; ?>
</select>
View Area
This is my ajax:
$(document).on('click', '#sim-area', function() {
$.ajax({
type: "POST",
url: 'sim-area.php',
data: {changeStatus: status},
success: function() {
"area switched"
}
});
});
and this is my page that is updating the databse (sim-area.php):
<?php
$userID = $user['userID'];
$selectedArea = $_GET['changeStatus'];
$queryAreaName = "
SELECT UserID, Name, U_NB, U_RTN
FROM Table
WHERE UserID = '$userID' AND Name = '$selectedArea'";
$getAreaname = sqlsrv_query($sapconn2, $queryAreaName);
$areaSwitch = sqlsrv_fetch_array($getAreaname, SQLSRV_FETCH_ASSOC);
$areaNB = $test2['U_NB'];
$areaRTN = $test2['U_RTN'];
//UPDATE TABLE
?>
No matter what I try I get an undefined error, I have changed it to hard code the values and in inserts fine, so I know everything is working fine, It just isn't passing the data through
Looks you are not passing data correctly to ajax call.
Below is updated code for dropdown (changed name of select and added id attribute):
<form method="post" data-remote="true">
<select class="selectpicker" data-live-search="true" name="status" id="changeStatus">
<?php while($test3 = sqlsrv_fetch_array($test2, SQLSRV_FETCH_ASSOC)) : ?>
<option data-tokens="<?php echo $test3['Name']; ?>" value="<?php echo $test3['Name']; ?>">
</option
<?php endwhile; ?>
</select>
Updated code for jquery (changed code for passing value of data):
$(document).on('click', '#sim-area', function() {
$.ajax({
type: "POST",
url: 'sim-area.php',
data: {changeStatus: $('#changeStatus').val()},
success: function() {
"area switched"
}
});
});
I have a table with multiple rows that lists records from my database.
These records are projects' information and in each row, I have drop down list to modify the status of the project.
To do so, I used Ajax because I hate to refresh the whole page after update.
This is the function I created to do the update:
function call(){
var projid=$('#projid').val();
var projstatus=$('#projstatus').val();
var dataall={'projid':projid, 'projstatus':projstatus};
$.ajax({
type: 'POST',
url: "stsproj.php",
data: dataall,
success: function (data) {
}
});
}
And below is my drop down list:
<?php do { ?>
<td>
<form action="<?php echo $editFormAction; ?>" method="post" name="form2" id="form2">
<input type="hidden" name="MM_update" value="form2" />
<input type="hidden" name="projid" id="projid" value="<?php echo $row_projlist['projid']; ?>" />
<select name="projstatus" id="projstatus" class="select1" onchange="call()">
<option value="<?php echo $row_status['projstatus'];?>"><?php echo $row_status['sts'];?></option>
<option value="1">Awaiting</option>
<option value="2">Ongoing</option>
<option value="3">Finishing</option>
</select>
</form>
</td>
<?php }while($row_projlist = $projlist->fetch(PDO::FETCH_ASSOC)); ?>
My problem is the following:
When I update the status of the first project, it works but when I try to do it with other projects, it doesn't work.
To be more specific, the parameters of the first project are sent always (this is what firebug says).
Please help!
Your problem is due to duplicate ids. You don't need to use ids(actually do not use id for automatic list generation. Id names must be unique). Remove call function from your select box and use below javascript;
You can use such js to handle that;
$(function() {
$("select[name='projstatus']").change(function() {
var projid = $(this).parent("form").find("input[name='projid']").val();
var projstatus = $(this).val();
var dataall = {'projid':projid, 'projstatus':projstatus};
$.ajax({
type: 'POST',
url: "stsproj.php",
data: dataall,
success: function (data) {
}
});
});
});
You can see working example for form manipulating part here : http://jsfiddle.net/cubuzoa/SYf8s/
The previous answer will probably solve your problem, but I think it can be simplified.
for the form...
<form>
<select class="select1" onchange="call(<?=$row_projlist['projid']?>)">
<option value="<?=$row_status['projstatus']?>"><?=$row_status['sts']?></option>
<option value="1">Awaiting</option>
<option value="2">Ongoing</option>
<option value="3">Finishing</option>
</select>
</form>
and the javascript
function call(id)
{
$.post('stsproj.php',{'projid':id, 'projstatus':$('#projstatus').val()} )
.done(function(data){
//do something with data
});
}