User_coder
User_coder

Reputation: 516

Failing to send via ajax

I have searched around but I can't find what is going wrong with my script. I am expecting to see the content posted both to the MySQL database and into my div .PostedList, however when I submit I get nothing, the page content does not change at all (the callback does not seem to be executed).

JavaScript/jQuery

$(function () {
    $(".button").click(function () {

        var one = $("#one").val();
        var two = $("#two").val();
        var three = $("#three").val();

        var content = 'one' + 'two' + 'three';

        if (content == '') {
            alert("Fields Missing");
        } else {

            $.ajax({
                type: "POST",
                url: "insert.php",
                data: content,
                cache: false,
                success: function (html) {

                    $(content).hide().prependTo('.PostedList').fadeIn("fast");

                    document.getElementById('one', 'two', 'three').value = '';
                    document.getElementById('name', 'two', 'three').focus();

                }
            });
        }
        return false;
    });
});

HTML

<form method="post">
<input type="text" id="one"><br />
<textarea type="text" id="two"/></textarea><br />
<input type="radio" id="three" value="white" />
<input type="radio" id="three" value="black" />
<p> <input class="button" type="submit" value="Post" /></p>
</form>

Upvotes: 0

Views: 49

Answers (1)

Zevi Sternlicht
Zevi Sternlicht

Reputation: 5399

document.getElementById only takes one ID value, not several like a jQuery selector

Swap

document.getElementById('one', 'two', 'three').value = '';
document.getElementById('name', 'two', 'three').focus();

for

$('#one', '#two', '#three').val('');
$('#choose_one_id').focus(); // Only one field can have focus at a time!

Addtionally, You probably want to change

var content = 'one' + 'two' + 'three';

to

var content = one + two + three;

Upvotes: 2

Related Questions