Simple jQuery Ajax form with div creation upon data sent
Edit: Originally I had a simple form Ajax script that wasn't working, turns out it was an extra bracket somewhere.
I have changed my question to the following:
1.)What I'd like to know is that how can I create an extra div to appear every time a value is sent? Of course, without changing the whole content inside the container and also preserving previous divs that were already created by the same mechanism.
2.)I'm going to cleanse input on the server. What would I echo server-side? Just the sanitized data or the sanitized data inside a div aka <div>$sanitizeddata</div>?
Scroll to see the html visual of what I mean.
Note: I didn't want to start another question with the same code so I just edited my question accordingly after figuring out what was wrong with it. (My apologies to the previous repliers, but no one seemed to have caught the error! :P)
<script type="text/javascript">
$(document).ready(function()
{
$("#testform").submit(function(e)
开发者_C百科 {
$.post("1.php", $(this).serialize(),function(data)
{
$('.result').html(data);});
e.preventDefault();
});
});
</script>
<div id="container" class="result">
<div><p>Some content 1</p></div>
<div><p>Some content 2</p></div>
<div><p>Some content 3</p></div>
//A new DIV is created with callback data (sanitized input) every time something is submitted
by the form.
<div></div>
//A new DIV is created with callback data (sanitized input) every time something is
submitted by the form while preserving previous DIVs already created by Javascript.
<div></div>
<div>
<form id="testform" action="1.php" method="post">
Number: <input type="text" name="num" />
<input type="submit" value="Submit Comment" />
</form>
</div>
</div>
So it seems you want the page to work in either js enable or not.
Try this.
If I was you, I would rethink my design I would break the code up into separate files. This is really a spaghetti design.
<?php
if (array_key_exists('js', $_POST)) {
$js = $_POST['js'];
if (array_key_exists('num', $_POST)) {
$num = $_POST['num'];
echo "<div>$num</div>";
exit();
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<!-- <script type="text/javascript" src="./jquery.form.js"></script>-->
<script type="text/javascript">
$(document).ready(function() {
$("#testform").submit(function() {
var serialized = $(this).serialize() + '&js=1';
$.post("1.php", serialized, function(data) {
$('.result').append(data);
});
$('#number_input').val('');
return false;
});
});
</script>
</head>
<body>
<div class="result">
<?php
session_start();
if (array_key_exists('num', $_POST)) {
$numbers = array();
if(array_key_exists('numbers', $_SESSION)) {
$numbers = $_SESSION['numbers'];
}
$numbers[] = $_POST['num'];
foreach($numbers as $num) {
echo "<div>$num</div>";
}
$_SESSION['numbers'] = $numbers;
}
else {
$_SESSION['numbers'] = array();
}
?>
</div>
<div>
<form id="testform" action="1.php" method="post">
<label for="number_input">Number: </label><input id="number_input" type="text" name="num"/>
<input type="submit" value="Submit Comment"/>
</form>
</div>
</body>
</html>
You could try putting return false at the end of the function.
Please try with the code.
Make changes in your html of the button
<input type="button" value="Submit Comment" id="buttonID"/>
<script type="text/javascript">
$(document).ready(function() {
$('#buttonID').click(function() {
$.post('url.php?id=1', function(data) {
alert(data);//data will be your response from server.
});
});
});
</script>
Here we are going POST Method using Jquery. You can also find $.ajax() etc from http://jquery.com/ The button must be type input so the action will be at background. Pls try this
<script type="text/javascript">
$(document).ready(function(){
$("input:submit").click(function(){
$.ajax({
url :$("form").attr('action'),
type: "POST",
data:"id=1",
success : function(response){
$("#container").append("<div>"+response+"</div>");
}
})
return false;
})
});
</script>
if u need to work it when javascript is disabled. then u need to save the divisions created on the fly in some backend.If the conent is too short then u can try it saving in cookie
gud luck
加载中,请稍侯......
精彩评论