Answer the question
In order to leave comments, you need to log in
AJAX data not loading?
Hello!
Loading data:
<!doctype html>
<html lang="ru">
<head>
<style>
input, textarea{
display: block;
margin-bottom: 5px;
}
</style>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-1.11.0."></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
$(function(){
$(".sub").click(function(){
var name = document.getElementsByID("name");
var mail = document.getElementsByID("mail");
var mess = document.getElementsByID("mess");
$.ajax({
url: 'ajax.php',
type 'post',
data: {name: name, mail: mail, mess: mess},
success: function(data){
$("#data").html(data);
}
});
});
});
</script>
</head>
<body>
<form action="ajax.php" method="post" onsubmit="return false">
<input type="text" name="name" class="name" id="name" />
<input type="text" name="mail" class="mail" id="mail" />
<textarea name="mess" class="message" id="mess" cols="40" rows="7"></textarea>
<input type="submit" name="sub" class="sub"/>
</form>
<div id="data"></div>
</body>
</html>
<?php
$name = $_POST['name'];
$mail = $_POST['name'];
$mess = $_POST['mess'];
if($_POST){
echo $name."<br/>".$mail."<br/>".$mess;
}
?>
Answer the question
In order to leave comments, you need to log in
If you can't figure out what's wrong, debug the code. See what values are in variables and so on. Also use lint, then your editor will immediately swear at syntax errors. The getElementById() method searches for an ELEMENT by ID, but you have come up with some new method ( getElementsByID ) that looks for an element N by id. And we all know that the page must have unique identifiers. Browsers do not swear if there are many identical ids so as not to disappoint the developer :) And since you are using jQuery, why not use $('form').serialize() ?
<form action="ajax.php" method="post" onsubmit="return false">
$(".sub").submit (function(e){
e.preventDefault();
the submit button is now running a standard function
Do this:
$(".sub").submit (function(e){
e.preventDefault();
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question