I just trying city-state select. I think this code blocks print the posting data to screen.. but it copies selectbox and then prints the selectbox to screen. Isn't it weird?
$(document).ready(function(){
$('#ilce').change(function(){
var ilceid = $('#ilce').val();
$.ajax({
type: 'POST',
url: 'ilce/ajax',
data: 'ilceid'+ilceid,
success: function(sonuc){
$('#ilce').css('background-color','#efefef');
$('#semt').html(sonuc);
}
});
});
});
html is:
<?php echo form_open('ilce/index')?>
<select id="ilce" name="ilce">
<option value="">Select Town</option>
<?php foreach ($ilce as $x):?>
<option value="<?php echo $x['id']?>"><?php echo $x['ad']?></option>
<?php endforeach?>
</select>
<p id="semt"></p>
and, ilce/ajax controller which must print the post data???
<?php
class Ilce extends CI_Controller{
public function ajax()
{
print_r($_POST);
}
} //end of controller
As I said, this code must be print post data in <p id="semt"></p> right?
But this code just copies <select> and after .change() immediately paste to screen then there becomes 2 selectboxes.
Related
i am taking a value from the dropdown using jquery on change , i am using ajax to post to self, but i am not able to echo the posted variable.
<form>
<label>Select Doctor:</label>
<select class="docdrop">
<option value="">Choose</option>
<option value = "123">doca</option>
<option value = "456" >docb</option>
</select>
</form>
<script>
$(document).ready(function(){
$("select.docdrop").change(function(){
var d_Id = $(this).val();
if(d_Id!="")
{
$.ajax({
type: "POST",
url: "<?php echo $_SERVER['PHP_SELF'];?>",
data: {d_id1 : d_Id}, //using 'd_id1' did not make a change
success: function(){
alert(d_Id]);
}
});
}
});
});
</script>
//php code in same page
<?php
if(isset($_POST['d_id1']))
$d_Id = $_POST['d_id1'];
?>
<p><?php echo $d_Id; ?></p>
i get the alert on success but , i am unable to echo the posted variable. i dont want to use serialize() or post the entire form. just d_Id whic i obtain in jquery
If you want you can do this without using jQuery in this way :
<?php
$d_id1 ="";
if(isset($_POST['d_id1'])){
$d_Id = $_POST['d_id1'];
echo $d_Id;
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<form>
<label>Select Doctor:</label>
<select class="docdrop" >
<option value="">Choose</option>
<option value = "123">doca</option>
<option value = "456" >docb</option>
</select>
</form>
<script>
$(document).ready(function(){
$("select.docdrop").change(function(){
var d_Id = $(this).val();
if(d_Id!="")
{
$.ajax({
type: "POST",
url: "<?php echo $_SERVER['PHP_SELF'];?>",
data: {d_id1 : d_Id},
success: function(data){
d_id1 = data;
document.getElementById('name').innerHTML = d_id1;
console.log(data);
}
});
}
});
});
</script>
<p id ="name"><?php echo $d_id1;?></p>
</body>
</html>
php code execute one time on page load, so that time your variables $d_Id and $d_Id1 are not created, so it is not display any value.
also ajax execute without page refresh and all code in side success executed without any error.
success: function(data){
alert(data);
}
You will alert the data send from backend i.e. echoed by your php part, which in your case will be the result of <p><?php echo $d_Id; ?></p>, if you just need your $d_id selected without the paragraph tags change your code to <?php echo $d_Id; ?>. Of course you may prefer to use JSON as output of your backend and then parse it in the success callback with $.parseJSON(data) per instance or use data type 'json' in your AJAX reques.
I have the following dropdown list which changes the output of <div id="item"></div> with ajax when select option is changed. I'm not using select2.
<?php
$biqsQuery = "SELECT biq.biqid, biq.name FROM biq";
$biqs = $db->query($biqsQuery);
?>
<select name="itemselector" id="itemselect">
<?php foreach ($biqs ->fetchAll() as $biq): ?>
<option value="<?php echo $biq['biqid']);?>">
<?php echo e($biq['name']);?>
</option>
<?php endforeach; ?>
</select>
<div id="item"></div>
PHP File:
if(isset($_GET['itemselector'])){
$biqQuery = "SELECT biq.biqid, biq.name, biq.img
FROM biq
WHERE biq.biqid= :biqid ";
$biq= $db ->prepare($biqQuery);
$biq->execute(['biqid' => $_GET['itemselector']]);
$selectedBiq=$biq->fetch(PDO::FETCH_ASSOC);
echo '<img src="'. $selectedBiq['img']. '">';
}
Javascript File:
$('#itemselect').on('change',function(){
var self = $(this);
$.ajax({
url: '../helpers/biq.php',
type: 'GET',
data: {itemselector : self.val()},
success: function(data){
$('#item').html(data);
}
});
});
It's currently succesfully changing the output, no problem on that part.
But when the page is first loaded, it shows the first value of the table on the dropdown menu, however it doesnt output the image of that first value into <div>.
What i need is; when the page is loaded i need the first entry in the database to be outputted into the <div id="item"></div> automatically.
Any help is appreciated, thanks in advance.
you could write on body load event to accomplish this. please correct if any type mistake will there but this will help you to get it rid
$(document).ready(function(){
var first = $("#itemselect option:first").val();
$.ajax({
url: '../helpers/biq.php',
type: 'GET',
data: {itemselector : first},
success: function(data){
$('#item').html(data);
}
});
});
I want to get the value from this select form, with the onchange function:
<p for="session">Time:</p>
<select class="form-control" id="session" name="session" onchange="myfunctionTime(this.value)">
<option selected="selected" value="12:00">12:00</option>
<option value="16:00">16:00</option>
<option value="20:00">20:00</option>
</select>
On the top of the file I have the ajax function which I can see it's working because inside the console(f12) I see like "Session 16:00" or "Session 12:00" etc:
<script type="text/javascript">
function myfunctionTime(session)
{
//make the ajax call
$.ajax({
url: 'book.php?id=<?php echo $film_id; ?>',
type: 'POST',
data: {option : session},
success: function() {
console.log("Session "+session);
}
});
}
At the end I have the php code that give me the error:
Notice: Undefined variable: session in C:\xampp\htdocs.... on line 262
function myfunctionTime(){
$session = $_POST['option'];
}
echo $session;
Change that lines of code to
$session = $_POST['option'];
echo $session;
Not a good way to do. But given your code, it works.
I am trying to create a dropdown that will update text on a page without refreshing the page. The updated text will be supplied by a php function which is passed a value from the dropdown. Right now, my dropdown does nothing, but here is where I've managed to get:
webpage.php:
My dropdown. Populated by a database.
<form method='post'>
<select name="skill1_level" id="skill1_level" onchange="skill1ValueChange(this.value)">
// PHP to dynamically populate list from the DB
<?php foreach ($skill_levels as $key => $skill_levels_list): ?>
<option value=""><?= $skill_levels_list->skill_level ?></option>
<?php endforeach ?>
</select>
</form>
My div. Currently just loading a default string. Need to figure out how to make this change when the dropdown is submitted. Not sure how to use AJAX here.
<div class="panel-body" id="skill1_text">
<?php echoSkill($hero->skill1_desc, $placeholders, $id_hero, 1, 1, $dbh); ?>
</div>
functions.js. Javascript to be called when dropdown is submitted. Calls PHP function.
function skill1ValueChange(skill_level) {
$.ajax({
url: 'functions.php',
type: 'POST',
data: {option : skill_level},
success: echoSkill($hero->skill1_desc, $placeholders, $id_hero, 1, skill_level, $dbh) {
console.log("Data sent for skill1.");
}
});
functions.php. does some stuff to my data based on the dropdown value, then echos the resulting string.
function echoSkill ($skill_desc, $placeholders, $id_hero, $skill_num, $skill_level, $dbh) {
$skill_values = fetchSkillValues($id_hero, $skill_num, $skill_level, $dbh);
$skill_values = array($skill_values[0]->skill_x, $skill_values[0]->skill_y, $skill_values[0]->skill_z, $skill_values[0]->skill_a);
$skill_desc = str_replace($placeholders, $skill_values, $skill_desc);
echo $skill_desc;
}
Any help and explanation you can provide would be greatly appreciated!
Probably the easiest for you would be to return HTML from your functions.php (actually, you should probably have it reference a different page that includes the functions.php page and echos the echoSkill() function) file:
Page with dropdown:
<!-- I assume you already have the libraries...-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<form method='post'>
<!--You can just add the change in the jQuery instead of inline js -->
<select name="skill1_level" id="skill1_level">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
<option value="4">Value 4</option>
</select>
<!-- This is where your empty div will fill with the php content -->
<div class="panel-body" id="skill1_text"></div>
</form>
<script>
// Select by the <select> named "skill1_level"
// When changed...
$("select[name='skill1_level']").change(function() {
// Assign the selection's value
var OptionVal = $(this).val();
$.ajax({
url: 'functions.php',
type: 'post',
data: { option: OptionVal },
// You need a success function here
success: function(response) {
// This will print out the response from your php page
// to the div on this page called "skill1_text"
$("#skill1_text").html(response);
}
});
});
</script>
functions.php
<?php
//code here to return just the text or whatever
// You should actually have the ajax call a page that has the "echoSkill()"
// function on it rather than the function page itself
echo 'Response to ajax page.';
echoSkill($blah,$blah2,$blah3,$blah4,$blah5,$blah6);
print_r($_POST);
?>
I have a dependent dropdown menu for category>subcategory without refreshing page with the help of Ajax. But currently my JavaScript code sends the Ajax request to another page and it works fine, i want to send the request to the same page. Currently using the JavaScript as below .. please anyone help me to get the request to the same page.
<script type="text/javascript">
$(document).ready(function(){
$(".category").change(function(){
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax({
type: "POST",
url: "ajax-subcat.php",
data: dataString,
cache: false,
success: function(html){
$(".subcat").html(html);
}
});
});
</script>
If I empty the Ajax url, still doesn't work for one page.
HTML as below
<select name="category" class="category">
<option selected="selected">--Select Category--</option>
<?php
$sql=mysqli_query($mysqlCon, "SELECT * FROM category WHERE catid=1");
while($row=mysqli_fetch_array($sql)){
$cat_id=$row['catid'];
$data=$row['catname'];
echo '<option value="'.$cat_id.'">'.$data.'</option>';
}
?>
</select>
<label>Subcategory:</label>
<select name="subcat" class="subcat">
</select>
ajax-subcat.php contains the below
if(isset($_POST['id'])){
$id=$_POST['id'];
$sql=mysqli_query($mysqlCon, "SELECT * FROM subcategory WHERE sucat='$id'");
while($row=mysqli_fetch_array($sql)){
$id=$row['sucat'];
$data=$row['sucat_name'];
echo '<option value="'.$id.'">'.$data.'</option>';
}
}
I want to achieve this in 1 page, without sending request to other page. Please help.
Please remember to properly indent your code and make the necessary spaces for readability. Also, I advise you to separate your code, and put all the PHP part in classes provided for that purpose.
Try this :
Html file
<select id="category">
<?php
$sql = mysqli_query($mysqlCon, "SELECT * FROM category WHERE catid=1");
while($row=mysqli_fetch_array($sql)) {
$cat_id=$row['catid'];
$data=$row['catname'];
echo '<option value="'.$cat_id.'">'.$data.'</option>';
}
?>
</select>
<label>Subcategory :</label>
<select id="subcat"></select>
<!-- Suppose you call the jquery here -->
<script type="text/javascript">
$(document).ready(function() {
$('#category').change(function () {
var id = $(this).val();
$.ajax({
type: 'POST',
url: 'ajax-subcat.php',
data: json,
cache: false
}).done(function (data) {
$('#subcat').html(data);
}).fail(function (data) {
alert('You have a critic error');
});
});
});
</script>
You should call the php script with json, and have the callback with json_encode. This approach is cleaner. Also I set you the new ajax syntax. THe syntax you used with "success" is now deprecated.
Php file
<?php
if(isset($_POST['id']) && !empty($_POST['id'])) {
$id = $_POST['id'];
$sql = mysqli_query($mysqlCon, "SELECT * FROM subcategory WHERE sucat='$id'");
while($row = mysqli_fetch_array($sql)) {
$id = $row['sucat'];
$data = $row['sucat_name'];
$return[] = '<option value="'.$id.'">'.$data.'</option>';
}
echo json_encode($return);
}
?>
Code not tested, but I think it work