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

AJAX data not loading?

Loading data:

<!doctype html>
<html lang="ru">
        input, textarea{
            display: block;
            margin-bottom: 5px;
    <meta charset="UTF-8">
    <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>
    <script type="text/javascript">
                var name = document.getElementsByID("name");
                var mail = document.getElementsByID("mail");
                var mess = document.getElementsByID("mess");

                    url: 'ajax.php',
                    type 'post',
                    data: {name: name, mail: mail, mess: mess},
                    success: function(data){

<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"/>
<div id="data"></div>


and the 'ajax.php' handler file:

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

    echo $name."<br/>".$mail."<br/>".$mess;


Answer the question

In order to leave comments, you need to log in

4 answer(s)
Andrey Dyrkov, 2016-07-27

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

nozzy, 2016-07-27

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

replace with
and add
$(".sub").submit (function(e){

as yurygolikov wrote

yurygolikov, 2016-07-27

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

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

g_s_e, 2016-07-27

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question