Develop Reference

(Ajax Live Search) How to have all the table records display before typing anything in the search field?

So I have all this code that works fine. But it only shows the table records when I start typing inside the search field. I want all the records to be visible by default the moment I open the page.
I know this has something to do with the keyup function but is there a way to have all the records be visible by default before I typed anything inside the search field?
AJAX Live Search/ Input Code
<input type="text" id="search">
<div class="table-container" id="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#search").keyup(function(){
$.ajax({
type:'POST',
url:'search.php',
data:{
name:$("#search").val(),
},
success:function(data){
$("#output").html(data);
}
});
});
});
</script>
PHP Code
$select = "SELECT * FROM info WHERE name LIKE '%".$_POST['name']."%'";
$result = mysqli_query($conn, $select);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "
//table code.. ";
}
I want it to work like how filter searches would work.

just write another ajax
$('#search').on('click',function(){
$.ajax({
type:'GET',
url:'searchAll.php',
success:function(data){
$("#output").html(data);
}
});
});
Then in searchAll.php file write your query php code.
NOTE: Use prepared statements or PDO to prevent SQL injections

how to make submit button both send form thru' PHP -> MySQL and execute javascript?

I'm having an issue. When I hit submit, my form values are sent to the database. However, I would like the form to both send the value to the database and execute my script, as said in the title.
When I hit submit button, the form is sent to the database and the script remains ignored. However, if I input empty values into the input areas, the javascript is executed, and does what I want (which is to show a hidden < div >), but it's useless since the < div > is empty, as there is no output from the server.
What I want is:
submit button -> submit form -> javascript is executed > div shows up > inside div database SELECT FROM values (which are the ones added through the submitting of the form) appear.
Is this possible? I mean, to mix both PHP and JavaScript like this?
Thanks in advance.

By two ways, You can fix it easily.
By ajax--Submit your form and get response
$('form').submit(function (e){
e.preventDefault();
$.ajax({
type: "POST",
url: url, //action
data: form.serialize(), //your data that is summited
success: function (html) {
// show the div by script show response form html
}
});
});
First submit your from at action. at this page you can execute your script code .. At action file,
<?php
if(isset($_POST['name']))
{
// save data form and get response as you want.
?>
<script type='text/javascript'>
//div show script code here
</script>
<?php
}
?>

hers is the sample as I Comment above.
In javascript function you can do like this
$.post( '<?php echo get_site_url(); ?>/ajax-script/', {pickup:pickup,dropoff:dropoff,km:km}, function (data) {
$('#fare').html(data.fare);
//alert(data.fare);
fares = data.fare;
cityy = data.city;
actual_distances = data.actual_distance;
}, "json");
in this ajax call I am sending some parameters to the ajaxscript page, and on ajaxscript page, I called a web service and gets the response like this
$jsonData = file_get_contents("https://some_URL&pickup_area=$pickup_area&drop_area=$drop_area&distance=$km");
echo $jsonData;
this echo $jsonData send back the data to previous page.
and on previous page, You can see I Use data. to get the resposne.
Hope this helps !!

You need ajax! Something like this.
HTML
<form method='POST' action='foobar.php' id='myform'>
<input type='text' name='fname'>
<input type='text' name='lname'>
<input type='submit' name='btnSubmit'>
</form>
<div id='append'>
</div>
jQuery
var $myform = $('#myform'),
$thisDiv = $('#append');
$myform.on('submit', function(e){
e.preventDefault(); // prevent form from submitting
var $DATA = new FormData(this);
$.ajax({
type: 'POST',
url: this.attr('action'),
data: $DATA,
cache: false,
success: function(data){
$thisDiv.empty();
$thisDiv.append(data);
}
});
});
And in your foobar.php
<?php
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$query = "SELECT * FROM people WHERE fname='$fname' AND lname = '$lname' ";
$exec = $con->query($query);
...
while($row = mysqli_fetch_array($query){
echo $row['fname'] . " " . $row['lname'];
}
?>
That's it! Hope it helps

You can use jQuery ajax to accomplish it.
$('form').submit(function (e){
e.preventDefault();
$.ajax({
type: "POST",
url: url, //url where the form is to be submitted
data: data, //your data that is summited
success: function () {
// show the div
}
});
});

Yes, you can mix both PHP and JavaScript. I am giving you a rough solution here.
<?php
if(try to catch submit button's post value here, to see form is submitted)
{
?>
<script>
//do javascript tasks here
</script>
<?php
//do php tasks here
}
?>

Yes, This is probably the biggest use of ajax. I would use jquery $.post
$("#myForm").submit(function(e){
e.preventDefault();
var val_1 = $("#val_1").val();
var val_2 = $("#val_2").val();
var val_3 = $("#val_3").val();
var val_4 = $("#val_4").val();
$.post("mydbInsertCode.php", {val_1:val_1, val_2:val_2, val_3: val_3, val_4:val_4}, function(response){
// Form values are now available in php $_POST array in mydbInsertCode.php - put echo 'success'; after your php sql insert function in mydbInsertCode.php';
if(response=='success'){
myCheckdbFunction(val_1,val_2,val_3,val_4);
}
});
});
function myCheckdbFunction(val_1,val_2,val_3,val_4){
$.post("mydbCheckUpdated.php", {val_1:val_1, val_2:val_2, val_3: val_3, val_4:val_4}, function(response){
// put echo $val; from db SELECT in mydbSelectCode.php at end of file ';
if(response==true){
$('#myDiv').append(response);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Unable to pass javascript variable to PHP through ajax?

I have searched through a couple of QA here at stackoverflow, none of solutions seemed to help. I am trying to pass input to my PHP file but for some reason the inputdoesn't get passed from javascript to and it keeps on returning undefined on the console.
my javascript:
$.ajax({
type:"GET",
url:"go.php",
data:{input:input},
success:function(data){
console.log(data); //data outputs https://mp3skull.wtf/search_db.php?q=&fckh=1d41a1579f21a921d1008d90dc6246a7
}
});
my php:
<?php
$input = $_GET['input']; //$input here is empty
$keywords= explode(" ",$input);
$link = "https://mp3skull.wtf/search_db.php?q=" . $keywords[0];
for($i = 1; $i < count($keywords); $i++){
$link .= "+" . $keywords[$i];
}
$link .= "&fckh=1d41a1579f21a921d1008d90dc6246a7";
echo $link; //$keywords is not appended to $link
?>

the code works you probably console.log from outside the ajax call.

hi first you need to declare it as a variable. Second does your variable really have a value? I'll give u sample you can run your code do it something like this
var input = $("#input").val();
$.ajax({
type:"GET",
url:"go.php",
data:{input:input},
success:function(data){
console.log(data); //data outputs https://mp3skull.wtf/search_db.php?q=&fckh=1d41a1579f21a921d1008d90dc6246a7
}
});
hope this helps

If you have the following Html:
<input type="text" class="field" />
<input type="button" class="button">
You should use the following script:
$(document).ready(function() {
$('.button').click(function(){
$.ajax({
type:"GET",
url:"go.php",
data:{'input':$('input.field').val()},
success:function(data){
console.log(data);
}
});
});
});

I think it's because when you send data in "data: { input: input } " are defining the variable input with the same name. It should be like that
var inputValue = $("#idInput").val();
$.ajax({
type:"GET",
url:"go.php",
data:{input:inputValue},
success:function(data){
console.log(data);
}
});

Populate html table using jquery ajax and php

I'm stuck here for about 4 hours do alot of research and cannot fin the answer.
I want to repopulate the table after updating the contents using jquery ajax and php so here is my code.
PHP script:
if(isset($_POST['myinputval']))
{
$uinput = $_POST['myinputval'];
$uinput = $mysqli->real_escape_string($uinput);
$query = ('INSERT INTO tbltest values (" ","'.$uinput.'") ');
if($mysqli->query($query))
{
} else
echo 'fail'. $mysqli->error;
}
$result= $mysqli->query("Select *from tbltest");
if($result->num_rows>0)
{
while($row=$result->fetch_assoc())
{
$sendtojq[]=$row;
}
echo json_encode($sendtojq);
}
mysqli_close($mysqli);
Here is my script
<script type="text/javascript">
function ajaxsubmit()
{
var myinputval = $("#input1").val();
$.ajax({url:'myphp.php', type:'post', data:{
myinputval:myinputval
},
success: function(data)
{
alert(data);
}
});
}
</script>
This is the output when submitted
[{"ID":"1","NAME":".$newinput."},{"ID":"2","NAME":".$newinput."},{"ID":"3","NAME":".$newinput."},{"ID":"4","NAME":".$newinput."},{"ID":"5","NAME":".$newinput."},{"ID":"6","NAME":".$newinput."},{"ID":"7","NAME":"$newinput"},{"ID":"8","NAME":"twst"},{"ID":"9","NAME":"twst"},{"ID":"10","NAME":"testtt"},{"ID":"11","NAME":"testtt"},{"ID":"12","NAME":"thisssss"},{"ID":"13","NAME":"thisssss"},{"ID":"14","NAME":"tstet"},{"ID":"15","NAME":"Last"},{"ID":"16","NAME":""},{"ID":"17","NAME":"dddddddd"},{"ID":"18","NAME":"aaaaaaaaaaa"},{"ID":"19","NAME":"gggggggggggggggggggggg"},
Now what I want to do is get every single element of the array which is stored in the variable 'data' and use is at as the value of my table. Any suggestions? Thanks in advance.

ajax function on change dropdown Value

Hie Everyone!
In PHP page1 my code is here..
<html>
.
...
<select id="customer">...</select>
..
....
<div id="show"></div>
//and Java script function (ajax call)
<script>
$('#customer').change(function(){
var Id = $(this).val();
$.ajax({
type: "GET",
url: "page2.php",
data: "ID="+id,
success: function( data ) {
document.getElementById("show").innerHTML = data;
}
});
});
</script>
</html>
In php page2 as code..
<?php
$ID=$_GET['ID'];
...
//db connection code
..
$sql="select * from Table1 where id='$ID'";
//result code..
//while loop..
//echo something..
// all working without error..
?>
So, when I was trying to do this.It does not showing the success data or may be Ajax function not work.I had check with alert(data);
but does not Alert anything.
please help.

You will give echo infront of the $get_id variable. But you will make sure only one echo in the page2.php page.
<?php
echo $get_id=$_GET['pass_id'];
...
//db connection code
..
$sql="select * from Table1 where id='$get_id'";
//result code..
//while loop..
//echo something..
// all working without error..
?>
Then in page1.php check your ajax response. using alert function.
<script>
$('#customer').change(function(){
var id = $(this).val();
$.ajax({
type: "GET",
url: "page2.php",
data: "pass_id="+id,
success: function( data ) {
alert(data);
document.getElementById("show").innerHTML = data;
}
});
});
</script>