AJAX data not loading?

S

svilkov872016-07-27 18:01:58

PHP

svilkov87, 2016-07-27 18:01:58

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>

and the 'ajax.php' handler file:

<?php

$name = $_POST['name'];
$mail = $_POST['name'];
$mess = $_POST['mess'];

if($_POST){
    echo $name."<br/>".$mail."<br/>".$mess;
}

?>

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

A

Andrey Dyrkov, 2016-07-27
@VIKINGVyksa

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() ?

N

nozzy, 2016-07-27
@nozzy

<form action="ajax.php" method="post" onsubmit="return false">

replace with
and add

$(".sub").submit (function(e){
    e.preventDefault();

as yurygolikov wrote

Y

yurygolikov, 2016-07-27
@yurygolikov

the submit button is now running a standard function
Do this:

$(".sub").submit (function(e){
    e.preventDefault();

G

g_s_e, 2016-07-27
@g_s_e

var name = $("#name").val();
var mail =  $("#mail").val();
var mess = $("#mess").val();