I am getting records from database in WordPress then creating and adding value in select tag(HTML) dynamically.
<?php
global $wpdb;
$registeredUsers = $wpdb->get_results('SELECT * FROM wp_users where user_login != "Admin"',ARRAY_A);
$select='<select name="users" class="form-control" id="users">';
$select.= '<option value="Select User"> Select User</option>';
foreach($registeredUsers as $user)
{
$select.='<option value="'.$user['user_email'].'">'.$user['user_login'].'</option>';
}
$select.='</select>';
?>
I am using $select variable in Html and drop down is being displayed properly.
<form id="a" action="" method="post">
<div style="margin: 0 auto;width:500px;">
<?php echo $select ?>
</div>
</form>
I have written code to get selected drop down onchange event in jquery. It return success but I am not able to get selected value of dropdown.
<script type="text/javascript">
$(document).ready(function(){
$("select[name='users']").change(function () {
jQuery.ajax({
type: "POST",
data: $("form#a").serialize(),
success: function(data){
alert("SUCCESS");
}
});
});
});
</script>
Below code return nothing
if(isset($_POST['users'])) {
echo $_POST['users'];
}
Set url option to your page in your ajax function:)
<script type="text/javascript">
$(document).ready(function(){
$("select[name='users']").change(function () {
jQuery.ajax({
type: "POST",
url:"yourpage.php"
data: $("form#a").serialize(),
success: function(data){
alert("SUCCESS");
}
});
});
});
</script>
replace yourpage.php
Related
I do not use submit button
I want the selected value from the user sent to the test1.php page, but when the user selects an option nothing happen in the page, and the value is not sent to the test1.php page
Is there any mistake in my code, or did I miss something ?
test2.php
<?php include_once 'database.php';
?>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
$('.category').change(function() {
var category = $('.category option:selected').val();
alert('category changed to ' + category);
$.ajax({
method: "POST",
url: "test1.php",
data: {
category1: $(this).val()
},
success: function(data) {
console.log(data);
}
});
});
});
</script>
</head>
<p> Filter By Category</p>
<select id="category" class="category">
<?php
$query = mysqli_query($conn,"select * from category ");
while($category = mysqli_fetch_array($query)) {
echo "<option value='" . $category['cat_name'] . "'>" . $category['cat_name'] . "</option> ";
}
?>
</select>
test1.php
<?php
include_once 'database.php';
if (isset($_POST['category1'])) {
$category = $_POST['category1'];
echo $category;
}
?>
is that all your file ? did you forget to include jquery ?
I just did the same script as yours but in html, and console said $ not found, after add jquery that's working
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
$('.category').change(function() {
$.ajax({
method: "POST",
url: "https://webhook.site/2d574d22-5570-46f2-b5bd-343d715adff4",
data: {
category1: $(this).val()
},
success: function(data){
console.log(data);
}
});
});
});
</script>
</head>
<body>
<p> Filter By Category</p>
<select id="category" class="category">
<option value='1'>One</option>
<option value='2'>two</option>
</select>
</body>
</html>
here is the webhook to check your request, it is like test1.php but just for debugging purpose https://webhook.site/#!/2d574d22-5570-46f2-b5bd-343d715adff4/e3406220-f58e-45be-a4ef-13d8d3e0b0d3/1
here are some advices:
inspect your page using developer tools, maybe there are some errors
check with console.log .val()
hope this help
I am getting Id value from my AJAX and I am also able to display it. I set the Id value input text in the AJAX and displaying it on HTML like this <input value="4864" id="compare_id" type="hidden"> Now I have to pass that value to PHP to get the result from database.
Is there any idea how to do it?
AJAX
$(document).ready(function() {
arr = [];
$("[type=checkbox]").click(function() {
$.ajax({
type: "POST",
url: "includes/compare_process.php", //
data: 'users=' + arr,
dataType: 'json',
success: function(msg) {
$("#pics_name,#pics_Id").empty();
$.each(msg, function() {
$("#pics_Id").append("<input type=hidden value=" + this.Id + " id=compare_id name=compare_id>");
//alert(msg.id);
});
},
error: function() {
alert("failure");
}
});
});
});
//tried AJAX
$(document).ready(function(){
$('#search-button').click(function(){
$.ajax( {
type: "GET",
url: 'includes/compare_process.php?key=compare_details',
data: $('#search-form').serialize(),
success: function(response) {
//$('#response').html(response);
alert(response);
}
} );
});
});
PHP
<div class="bg-popup" style="display: none;" id="open_compare_popup">
//popup code here
<?php
$val2=htmlentities($_GET['compare_id']);
echo $val2;
$sql = "SELECT * FROM `request` WHERE Id IN($val2)";
?>
//end popup code here
This output I am getting from AJAX
<form action="#" method="get" id="search-form">
<span id="pics_Id">
<input value="4869" id="compare_id" name="compare_id" type="hidden">//output
<input value="4884" id="compare_id" name="compare_id" type="hidden">//output
<input value="5010" id="compare_id" name="compare_id" type="hidden">//output
</span>
<button class="action action--button action--compare" type="button" id="search-button" name="search-button"><span class="action__text">Compare</span></button>
</form>
I have to pass the input value to PHP after clicking on a button.
What I have here is ajax that's post information into textbox from database. This ajax work's in input field, but when I tried to use select box it doesn't working. Why is that?
not working
<select id="tag"><option value="">none</option><option value="crs">crs</option></select>
working
<input name="tag" id="tag" type="text" value="" />
Index.php
<select id="tag"><option value="">none</option><option value="crs">crs</option></select>
<input name="output" id="output" type="text" value="" />
<script type="text/javascript">
$(document).ready(function()
{
$('input[id="tag"]').change(function()
{
var prjt_code = $("#tag").val();
$.ajax({
type: "POST",
url: "autocomplete-ajax.php",
data :"prjt_code="+prjt_code,
dataType:'html',
type:'POST',
success:function(data){
//alert(data);
$('#output').val(data);
}
});
return false;
});
});
</script>
autocomplete-ajax.php
<?php
if(isset($_POST['prjt_code'])) {
$prjt_code = $_POST['prjt_code'];
$sql = $mysqli1->query("SELECT * FROM project WHERE project='$prjt_code'");
while($row1 = $sql->fetch_assoc())
{
$code = $row1['project_code'];
}
echo $code;
}
?>
You are targeting input[id="tag"] when you want select[id="tag"]
http://jsfiddle.net/releaf/U28jb/
$(document).ready(function() {
$('select[id="tag"]').on('change', function() {
var prjt_code = $("#tag").val();
alert(prjt_code);
$.ajax({
type: "POST",
url: "autocomplete-ajax.php",
data :"prjt_code="+prjt_code,
dataType:'html',
type:'POST',
success:function(data){
//alert(data);
$('#output').val(data);
}
});
return false;
});
});
I want to pass the jquery value "selected" to fetchdata.php without reloading the page.
How can I do this?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript">
</script>
<script>
$(document).ready(function() {
$("#buttonClass").click(function() {
getValueUsingClass();
});
});
function getValueUsingClass() {
var chkArray = [];
$(".chk:checked").each(function() {
chkArray.push($(this).val());
});
/* we join the array separated by the comma */
var selected;
selected = chkArray.join('#') + "#";
if (selected.length > 1)
{
$.ajax({
url: "fetchdata.php", //This is the page where you will handle your SQL insert
type: "GET",
data: "val=" + selected, //The data your sending to some-page.php
success: function()
{
console.log("AJAX request was successfull");
},
error: function()
{
console.log("AJAX request was a failure");
}
});
//alert("You have selected " + selected);
} else
{
alert("Please at least one of the checkbox");
}
}
</script>
</head>
<body>
<div id="checkboxlist">
<div><input type="checkbox" value="1" class="chk"> Value 1</div>
<div><input type="checkbox" value="2" class="chk"> Value 2</div>
<div><input type="checkbox" value="3" class="chk"> Value 3</div>
<div><input type="checkbox" value="4" class="chk"> Value 4</div>
<div><input type="checkbox" value="5" class="chk"> Value 5</div>
<div>
<input type="button" value="Get Value Using Class" id="buttonClass">
</div>
</html>
fetchdata.php
<?php
foreach($_GET['val'] as $r)
{
print_r($r);
}
?>
I am using the GET method to receive the data and the for-each loop to print the array, but I am not getting any values in the PHP file.
change the ajax function like below and make sure about the fectdata.php in the same folder or give the correct path.
$.ajax({
url: 'fetchdata.php',
type:'GET',
data: {val:selected},
success: function(data) {
console.log("AJAX request was successfull");
}
});
Check if the path to your script is correct:
url: 'fetchdata.php',
Is this script in your doc root?
change the following in your code,
in fetchdata.php
<?php
$valArray = explode('#',$_GET['val']);
foreach($valArray as $val){
echo $val."<br/>";
}
?>
In html File,
$(document).ready(function () {
$("#buttonClass").click(function() {
getValueUsingClass();
});
});
function getValueUsingClass(){
var chkArray = [];
$(".chk:checked").each(function() {
chkArray.push($(this).val());
});
/* we join the array separated by the comma */
var selected;
selected = chkArray.join('#') + "#";
if(selected.length > 1)
{
$.ajax({
url: "fetchdata.php", //This is the page where you will handle your SQL insert
type: "GET",
data: "val=" +selected.toString(), //The data your sending to some-page.php
success: function(data1) {
$("#resultDiv").html(data1);
console.log("AJAX request was successfull");
},
error:function()
{
console.log("AJAX request was a failure");
}
});
//alert("You have selected " + selected);
}else
{
alert("Please at least one of the checkbox");
}
}
include the div after a button like
<div id="resultDiv"></div>
I am deleting records using jQuery and Ajax. The code I wrote deletes a record but the HTML table is loaded again, which means the page refreshes which I want to avoid.
Here is my code:
comment.php
<script type="text/javascript">
$(document).ready(function(){
function loadList(){
$.ajax({
url: "load_list.php",
cache: false,
success : function(html){
$(".name_list").html(html);
}
});
}
loadList();
$("#Submit").click(function() {
if($(":text").val().length==0)
{
// $(this).next().html("Field needs filling");
$(":text").after('<span class="errorkeyup">Field cannot be empty</span>');
//return false;
success = false;
}
else
{
var name=$("#name").val();
var message=$("#message").val();
$.ajax({
type:"post",
url:"save_list.php",
data:"name="+name+"&message="+message,
success:function(data){
loadList();
}
});
return false;
}
});
$(".delete_button").on("click", function(){
//this deletes the row clicked on with an alert and then reloads the list
var id = $(this).attr("id");
/*var x=window.confirm("Are you sure you want to delete this item?")
if (x==true){*/
$.ajax({
type: "POST",
url: "delete.php",
data: "id="+ id,
success: function(){
loadList();
}
});
// }
return false;
});
});
</script>
</head>
<body>
<div id="form">
<form method="post" name="form" action="">
<div id="content">
Name : <input type="text" name="name" id="name" />
</br>
Message : <input type="text" name="message" id="message" />
</br>
</div>
<input type="button" value="Submit" id="Submit">
</form>
</div>
<div class="name_list"></div>
</body>
loadlist.php
<?php
include('connection.php');
$sqlnew = 'Select * from login order by id ASC';
$res = mysql_query($sqlnew);
echo'<table border="1">';
echo'<tr>';
echo'<td>SrNo.</td>';
echo '<td>Name:</td>';
echo '<td>Message:</td>';
echo '<td>Delete</td>';
echo'</tr>';
$i=1;
while($row = mysql_fetch_array($res))
{
echo '<tr>';
echo'<td>'.$i.'</td>';
echo'<td>'.$row['username'].'</td>';
echo '<td>'.$row['message'].'</td>';
echo"<td>
<a id='".$row['id']."' href=delete.php?id=".$row['id']."&type=Delete class=delete_button>Delete</a></td>";
echo"<td>
<a id='".$row['id']."' href=comment.php?id=".$row['id']."&type=edit class=edit_button>Edit</a></td>";
echo '</tr>';
$i++;
}
echo'</table>';
?>
delete.php
<?php
include('connection.php');
if(isset($_REQUEST["id"]))
{
$cmd=mysql_query("delete from login where id=" .$_REQUEST["id"] .";");
header("location: comment.php");
}
?>
When you do the $.ajax() call for $('.delete_button'), you shouldn't call your loadList() function there because that is what reloads the table, instead you should just remove the one entry that's deleted from the table.
Perhaps you can remove it with something similar to this, placed inside the delete button success callback:
$.ajax({
type: "POST",
url: "delete.php",
data: "id="+ id,
success: function()
{
$(this).parent().parent().remove();
}
});
<?php
include('connection.php');
if(isset($_REQUEST["id"]))
{
$cmd=mysql_query("delete from login where id=" .$_REQUEST["id"] .";");
header("location: comment.php");
}
?>
in this code remove line
header("location: comment.php");
Final code would be,
<?php
include('connection.php');
if(isset($_REQUEST["id"]))
{
$cmd=mysql_query("delete from login where id=" .$_REQUEST["id"] .";");
echo '1';
} else {
echo '0';
}
exit;
?>
In delete function, after executing delete query, you need to echo '1' or '0'. Lets say echo '1'; when deleted successfully and echo '0' when delete not succeed. So based on 1 or 0 you can remove those deleted row from table by ,
$(".delete_button").on("click", function(){
//this deletes the row clicked on with an alert and then reloads the list
var obj = $(this);
var id = obj.attr("id");
/*var x=window.confirm("Are you sure you want to delete this item?")
if (x==true){*/
$.ajax({
type: "POST",
url: "delete.php",
data: "id="+ id,
success: function(response){
if(response == '1') {
obj.parent.remove();
}
}
});
// }
return false;
});