AJAX for php scripts

Question

I am pretty new to Web Development and especially AJAX (jquery) and i am facing a problem

I have 3 php scripts

input.php:

<form id="input" action='data.php' method='post'>
<select name="id">
<?php 

require_once('function.php');
$conn = connect();

$sql = "SELECT id,item FROM t1";
$results = mysqli_query($conn, $sql) or die($mysqli->error);
//echo "<form action='data.php' method='post'>";
while($row = $results->fetch_assoc()){
echo "<option value='" . $row['id'] . "'>" . $row['item'] . "</option>";
}
?>

<input type='Submit' value='Auswahl bestätigen'/>

</select>

data.php

<form action= 'change.php' method='post'>

<?php

$id = $_POST ["id"];
$id = $mysqli->real_escape_string($id);


require_once('function.php');
$conn = connect();


$sql = "SELECT * FROM t1 WHERE id='".$id."'";
//echo $sql;
$results = mysqli_query($conn, $sql);
$row = mysqli_fetch_array($results);

echo "ID: <input type='number' name='id' value='" .$row['id']. "' readonly 
size='5'><br><br>";

echo "Beschreibung: <input type='text' name='beschreibung' 
value='".$row['description']."'><br><br>"; 

echo "Finder: <input type='text' name='finder' required 
value='".$row['contact']."' /><br><br>";

echo "Datum: <input type='date' name='datum' required 
value='".$row['date']."'> <br><br>";

echo "Ort: <input type='text' name='ort' required value='".$row['place']."'> 
<br><br>";

echo "Abgeholt?: <input type='radio' name='abgeholt' value='1' />Ja";
echo            "<input type='radio' name='abgeholt' value='0' 
checked>Nein<br><br>";

echo "Abholdatum: <input type='date'  name='abholdatum' 
value='".$row['retrieve date']."'> <br><br>";

?> 
<input type='Submit' value='Eintrag ändern!' /><br><br>
</form>

and change.php:

<?php
$id = $_POST ["id"];
$item = $_POST ["gegenstand"];
$description = $_POST ["beschreibung"];
$contact = $_POST ["finder"];
$date = $_POST ["datum"];
$place = $_POST ["ort"];
$retrieved = $_POST ["abgeholt"];
$retrieve_date = $_POST ["abholdatum"];


require_once('function.php');
$conn = connect();




$item = $conn->real_escape_string($item);
$description = $conn->real_escape_string($description);
$contact = $conn->real_escape_string($contact);
$date = $conn->real_escape_string($date);
$place = $conn->real_escape_string($place);
$retrieved = $conn->real_escape_string($retrieved);
$retrieve_date = $conn->real_escape_string($retrieve_date);



$sql ="UPDATE t1

SET description = '$description', contact = '$contact', date = '$date', 
place = '$place', retrieved = '$retrieved' , retrieve_date = 
'$retrieve_date'
WHERE id = '$id'";

//echo $sql;        

if ($conn->query($sql) === TRUE) {
echo "New record created successfully" . "<br>" . "<br>";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();

?>

so my problem:
These scripts are working and I am able to change entries in my db (mariadb) But I want to let them be loaded via AJAX to improve the feel of my site (nobody likes 3 redirects to change something)

I tried it with the jquery $.load function but no joy

<script type="text/javascript">                                                                                     

$(document).ready(function(){
$('#f1').load('input.php');
});
}); 
</script>

so my question is:
Is it possible to join these scripts to cut them down to max. 1 redirect or even better to integrate them via AJAX into the main html page?

ps: sorry for grammar mistakes , english isn't my mother tongue

Ajax is not just about loading pages. You should be developing a single page which does ajax calls without page reload to post data to server. You don't need to load a new page every time from server through ajax. — Jeba Prince
– Jeba Prince, Commented Oct 4, 2017 at 9:28
Your mixing oop mysqli and procedural functions, and $_POST ["id"] is open to SQL injection. — Lawrence Cherone
– Lawrence Cherone, Commented Oct 4, 2017 at 9:31
Well, since you're new, put away ajax for a moment and look at bobby-tables.com and learn about SQL injection and how to prevent them. Right now, your code is not safe at all and you're very vulnerable to injections. Your database could be hacked in a few seconds, without any need of deeper knowledge about your systems. — Twinfriends
– Twinfriends, Commented Oct 4, 2017 at 9:31
Would it be enough to escape the variable through $mysqli->real-escape-string($id)? — John W.
– John W., Commented Oct 4, 2017 at 9:37
@JohnW. - unsure, never bothered with mysqli. I just jumped straight in and used PDO - far, far more versatile. By simply changing the connection string, I can often run the exact same code against mysql, sql server, oracle, sqlite etc, etc. Often-times, you'll need to massage the code a little to account for the different quirks of each DB engine, but PDO (with prepared statements) is able to manage escaping the strings and so, so much more. :) — enhzflep
– enhzflep, Commented Oct 4, 2017 at 10:09

Klevin Delimeta · Accepted Answer · 2017-10-04 10:19:36Z

Among many other problems..

$(document).ready(function(){
   $("#input").submit(function(event){// Bind to the submit event of our form
    // Prevent default posting of form - put here to work in case of errors
    event.preventDefault();

    // Serialize the data in the form (get form data)
    var serializedData = $(this).serialize();

    // Fire off the request to /data.php
    request = $.ajax({
        url: "/form.php",
        type: "post",
        data: serializedData
    });

    // Callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        // Log a message to the console
        console.log("Hooray, it worked!");
    });

    // Callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
      // Log the error to console
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
    });

   });
});

Also remove attributes action & method from form. Not needed anymore.

<form id="input" >
<select name="id">
....

For more info visit: JQuery Ajax

Best

Collectives™ on Stack Overflow

AJAX for php scripts

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related