Question

So i am following a tutorial here, and i have this jquery code in order to process some data.

For the moment i have this form only and just one input named content:

<script type="text/javascript" >
$(function () {
    $(".comment_button").click(function () {

        var test = $("#content").val();
        var dataString = 'content=' + test;

        if (test == '') {
            alert("Please Enter Some Text");
        } else {
            $("#flash").show();
            $("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');

            $.ajax({
                type: "POST",
                url: "demo_insert.php",
                data: dataString,
                cache: false,
                success: function (html) {
                    $("#display").after(html);
                    document.getElementById('content').value = '';
                    document.getElementById('content').focus();
                    $("#flash").hide();
                }
            });
        }
        return false;
    });
});
</script>

Now, i have another input named id..where should i insert it?

I tried something like:

var test = $("#id").val();
var dataString = 'id='+ id;

It didn’t work..So, i know this might be elementary but i never had to deal with ajax..
Thanks..

Answer 1

Pass the data as an object literal:

var test = $("#content").val();
var id = $("#id").val();
var dataObject = { content: test, id: id };

$.ajax({
    type: "POST",
    url: "demo_insert.php",
    data: dataObject,
    //etc...

Option 2 would be to serialize the form data:

<form>
    <div><input type="text" name="content" value="1" id="content" /></div>
    <div><input type="text" name="id" value="2" id="id" /></div>
</form>

$(function(){
    alert( $('form').serialize() ); //content=1&id=2
});