Trying to populate a drop down list for cities once a user makes a selection for the state using Jquery/Ajax functionality
HTML Form has...
<?php $allRegions = Region::newInstance()->getStatesByCountry('US'); ?>
<select name="regionId" id="regionId">
<?php foreach($allRegions as $region) { ?>
<option value="<?php echo $region['value'] ; ?>"><?php echo $region['name'] ; ?></option>
<?php } ?>
</select>
<select name="cityId" id="cityId">Choose a city</select>
Jquery code...
$(document).ready(function(){
$("#regionId").change( function() {
var regionId = $(this).val();
var url = '<?php echo site_base_url(true)."?page=ajax&action=cities®ionId="; ?>' + regionId;
$.ajax({
type: "GET"
url: url,
dataType: 'json',
success: function(msg){
if (msg != ”){
$("#cityId").html(msg).show();
}
}
});
});
});
</script>
The issue is that on selecting a region the cities drop down select doesn't get populated ... can't figure it out.. any help is appreciated.
One problem is that you have a strange quote character:
if (msg != ”){
You probably mean this:
if (msg != ''){
and another problem is:
type: "GET"
that should be:
type: "GET",
Not to be rude, but your code is very nested, and unecessary complicated.
Fix all the mentions above from the others, and also this:
<?PHP
foreach($allRegions as $region) {
<option value="<?php echo $region['value'];" . "><" . echo $region['name']; .
"</option>" } ?>
</select>
Related
This is a code with DropDown list which can update the database upon on change, it doesn't work for some reason. I realize that the value $ gp_name didn't send out, can someone help me to fix it?
<select name='status' id='status'>
<option value="<?php echo $status ?>"><?php echo $status ?></option>
<option value="Inquiry">Inquiry</option>
</select>
<input type="hidden" name="gp_name" id="gp_name" value="<?php echo $gp_name;?>" />
<div id="autosavenotify"></div>
<script>
$(document).ready(function() {
var gp_name = $('#gp_name').val();
$('select').on('change', function() {
var statusVal = $(this).val();
var gp_name = $('#gp_name').val();
alert(statusVal,gp_name);
$.ajax({
type: "POST",
url: "save.php",
data: {
statusType: statusVal,
gp_name: gp_name
},
success: function(msg) {
$('#autosavenotify').text(msg);
}
})
});
});
</script>
save.php
<?php
require_once("connMysql.php");
$gp_name=$_POST['gp_name'];
$st=$_POST['statusType'];
$qry ="UPDATE lotus_gp SET status='".$st."' where gp_name='".$gp_name."'";
$done = mysql_query($qry);
if($done)
{
echo $gp_name;
echo $st;
}
?>
First, check if the data is getting from your front-end sides on your PHP page.
if(isset($_POST['gp_name']) && isset($_POST['statusType'])){
$gpname = $_POST['gp_name']; // echo it to ensure
$satype = $_POST['statusType']; // echo it to ensure
}
If the data is not printed then you might have an issue with inputs.
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'm trying to use ajax on a select tag with 2 options, but it's not getting the $_POST for some reason. It prints out the "---", but it does not print out the $_POST value, which is either 1 or 2. I'm not sure what I did wrong. Please take a look at my code:
newtest.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
function ajax(url,type,theName,id) {
$.ajax({
type: "POST",
url: url,
data: { select: $(type+'[name='+theName+']').val()},
error: function(xhr,status,error){alert(error);},
success:function(data) {
document.getElementById( id ).innerHTML = data;
}
});
}
</script>
<?php
echo "<select name = 'name' onchange = 'ajax(\"newtestx.php\",\"input\",\"name\",\"output\")'>";
echo "<option value = '1'> 1 </option>";
echo "<option value = '2'> 2 </option>";
echo "</select>";
echo "<div id = 'output'></div>";
?>
newtestx.php
<?php
$name = $_POST['name'];
echo $name."---";
?>
You are sending a POST parameter with the key "select" to the server in your AJAX call:
data: { select: $(type+'[name='+theName+']').val()},
In newtestx.php you are trying to retrieve the value from a POST parameter with the key "name" - which doesn't exist:
$name = $_POST['name'];
You could fix this easily by giving the parameter keys the same name. If you would look for $name = $_POST['select'] the parameter would be found.
Inline Javascript is considered bad practice and there's no need to echo out the HTML markup, it makes the mark up harder to work with.
newtest.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="[link to your javascript file here]"></script>
<select name='numbers' class="postValueOnChange" data-id-to-update="output" data-post-url="newtestx.php">
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<div id='output'></div>
Javascript file
$(document).ready(function () {
$('.postValueOnChange').change(postSelectedValue);
function postSelectedValue(e) {
var $self = $(this);
var url = $self.data('post-url');
var $elementToUpdate = $('#' + $self.data('id-to-update'));
var jqxhr = $.ajax({
type: "POST",
url: url,
data: {
selected: $self.val()
}
});
jqxhr.done(function (data) {
$elementToUpdate.html(data);
});
jqxhr.fail(function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
});
}
});
newtestx.php
<?php
$name = $_POST['selected'];
echo $name."---";
?>
You are sending post param select and trying to receive as $_POST['name'].
Make sure they match...either both as name or as select
First, Since you are using jQuery, why are you still using inline javascript?
Well I suggest you first to restrucure your code around the jQuery change event:
$(document).ready(function() {
$('select').change(function(e) {
e.preventDefault();
var selected = $('.select option:selected').val();
var id, theName, url= ...// get it from the DOM
$.ajax({
type: "GET",
url: url,
data: { select: selected},
error: function(xhr,status,error){alert(error);},
success:function(data) {
$('#'+id).html(data);
}
});
});
});
Second, why are you coding HTML with PHP, you are making yourself struggle and lose time only with quotes and double quotes, and no-needed spaces.
<form action="">
<select name="name">
<option value="1">1</option>
<option value="1">1</option>
</select>
</form>
<div id="output"></div>
I have a problem, how to pass an argument with ajax in url: <?php echo base_url() . 'user_m/getAdministrator'; ?>" argument,
Because I tried to populate a selectbox based on another but I didn't have success.
html:
<div class="form-group">
<label>Denumirea intreprinderii:</label>
<select class="form-control marg-left-10" id="firm">
<?php if($all_firms): ?>
<?php foreach($all_firms as $firm): ?>
<option value="<?php echo $firm['id_firm']; ?>"><?php echo $firm['name_firm']; ?></option>
<?php endforeach; ?>
<?php endif; ?>
</select>
</div>
<div class="form-group">
<label>Administrator</label>
<select class="form-control marg-left-10" id="admin">
</select>
</div>
php:
public function getAdministrator()
{
$id_firm = $_POST['id_firm'];
$this->load->database();
$sql = $this->db->query("SELECT * FROM users,firms WHERE firms.id_firm = users.fk_firm and users.id = ");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$data=$row['name'];
echo '<option value="'.$id.'">'.$data.'</option>';
}
return $this;
}
script:
$(document).ready(function()
{
$("#firm").change(function()
{
var id_firm=$(this).val();
var dataString = 'id_firm='+ id_firm;
$.ajax
({
type: "POST",
url: "<?php echo base_url() . 'user_m/getAdministrator'; ?>",
data: dataString,
cache: false,
success: function(html)
{
$("#admin").html(html);
}
});
});
});
Help me please.The first select box gets populated but the second doesn't.Please Help me.Exist a method to pass an argument to user_m/getAdministrator method? HELP ME PLEASE GUYS!!!!!
Php in js is not a good practice, try to write this on your main php file before calling the script
<script>
var base_url = "<?=base_url()?>";
</script>
and then in your js file:
$.ajax
({
type: "POST",
url: base_url+"user_m/getAdministrator",
data: dataString,
cache: false,
success: function(html)
{
$("#admin").html(html);
}
});
also, you can send data this way:
data: { id_firm: id_firm },
I have a form which has a select tag that contains the numbers from 1-31. What I'm trying to do is update the database with the value in the select tag if the user changes it (the default value is the value in the database i.e $drop_d) WITHOUT reloading the page at all.
The following code doesn't seem to work, I think there is a problem in the way I am sending my data to ajax.
This variable contains the default value:
$drop_d = $e_r[drop_d];
The form:
<form> Number of days: <select name="dropD" id="dropID"> <?php for($i=1; $i<=31; $i++){ ?> <option value="<?php echo $i;?>" <?php if($i==$drop_d){ ?> selected="selected" <?php } ?> > <?php echo $i; } ?> </select> </form> <br />
Ajax:
<script>
$('#dropID').change(function(){
alert(1);
var url = document.URL;
var blah = $('#dropID').val()
alert(blah);
alert(url);
$.ajax({
type: 'POST',
url: url,
data: {newFieldValue: blah},
dataType: 'html'
}).done( function(){
alert(1);
blah.hide();
});
});
</script>
Update on database:
<?php
$newFieldValue = $_POST['newFieldValue'];
$updateD = 'UPDATE en SET drop_d = $newFieldValue WHERE name=$name;
mysql_query($updateD);
?>
$('select#dropID').on('change' , function(){
var url = document.URL;
var blah = $('select#dropID').val();
$.ajax({
type: 'POST',
url: url,
data: {newFieldValue:blah},
dataType: 'html'
});
});
You have defined an id value id="dropID, so your jQuery should be:
$('#dropID').val()