Project: Shopping List Aim: To add item into unordered list. User adds item in a form, form should not reload and the web page seamlessly display the added item into the list. The added item should be pass into MySQL database.`
As of right now I only have one table in my MySQL and only one row
The HTML:
<form id="inputItem" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
<div>
<ul>
<div id="list"></div>
<li>
<input type="text" name="itemIn" id="itemIn"></input>
<button onclick="addList(document.getElementById('itemIn').value)">ADD</button>
</li>
</ul>
</div>
</form>
The JavaScript Code:
function addList(item){
document.getElementById('list').innerHTML += "<li><input type='checkbox'>" + item + "</input></li>";
}
I need to have a checkbox by the side of the items, for deleting item purpose.
The PHP Script:
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'list');
$conn = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$itemIn = $_POST['itemIn'];
$sql = "INSERT INTO item (name) VALUES ('$itemIn')";
?>
All of these are in one page, if anyone has any idea how to put them into separate files that would be very much appreciated
Thank You
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments