i want to change the value of my input field with jquery. The problem is, that the input field has a variable and i don't know how describe this in jquery.
Without the variable all the code works, but this doesn't help because i use the form different times on my page.
function doSth(click) {
var value = ($(click).val());
var name_ekt = $('[name="name[]"]').map(function() {
return $(this).val();
}).get();
var dat = $("#dat").val();
$.ajax({
type: "post",
url: "get_test.php",
data: {
name: name,
dat: dat,
value: value
},
cache: false,
success: function(value) {
$("#output").html(value);
}
});
event.preventDefault();
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script src="../js/jquery-3.2.1.js"></script>
<script src="../js/jquery-ui.js"></script>
<title>Modul </title>
</head>
<body>
<br>
<input type="text" id="dat" value="2017-06-30">
<br>
<br>
<div>
<?php for ($i = 1; $i <= 6; $i++) { ?>
<form>
<?php for ($x=0; $x<2; $x++) { ?>
<input type='text' name='name[]' id="name[]"><br>
<?php } ?>
<button type='submit' id='save' value='<?php echo $i; ?>' onclick="doSth(this);">save</button>
<br><br>
</form>
<?php } ?>
</div>
<div id='output'></div>
</body>
</html>
<?php
if ($row = (($value*2)-1)) {
$sql = "INSERT INTO test (dat, name)
VALUES ('$dat', '$name[$row]')";
$conn->query($sql);
if(($conn->affected_rows)>0) {
echo "<script>
$(document).ready(function(){
$('#name[$row]').prop('disabled', true).css('background-color','#C1FFC1');
$('#dat').prop('disabled', true).css('background-color','#C1FFC1');
});
</script>";
echo $row;
}
}
?>
Edit your code to this,
function doSth(click) {
var value = ($(click).val());
var name_ekt = $("#name[]").map(function() {
return $(this).val();
}).get();
var dat = $("#dat").val();
Related
I've tried so many methods from stackoverflow and other websites but whenever i succeed in hiding the div. No search result is displayed at all.
I've tried the :empty selector and fiddling around with the php code and js code. but since i'm very new to this i just can't seem to crack the error. What am i doing wrong?
My HTML
<div class='search'>
<form class="searchbox" action='index.php' method='post' autocomplete='off'>
<input type='text' name='search' class='searchform' placeholder='Søg efter skole...' onkeyup="searchq();">
</form>
<div id="output"></div>
</div>
PHP
<?php
include("connection.php");
$output = '';
//collect
if(isset($_POST['searchVal'])) {
$searchq = $_POST['searchVal'];
$searchq = preg_replace("#[^a-zA-Z0-9æøå]#i"," ", $searchq);
$query = mysqli_query($mysqli, "SELECT * FROM `products` WHERE name LIKE '%$searchq%'") or die("could not search");
$count = mysqli_num_rows($query);
if($_POST['searchVal'] == NULL) {
$output = '';
} else {
while($row = mysqli_fetch_array($query)) {
$name = $row['name'];
$id = $row['id'];
$output .= ''.$name.'<br>';
}
}
}
echo "<div class='output'>$output</div>";
?>
And JS
function searchq() {
var searchTxt = $("input[name='search']").val();
$.post("search.php", {
searchVal: searchTxt
}, function(output) {
$("#output").html(output);
});
}
HTML
<div class='search'>
<form class="searchbox" action='index.php' method='post' autocomplete='off'>
<input type='text' name='search' class='searchform' placeholder='Søg efter skole...' onkeyup="searchq();">
</form>
<div id="output" style="display: none;"></div>
</div>
PHP
.....
echo $output;
JS
function searchq() {
var searchTxt = $("input[name='search']").val();
$.post("search.php", {
searchVal: searchTxt
}, function(output) {
$("#output").html(output);
if(output.length > 0) {
$("#output").show();
}
});
}
hi guys can anyone help me i have reach to my problem but i can't pass the value from div to input field which need please
page1.php
<!doctype html>
<?php
$conn = mysql_connect('localhost','root','') or die (mysql_error);
$db = mysql_select_db('employee', $conn) or die (mysql_error);
$select = "SELECT * FROM employee ";
$result = mysql_query($select);
$option = '';
while($row = mysql_fetch_assoc($result)){
$option .= '<option value="'.$row['id'].'">'.$row['employee_name'].'</option>';
}
?>
<html>
<head>
<title>Retrieve data from database using Ajax</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function getData(q, a){
$.ajax({
url: 'loademployeedata.php?empid='+q, //call storeemdata.php to store form data
success: function(html) {
var ajaxDisplay = document.getElementById(a);
ajaxDisplay.innerHTML = html;
}
});
}
$(document).ready(function(){
$("#tyt").live("change", function() {
$("#ab ").val($(this).find("option:selected").attr("value"));
});
});
</script>
</head>
<body>
<form method="post">
<select id="tyt" onchange="getData(this.value, 'dis')" >
<?php
echo $option;
?>
</select>
<div id="dis" >
</div><input name="" type="text" id="ab" >
</form>
</body>
second connecting page is
<?php
$empid = $_GET['empid'];
$connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server..
$db = mysql_select_db("employee", $connection); // Selecting Database
if (isset($empid)) {
$query = " SELECT * FROM employee WHERE id = '$empid'";
$result = mysql_query($query);
while($row = mysql_fetch_assoc($result)){
$a=$row['employee_salary'];?>
<?php echo $a; ?>
<?php }
}
mysql_close($connection); // Connection Closed
?>
i just need to put the value instead of div means into input field
Try something like this (untested):
<!doctype html>
<?php
$conn = mysql_connect('localhost','root','') or die (mysql_error);
$db = mysql_select_db('employee', $conn) or die (mysql_error);
$select = "SELECT * FROM employee ";
$result = mysql_query($select);
$option = '';
while($row = mysql_fetch_assoc($result)){
$option .= '<option value="'.$row['id'].'">'.$row['employee_name'].'</option>';
}
?>
<html>
<head>
<title>Retrieve data from database using Ajax</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on("change", "#tyt", function() {
var tmp = $(this).val();
$("#ab").val(tmp);
$.ajax({
url: 'loademployeedata.php',
type: 'post',
data: 'empid='+q, //call storeemdata.php to store form data
success: function(recd) {
$('#a').val(recd);
}
});
});
});
</script>
</head>
<body>
<form method="post">
<select id="tyt" onchange="getData(this.value, 'dis')" >
<?php echo $option; ?>
</select>
<div id="dis"></div>
<input id="ab" type="text">
</form>
</body>
I build a search feature with infinite scroll. How do i get search string from search page to my scroll page for query database.
PHP :
search.php
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/css/scroll.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="css/search.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="search">
<form action="search" method="post">
<input type="text" name="search" id="search" autocomplete="off">
<button type="submit" class="btn btn-primary">Search</button>
</form>
</div>
<img id='loading' src='img/loading.gif'>
<div id="demoajax" cellspacing="0">
</div>
</body>
<script type="text/javascript" src="js/infinitescroll/search.js"></script>
scroll.php
<?php
include('db.php');
$searchstring = $_POST['search'];
if(isset($_REQUEST['actionfunction']) && $_REQUEST['actionfunction']!=''){
$actionfunction = $_REQUEST['actionfunction'];
call_user_func($actionfunction,$_REQUEST,$con,$limit);
}
function showData($data,$con,$limit){
$page = $data['page'];
if($page==1){
$start = 0;
}
else{
$start = ($page-1)*$limit;
}
$sql = "SELECT fm_product.p_name, fm_product.p_descp, fm_product.p_id, fm_product.p_price, fm_product.p_discount, fm_product.p_img, fm_member.member_display_name, fm_product.p_member_id, fm_package.package_name, fm_package.package_id FROM fm_member LEFT JOIN fm_product ON fm_member.member_id = fm_product.p_member_id LEFT JOIN fm_package ON fm_member.package_id = fm_package.package_id order by p_created_date desc limit $start,$limit";
$str='';
$data = $con->query($sql);
if($data!=null && $data->num_rows>0) {
while( $row = $data->fetch_array(MYSQLI_ASSOC)){
if($row['package_id']=='1'){
$package = "No Package";
} else {
$package = "<form class='form-item'><input name='product_code' type='hidden' value='".$row['p_id']."'><button type='submit'>Add to Cart</button></input></form>";
}
$id = $row['p_id'];
$str.="<div style=align: center class='data-container'><a href=item?id = $id><img src=upload/".$row['p_img']." width=300px style=max-width:100%; height: auto; vertical-align: middle></a><p>By ".$row['member_display_name']."</p><p>Product Name : ".$row['p_name']."</p><p>Price : ".$row['p_price']."</p><p>Discount : ".$row['p_discount']."</p><p>Description : ".$row['p_descp']."</p><p>Package ".$_POST['search']." : ".$row['package_name']."</p><p>".$package."</p></div>";
}
$str.="<input type='hidden' class='nextpage' value='".($page+1)."'><input type='hidden' class='isload' value='true'>";
} else {
$str .= "<input type='hidden' class='isload' value='false'><p>Finished</p>";
}
echo $str;
}
?>
Javascript :
search.js
var ajax_arry=[];
var ajax_index =0;
var sctp = 100;
$(function(){
$('#loading').show();
$.ajax({
url:"scroll.php",
type:"POST",
data:"actionfunction=showData&page=1",
cache: false,
success: function(response){
$('#loading').hide();
$('#demoajax').html(response);
}
});
$(window).scroll(function(){
var height = $('#demoajax').height();
var scroll_top = $(this).scrollTop();
if(ajax_arry.length>0){
$('#loading').hide();
for(var i=0;i<ajax_arry.length;i++){
ajax_arry[i].abort();
}
}
var page = $('#demoajax').find('.nextpage').val();
var isload = $('#demoajax').find('.isload').val();
if ((($(window).scrollTop()+document.body.clientHeight)==$(window).height()) && isload=='true'){
$('#loading').show();
var ajaxreq = $.ajax({
url:"scroll.php",
type:"POST",
data:"actionfunction=showData&page="+page,
cache: false,
success: function(response){
$('#demoajax').find('.nextpage').remove();
$('#demoajax').find('.isload').remove();
$('#loading').hide();
$('#demoajax').append(response);
}
});
ajax_arry[ajax_index++]= ajaxreq;
}
return false;
if($(window).scrollTop() == $(window).height()) {
alert("bottom!");
}
});
});
I want to get $_POST['search'] from search.php to scroll.php for replace it into WHERE on this query like.
$sql = "SELECT ... FROM ... LEFT JOIN ... ON ... LEFT JOIN ... ON ... WHERE p_name LIKE '%$_POST['search']' ORDER BY ... LIMIT ..."
Appreciated.
<form action="search" method="post">
This redirects to /search page, which you don't have. You have /search.php and /scroll.php. I think you should just put scroll.php as the action, and you'd get your result.
<form action="scroll.php" method="post">
EDIT:
I seem to have misunderstood the code. scroll.php is an API endpoint in this. Then the action remains search.php, BUT, in order to have the submitted values, you can kill 2 birds with 1 stone.
Update the form HTML (you don't need action, you don't need the form either, but let's keep it):
<form action="" method="post">
<input type="text" name="search" id="search" autocomplete="off">
<button type="button" id="do_search" class="btn btn-primary">Search</button>
</form>
In your JS, make the function get triggered by the search:
jQuery(document).ready(function($) {
$("#do_search").on("click", function() {
var searchTerm = $("#search").val();
//this is where you do the AJAX stuff. You can use searchTerm variable.
});
});
I have a dropdown in a form that is being populated with a list of employees from a table called 'employees' in a MySQL database (employee_id, fname, lname). This is working just fine.
What I need to do next is when an employee is selected from the dropdown, I need to query the employees table to get the employees commission percentage (commission) and then populate another text field in the form with that value.
The issue is that i need to do this without reloading the page. I have been searching Google and it looks like i need to use AJAX and JavaScript. to accomplish this, my problem is that I don't know a thing about AJAX, though i do have some experience with java script.
The employees table looks like this:
employee_id
fname
lname
commission
Below is what I have so far.
<?php
// DB connection
require_once('Connections/freight.php');
// get employee list for dropdown
$query_rsEmployeeList = "SELECT employee_id, fname, lname FROM employees ORDER BY fname ASC";
$rsEmployeeList = mysqli_query($con, $query_rsEmployeeList) or die(mysqli_error($con));
$row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
$totalRows_rsEmployeeList = mysqli_num_rows($rsEmployeeList);
?>
<html>
<head>
<title>demo</title>
</head>
<body>
<form id="frmAddAgents" name="frmAddAgents" method="post" action="">
Agent:
<select name="employee_id" id="employee_id">
<option selected="selected" value="">- select agent -</option>
<?php do { ?>
<option value="<?php echo $row_rsEmployeeList['employee_id']?>"><?php echo $row_rsEmployeeList['fname']?> <?php echo $row_rsEmployeeList['lname']?></option>
<?php
} while ($row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList));
$rows = mysqli_num_rows($rsEmployeeList);
if($rows > 0) {
mysqli_data_seek($rsEmployeeList, 0);
$row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
}
?>
</select>
Commision:
<input name="commission" type="text" id="commission" size="3" />
<input type="submit" name="button" id="button" value="Add Agent To Load" />
</form>
</body>
</html>
<?php
mysqli_free_result($rsEmployeeList);
?>
OK, I looked at the other question and although it is different, I tried to change the code around to make it work, but i'm not having any luck. When I select an item from the dropdown, nothing happens. Below is the updated code. I'm not sure if i'm on the right path or not.
<?php
// DB connection
require_once('Connections/freight.php');
// get employee list for dropdown
$query_rsEmployeeList = "SELECT employee_id, fname, lname FROM employees ORDER BY fname ASC";
$rsEmployeeList = mysqli_query($con, $query_rsEmployeeList) or die(mysqli_error($con));
$row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
$totalRows_rsEmployeeList = mysqli_num_rows($rsEmployeeList);
?>
<html>
<head>
<title>demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#employee_id").change(function () {
var employee_id = $(this).val();
$.ajax({
type: "GET",
url: "ajax.php",
data: {employee_id: employee_id},
dataType: "json",
success: function(data){
var comm = data[0].commission;
$('#commission').empty();
$('#commission').append('<option value="0">0.00</option>');
$('#commission').append('<option value="' + comm + '">' + comm + '</option>');
$('#commission').focus();
},
beforeSend: function(){
$('#commission').empty();
$('#commission').append('<option value="0">Loading...</option>');
},
error: function(){
$('#commission').empty();
$('#commission').append('<option value="0.00">0.00</option>');
}
})
});
});
</script>
</head>
<body>
<form id="frmAddAgents" name="frmAddAgents" method="post" action="">
Agent:
<select name="employee_id" id="employee_id">
<option selected="selected" value="">- select agent -</option>
<?php do { ?>
<option value="<?php echo $row_rsEmployeeList['employee_id']?>"><?php echo $row_rsEmployeeList['fname']?> <?php echo $row_rsEmployeeList['lname']?></option>
<?php
} while ($row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList));
$rows = mysqli_num_rows($rsEmployeeList);
if($rows > 0) {
mysqli_data_seek($rsEmployeeList, 0);
$row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
}
?>
</select>
Commision:
<input name="commission" type="text" id="commission" size="3" />%
<input type="submit" name="button" id="button" value="Add Agent To Load" />
</form>
</body>
</html>
<?php
mysqli_free_result($rsEmployeeList);
?>
Here is the test2.php file that ajax is using to query the database
<?php
// DB connection
require_once('Connections/freight.php');
if (isset($_GET['employee_id'])) {
$employee_id = $_GET['employee_id'];
$return_arr = array();
$result = $con->query ("SELECT commission FROM employees WHERE employee_id = $employee_id");
while($row = $result->fetch_assoc()) {
$row_array = array("commission" => $row['commission']);
array_push($return_arr,$row_array);
}
echo json_encode($return_arr);
}
?>
I figured it out. Here is the final code.
test.php
<?php
// DB connection
require_once('Connections/freight.php');
// get employee list for dropdown
$query_rsEmployeeList = "SELECT employee_id, fname, lname FROM employees ORDER BY fname ASC";
$rsEmployeeList = mysqli_query($con, $query_rsEmployeeList) or die(mysqli_error($con));
$row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
$totalRows_rsEmployeeList = mysqli_num_rows($rsEmployeeList);
?>
<html>
<head>
<title>demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#employee_id").change(function () {
var employee_id = $(this).val();
$.ajax({
type: "GET",
url: "ajax.php",
data: {employee_id: employee_id},
dataType: "json",
success: function(data){
var comm = data[0].commission;
$('#commission').empty();
$('#commission').val(comm);
$('#commission').focus();
},
beforeSend: function(){
$('#commission').empty();
$('#commission').val('0.00');
},
error: function(){
$('#commission').empty();
$('#commission').val('0.00');
}
})
});
});
</script>
</head>
<body>
<form id="frmAddAgents" name="frmAddAgents" method="post" action="">
Agent:
<select name="employee_id" id="employee_id">
<option selected="selected" value="">- select agent -</option>
<?php do { ?>
<option value="<?php echo $row_rsEmployeeList['employee_id']?>"><?php echo $row_rsEmployeeList['fname']?> <?php echo $row_rsEmployeeList['lname']?></option>
<?php
} while ($row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList));
$rows = mysqli_num_rows($rsEmployeeList);
if($rows > 0) {
mysqli_data_seek($rsEmployeeList, 0);
$row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
}
?>
</select>
Commision:
<input name="commission" type="text" id="commission" size="3" />%
<input type="submit" name="button" id="button" value="Add Agent To Load" />
</form>
</body>
</html>
<?php
mysqli_free_result($rsEmployeeList);
?>
ajax.php
<?php
// DB connection
require_once('Connections/freight.php');
if (isset($_GET['employee_id'])) {
$employee_id = $_GET['employee_id'];
$return_arr = array();
$result = $con->query ("SELECT commission FROM employees WHERE employee_id = $employee_id");
while($row = $result->fetch_assoc()) {
$row_array = array("commission" => $row['commission']);
array_push($return_arr,$row_array);
}
echo json_encode($return_arr);
}
?>
I have a bunch locker numbers in a drop down list (populated from MYSQL/PHP). I want to display the locker's combination and location when you select a locker number from the list in two input fields below on the same page.
I have used jquery to tell me which item in the list is selected dynamically. Then I used the $.ajax() function to send that item to my server.
My problem: Can I use $.ajax() to send my variable to the same page I am on? I have tried this and I get an error. I am not sure how to accomplish this. My knowledge of AJAX is very minimal.
My code is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Locker Backend</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="form.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function show()
{
$('#addlocker').toggle();
}
function lockerSelected(sel)
{
var selected = (sel.options[sel.selectedIndex].text);
$.ajax({
type:"POST",
url: "studentdata.php",
data: selected,
success: function(){
alert(selected);
}
});
}
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<?php
$url = $_SERVER['REQUEST_URI'];
$studID = substr($url, strpos($url, "=") + 1);
$db_handle = mysql_connect("localhost", "root", "pickles") or die("Error connecting to database: ".mysql_error());
mysql_select_db("lockers",$db_handle) or die(mysql_error());
$result = mysql_query("SELECT * FROM students WHERE studID = $studID");
?>
<div class="container">
<header> <img src="images/headmast.png" alt="Insert Logo Here" width="686" height="180" id="Insert_logo" /> </header>
<div id="data1">
<form id ="studData" name="studData" action="update.php" medthod="post">
<fieldset>
<legend>Student Details</legend>
<?php
while($row = mysql_fetch_array($result))
{
echo '<ol>';
echo '<li>';
echo '<label for=studid>Student ID</label>';
echo '<input id=studid name=studid type=text value='.$row['studID'].'>';
echo '</il>';
echo '<li>';
echo '<label for=fname>First Name</label>';
echo '<input id=fname name=fname type=text value='.$row['firstName'].'>';
echo '</il>';
echo '<li>';
echo '<label for=fname>Last Name</label>';
echo '<input id=lname name=lname type=text value='.$row['lastName'].'>';
echo '</il>';
echo '<li>';
echo '<label for=email>Email</label>';
echo '<input id=email name=email type=text value='.$row['email'].'>';
echo '</il>';
echo '<li>';
echo '<label for=progam>Program</label>';
echo '<input id=progam name=progam type=text value='.$row['program'].'>';
echo '</il>';
echo '</ol>';
$program = $row['program']; //get name of program
}
?>
<input type="submit" value="Update" class="fButton"/>
</fieldset>
</form>
<form id="locker" name="locker" action="" method="post" >
<fieldset>
<input type="button" onclick="show()" value="Add Locker"/>
<div id="addlocker" style="display:none;">
<!--
query lockers where $program = program parsed in & student id is equal to 0 (this makes it available)
get select list to 10
populate select list --> <br/>
<legend>Lockers Available: </legend>
<select size="10" name="lockerSelect" multiple="yes" style="width:200px;" onChange="lockerSelected(this);">
<?php
$result1=mysql_query("SELECT * FROM lockers WHERE progName = '$program' && studID = 0") or die($result1."<br/><br/>".mysql_error());
while($row1 = mysql_fetch_array($result1))
{
echo '<option value=\"'.$row1['lockerScan'].'">'.$row1['lockerNo'].'</option>';
}
echo '</select>';
echo '<br>';
$lockerNo = $_POST['selected']; \\doesn't work - displays error
echo $lockerNo; \\errors out
?>
</div><!--end of add locker section-->
</fieldset>
</form>
</div><!--end of data1 -->
Search
</div><!-- end of container-->
</body>
</html>
Firstly, you can use :
function show()
{
$('#addlocker').toggle();
}
Then, you should learn more about Ajax and PHP. Your call shoud be :
var selected = (sel.options[sel.selectedIndex].text);
$.ajax({
type:"POST",
url: "studentdata.php",
data: {selected: selected},
success: function(data){
alert(data);
}
});
And in your PHP file :
<?php
$select = $_POST['selected'];
//....
// Do what you have to do then return your result
echo '<div>Send to your page !</div>';
First Arrange your files.
js's is in js folder
php's in php folder
best way is to assaign a seperate php page and then in js use on change event
$(document).on("change", "#selectfieldid", function(){
var selected = $('#selectfieldid').val();
$.ajax({
type:"POST",
url: "studentdata.php",
data: selected,
success: function(data){
$('#addlocker').val(data); //echoed result placed here that has id addlocker
}
});
});
send those to a php page echo the result in that php.