I have created pages to comping some content and adding it into db. Here they are
composing.php
<html>
<head>
<title>Composing news</title>
<script type="text/javascript" src="includes/jquery/jquery.min.js" ></script>
<script type="text/javascript">
function reset_form() {
document.getElementById("title").reset();
}
</script>
<script type="text/javascript">
$(document).ready(function(e) { // ready method make funtion available after the document has been loaded
$("#submit").click(function(){
if($("#title").val().length == 0 || $("#category").val().length == 0 || $("#summary").val().length == 0 || $("#content").val().length == 0) {
alert("Please fill into every blank!");
} // end if
else {
$.post("adding.php",{title: $("#title").val(), category: $("#category").val(), summary: $("#summary").val(),content: $("#content").val()}, function(data){
// post method is used to perform an AJAX HTTP POST request
//alert("ok");
}); // end $.post
} // end else
}); // end $("#submit)
}); // end $(document)
</script>
<style>
#submit{
padding: 5 5 5 5;
border-radius: 5px;
text-align:center;
display:inline;
background-image: linear-gradient(bottom, rgb(81,151,239) 15%, rgb(114,182,255) 58%, rgb(149,219,255) 79%);
background-image: -o-linear-gradient(bottom, rgb(81,151,239) 15%, rgb(114,182,255) 58%, rgb(149,219,255) 79%);
background-image: -moz-linear-gradient(bottom, rgb(81,151,239) 15%, rgb(114,182,255) 58%, rgb(149,219,255) 79%);
background-image: -webkit-linear-gradient(bottom, rgb(81,151,239) 15%, rgb(114,182,255) 58%, rgb(149,219,255) 79%);
background-image: -ms-linear-gradient(bottom, rgb(81,151,239) 15%, rgb(114,182,255) 58%, rgb(149,219,255) 79%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.15, rgb(81,151,239)),
color-stop(0.58, rgb(114,182,255)),
color-stop(0.79, rgb(149,219,255))
);
}
#reset{
padding: 5 5 5 5;
border-radius: 5px;
text-align:center;
display:inline;
background-image: linear-gradient(bottom, rgb(167,12,21) 12%, rgb(201,39,49) 56%, rgb(242,67,79) 78%);
background-image: -o-linear-gradient(bottom, rgb(167,12,21) 12%, rgb(201,39,49) 56%, rgb(242,67,79) 78%);
background-image: -moz-linear-gradient(bottom, rgb(167,12,21) 12%, rgb(201,39,49) 56%, rgb(242,67,79) 78%);
background-image: -webkit-linear-gradient(bottom, rgb(167,12,21) 12%, rgb(201,39,49) 56%, rgb(242,67,79) 78%);
background-image: -ms-linear-gradient(bottom, rgb(167,12,21) 12%, rgb(201,39,49) 56%, rgb(242,67,79) 78%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.12, rgb(167,12,21)),
color-stop(0.56, rgb(201,39,49)),
color-stop(0.78, rgb(242,67,79))
);
}
</style>
</head>
<body>
<!--form-->
<p id="status">Composing</p>
<form id = "composing_form" name="composing_form" method = "post" action="addguestbook1.php">
<p>Title: <input class="form" type="text" id="title" name="title" value=""/></p>
<p>Category: <input type="category" class="form" id="category" name="category" value=""/></p>
<p>Summary:<br/><textarea class="form" id="summary" name="summary" cols="40" rows ="3"></textarea></p>
<p>Content:<br/><textarea class="form" id="content" name="content" cols="60" rows ="10"></textarea></p>
<p id="submit">Submit</p>
<p id="reset">Reset</p>
</form>
<!--End form-->
</body>
</html>
adding.php
<?
$title = addslashes($_POST['title']);
$category = addslashes($_POST['category']);
$summary = addslashes($_POST['summary']);
$content = addslashes($_POST['content']);
$db = new mysqli('localhost', 'root', '', 'test');
$query = "INSERT INTO test VALUES
('NULL', '" . $title . "', '".$category."', '".$summary."', '".$content."' );";
$db->query($query);
?>
db.sql
CREATE TABLE IF NOT EXISTS `test` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
`title` VARCHAR(40) NOT NULL,
`category` VARCHAR(40) NOT NULL,
`summary` VARCHAR(40) NOT NULL,
`content` VARCHAR(40) NOT NULL
);
How can forms be all reseted into empty after posting their data into (click "submit" and all forms are processed(stored) and delete out of form for user to type new one)? Thks for hepling me.
