I've been attempting to create a simple page which updates after you have selected an <option> from a <select> tag.
So far I have been able to get a request going thru for my PHP script to receive the value of the selected option, but the response isn't affecting the displayed content (even though it really should). Firefox shows that the response is the entire page again, but with some additional text attached by the script so I know it went thru.
Even though I receive the response with the updated page/content, the page never seems to update.
index.php:
<?php
$pageName = "Index";
include "static/header.php";
require "static/db.php";
try {
$stmt = $db->prepare("SELECT id, year, make FROM public.vehs");
$stmt->execute();
$vals = $stmt->fetchAll();
} catch (Exception $e) {
die($e->getMessage());
}
#
#
$message = "";
if(isset($_POST['dropdownValue'])) {
$message = "value set";
}
?>
<body>
<script>
$(document).ready(function(){
$('#select1').change(function(){
//Selected value
let inputValue = $(this).val();
//Ajax for calling php function
$.post('index.php', { dropdownValue: inputValue }, function(data){
});
});
});
</script>
<select id="select1">
<option value="" disabled selected></option>
<?php
foreach($vals as $row) {
echo("<option value='{$row["id"]}'>{$row["year"]} - {$row["make"]}</option>");
}
?>
</select><br>
<?php if(!empty($message)): ?>
<p><?= $message ?></p>
<?php endif; ?>
</body>
header.php:
<?php
$pageName;
?>
<head>
<title>Test Website - <?php echo $pageName ?></title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="application/javascript" src="/static/js/ajax.js"> # Really just jQuery, idk why i named it that
<script type="application/javascript" src="/static/js/bootstrap.min.js"></script>
</head>
The request's response:
<head>
<title>Test Website - Index</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="application/javascript" src="/static/js/ajax.js"
<script type="application/javascript" src="/static/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('#select1').change(function(){
//Selected value
let inputValue = $(this).val();
//Ajax for calling php function
$.post('index.php', { dropdownValue: inputValue }, function(data){
});
});
});
</script>
<select id="select1">
<option value="" disabled selected></option>
<option value='1'>2020 - Test</option> </select><br>
<p>value set</p>
</body>
What I see in the browser after the request:
<html><head>
<title>Test Website - Index</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="application/javascript" src="/static/js/ajax.js" <script=""></script>
</head>
<body>
<script>
$(document).ready(function(){
$('#select1').change(function(){
//Selected value
let inputValue = $(this).val();
//Ajax for calling php function
$.post('index.php', { dropdownValue: inputValue }, function(data){
});
});
});
</script>
<select id="select1">
<option value="" disabled="" selected=""></option>
<option value="1">2020 - Test</option> </select><br>
</body></html>
To achieve what you want to do create another file like selected.php, because you are loading the whole HTML page while you only want to change the value inside p, then after the data loaded you need to change the text inside p using $('p').text(data)
// selected.php
<?php
$message = "";
if(isset($_POST['dropdownValue'])) {
$message = "value set";
}
echo $message;
?>
Edit your index.php file, to look like this
.....
<script>
$(document).ready(function(){
$('#select1').change(function(){
//Selected value
let inputValue = $(this).val();
//Ajax for calling php function
$.post('selected.php', { dropdownValue: inputValue }, function(data){
$('p').text(data)
});
})
});
</script>
......
<p>value not set</p>
Hope this will help!
Related
I'm trying to figure out how to use Ajax. The only thing that I succeeded learning is the load function. Now I'm try to use $.ajax({}). Now here's my attempt using this function:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$("#send").click(function(){
$.ajax({
url:"show.php",
method: "post",
data :{value: <?php echo $value;?>},
success:function(data){
$("#showVal").html(data);
alert("succes");
}
});
});
});
</script>
</head>
<body>
<p id="showVal" ></p>
<form id="test" name="tst">
<?php
$value = 15;
?>
<button type="button" id="send">Press me!</button>
</form>
</body>
</html>
And the show.php file is:
<?php
$val=$_POST['value'];
echo 'Your value '.$val.' . Have a nice day!';?>
If you know what could be the problem share with me ! Thanks ! Have a great day guys!
I have dropdown. When I select any value and click on confirm, Below it should print the selected value and also the selected value should be shown in the dropdown. How can I achieve this.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--Links related to dropdown-->
<link href="http://localhost/performance/Test/css/fselect.css" rel="stylesheet">
<script src="http://localhost/performance/Test/js/fSelect.js"></script>
<script>
(function($) {
$(function() {
$('#project_name').fSelect();
});
})(jQuery);
</script>
</head>
<body>
<?php
$projects = array('Trial','Test','Birds','Animals');
?>
<div class="container">
<div><center><b>This test will be created in the selected project:</b></center></div><br>
<div class="create_test">
<form action="#" method="post">
<div style="margin-left:2cm;">
<select name="project_name" id="project_name" >
<?php
for($i=0; $i<count($projects); $i++) {
echo "<option value='".$projects[$i]."'>".$projects[$i]."</option>";
}
?>
</select>
<input type="submit" style="margin-left:3.5cm; width:140px;" name="submit" id="comfirm" class="btn btn-success" value="Confirm" />
</div>
</form>
</div>
</div>
</body>
</html>
<?php
/** Store selected in a varaible in php */
$selected = 'trial';// Suppose get the value from db here
for($i=0; $i<count($projects); $i++) {
echo "<option value='".$projects[$i]."' selected='".$project[$i] == $selected."'>".$projects[$i]."</option>";
}
?>
So adding the selected='true' will be used as value for the select tag
I'm using the jquery Maximage add-on to create a full-screen slideshow, loading the images dynamically with php, json and mysql.
The problem is that if I upload one or more new images in the database, Maximage does not update the new images automatically.
Any idea how I can do to update Maximage at the end or start the cycle of the images?
<!DOCTYPE html>
<html class='no-js' lang='en'>
<!--<![endif]-->
<head>
<meta charset='utf-8' />
<title>Kiosco</title>
<link rel="stylesheet" type="text/css" href="lib/css/jquery.maximage.css">
<link rel="stylesheet" type="text/css" href="lib/css/screen.css">
<style type="text/css" media="screen">
#maximage {
/* position:fixed !important; */
}
</style>
</head>
<body>
<div id="maximage">
<?php
include "conexion/conexion.php";
// Consult the database
$result = mysqli_query($con,"SELECT name FROM files ORDER BY position ASC");
//Load images
while($row = mysqli_fetch_array($result)) {
?>
<img src="/KioskoImage/lib/images/ImagesDisplay/<?php echo $row['name'];?>" alt="" width="1400" height="1050">
<?php
}
//Close BD
mysqli_close($con);
?>
</div>
<script src="lib/js/jquery.js"></script>
<script src="lib/js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="lib/js/jquery.maximage.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// Trigger maximage
jQuery('#maximage').maximage();
});
</script>
<script type="text/javascript">
$('#maximage').maximage({
onImagesLoaded: function() {
location.reload();
}
});
</script>
</body>
</html>
I'm creating search function using php,mysql,js and ajax. But i cant select the search items. I'm trying to select suggested words. there is load suggestions but i can't select them. here is the code i have created.please
this is index page. in index page script part is wrong or doesn't work the last part of fadeOut effect.
<head>
<title>2nd year group project</title>
<meta charset = "utf-8">
<metaname="viewport" content="width=device-width, initial-scale=1">
<!--this is for link css file-->
<link rel="stylesheet" type="text/css" href="css/FindAProffesional.css">
<!--//this is for link icons for site-->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<!--//this is for link bootstrap to site-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div style="width:500px;">
<input type="text" name="country" id="country" class="form-control" placeholder="Enter city name">
</div>
<div id="countryList"></div>
<script>
$(document).ready(function(){
$('#country').keyup(function(){
var query = $(this).val();
if(query!='')
{
$.ajax({
url:"search.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#countryList').fadeIn();
$('#countryList').html(data);
}
});
}
});
$document().on('click','li',function(){
$('#country').val($(this).text());
$('#countryList').fadeOut();
});
});
</script>
</body>
this is serch.php page
<?php
require('dbcon.php');
if(isset($_POST["query"]))
{
$output='';
$query ="SELECT DISTINCT city FROM architect WHERE city LIKE '%".$_POST["query"]."%'";
$result = mysqli_query($conn,$query);
$output = '<ul class="list-unstyled">';
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$output .='<li>'.$row["city"].'</li>';
}
}
else
{
$output .='<li>City not Found</li>';
}
$output .='</ul>';
echo $output;
}
?>
replace
$document().on('click','li',function(){
$('#country').val($(this).text());
$('#countryList').fadeOut();
});
with
$(function(){
$('#countryList').on('click','li',function(){
$('#country').val($(this).text());
$('#countryList').fadeOut();
});
});
I have a webpage about information corporate data. There is a search and add new button. When we click button Add New in Choose Custtype Page, there is a select option that contains branch and customer model. Before we click button save, we must select the branch and customer model first. After we select, and click button save, there will be redirect to Data Form Page. This is my choose _custtype.php code :
<?php
session_start();
require_once('global.php');
$where_in = '';
if( isset($_SESSION['moi_status_UserBranch']) && trim($_SESSION['moi_status_UserBranch'])!="" ){
$xubranch = explode(",",$_SESSION['moi_status_UserBranch']);
if( count($xubranch)>0 ){
$mxt = array();
foreach($xubranch as $r){
$mxt[] = "'".$r."'";
}
$where_in = implode(",",$mxt);
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Order</title>
<link rel="stylesheet" href="template/css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="lib/jqueryui/css/ui-lightness/jquery-ui-1.8.21.custom.css" type="text/css" />
<link rel="stylesheet" href="template/css/mytheme.css" type="text/css"/>
<script src="template/js/jquery-1.6.min.js" type="text/javascript></script>
<script src="lib/jqueryui/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="template/js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="template/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="template/js/jquery.imask.js" type="text/javascript ></script>
</head>
<body>
<b>Choose Branch and Customer Model</b>
<br /><br />
<form id="search" class="formular" method="post" action="choose_custtype.php" style="z-index:1;">
<table width="100%">
<tr>
<td width="110">Branch</td>
<td>
<select id="ownergroupid" name="ownergroupid" class="readonly validate[required]"><option value="">-- CHOOSE --</option>
<?php $code = $db->GetOne("SELECT OWNERGROUPID FROM FNTLOANAPPLICATION WHERE DATAID = '".$_GET['id']."'");
$branch = $db->GetAll("SELECT CAB_ID, CABANG_NAME FROM COMPANY_PROFILE WHERE CAB_ID IN (".$where_in.") ORDER BY CABANG_NAME ASC");
foreach($branch as $k => $v) { ?>
<option value="<?php echo $v[0];?>" <?php echo $v[0]==$code?"selected":"";?>><?php echo $v[1];?></option>
<?php } ?>
</select>
</td>
</tr>
<tr>
<td width="110">Customer Model</td>
<td>
<select id="customer_model" name="customer_model" class="readonly validate[required]">
<option value="">Choose</option>
<option value="I">Personal</option>
<option value="C">Corporate</option>
</select>
</td>
</tr>
</table>
<input type="submit" id="btnsubmits" name="btnsubmit" class="button" value="Save" />
<?php //echo "aaaa"; ?>
</form>
<script>
$('#btnsubmits').click(function(e){
e.preventDefault();
if ($('#ownergroupid').val() == ''){
alert('Branch must fill!');
}else if ($('#customer_model').val() == ''){
alert('Customer Model must fill!');
}else
search.submit();
});
</script>
<?php if (#$_POST['customer_model']): ?>
<?php
$_SESSION['customer_model_new'] = ($_POST['customer_model']);
$_SESSION['ownergroupid_new'] = ($_POST['ownergroupid']);
//echo "aaaa";
?>
<script type="text/javascript">
window.opener.location.href = "index.php";
//window.opener.document.location.href = "index.php";
window.close();
</script>
<?php endif; ?>
</body>
</html>
this is my index.php :
<?php
session_start();
require_once('global.php');
//echo "test";
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Pooling Order</title>
<link rel="stylesheet" href="template/css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="lib/jqueryui/css/ui-lightness/jquery-ui-1.8.21.custom.css" type="text/css" />
<link rel="stylesheet" href="template/css/mytheme.css" type="text/css"/>
<?php //echo "test2"; ?>
<script src="template/js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="lib/jqueryui/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="template/js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="template/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<?php //echo "test3"; ?>
<script src="template/js/jquery.imask.js" type="text/javascript"></script>
<?php //echo "test4"; ?>
<script>
jQuery(document).ready(function(){
$('#formlist').load('data_form.php?dataid=<?php echo $_GET['dataid']; ?>&customer_model=<?php echo $_GET['customer_model']; ?>&ownergroupid=<?php echo $_GET['ownergroupid']; ?>');
});
</script>
<?php //echo "test5"; ?>
</head>
<body>
<table width="100%" height="">
<tr>
<td align="right">
<!--<input type="button" id="list" name="list" class="button" value=" List " />-->
<!-- <input type="button" id="form" name="form" class="button" value=" Form " />-->
<div id="form"></div>
</td>
</tr>
</table>
<div id="formlist"></div>
</body>
</html>
As we see from the code, after we select branch and customer model, the page will be redirect into index.php, and then data_form.php. data_form.php is a form to input data. But, data_form.php can not load. Is it because of the jquery / javascript from index.php ? i suspect on it :
<script>
jQuery(document).ready(function(){
$('#formlist').load('data_form.php?dataid=<?php echo $_GET['dataid']; ?>&customer_model=<?php echo $_GET['customer_model']; ?>&ownergroupid=<?php echo $_GET['ownergroupid']; ?>');
});
</script>
previously i use php 5.2 and its work, but not in php 5.5(i upgrade php 5.2 into 5.5). Is this because of different syntax ? (not compatible in php 5.5)