I don't have a lot of experience with AJAX calls, but my example seems straightforward (except that I'm not using a element) and it makes me wonder if I'm doing the call wrong, or if you just can't do an AJAX POST without a form.

My HTML for the button I'm using is this:

<button class="btn btn-primary btn-small" id='saveAsNewName' onclick=saveAsNewName()>Save As</button>

My JS:

function saveAsNewName(str, id) {
var values = {
        'str'       : str,
        'id'        : id,
};
$.ajax({
    url: "saveAsNewName.php",
    type: "POST",
    data: values,
    dataType: 'JSON',
    success: function(data){
        alert("success" + data);
    }
})
.done(function(data) {
    alert("success" + data);
})
.fail(function(data) {
    alert("failure" + data);
});
}

And, for now, my php is simply this for testing if this works:

echo json_encode($_POST['id']));

I'm getting the failure notice every time I click my button. Is there a specific workaround I need for not using a form, or am I mucking up the basic .ajax example?

Edit, to be clear: I'm using another set of jQuery to continually update teh arguments for saveAsNewName(). The result is a call like:

onclick="saveAsNewName("wheyjuice 555", "33541")"

as a result from this jQuery code:

$(document).on('keyup',"[class*=editSimNameField]", function() { 
    var newText = $(this).val(); var id = $(".loadWindow").val();       
    $("#saveAsNewName").attr('onclick', 'saveAsNewName(\"' + newText + '\", \"' + id + '\")'); 
}); 

I don't have a lot of experience with AJAX calls, but my example seems straightforward (except that I'm not using a element) and it makes me wonder if I'm doing the call wrong, or if you just can't do an AJAX POST without a form.

My HTML for the button I'm using is this:

<button class="btn btn-primary btn-small" id='saveAsNewName' onclick=saveAsNewName()>Save As</button>

My JS:

function saveAsNewName(str, id) {
var values = {
        'str'       : str,
        'id'        : id,
};
$.ajax({
    url: "saveAsNewName.php",
    type: "POST",
    data: values,
    dataType: 'JSON',
    success: function(data){
        alert("success" + data);
    }
})
.done(function(data) {
    alert("success" + data);
})
.fail(function(data) {
    alert("failure" + data);
});
}

And, for now, my php is simply this for testing if this works:

echo json_encode($_POST['id']));

I'm getting the failure notice every time I click my button. Is there a specific workaround I need for not using a form, or am I mucking up the basic .ajax example?

Edit, to be clear: I'm using another set of jQuery to continually update teh arguments for saveAsNewName(). The result is a call like:

onclick="saveAsNewName("wheyjuice 555", "33541")"

as a result from this jQuery code:

$(document).on('keyup',"[class*=editSimNameField]", function() { 
    var newText = $(this).val(); var id = $(".loadWindow").val();       
    $("#saveAsNewName").attr('onclick', 'saveAsNewName(\"' + newText + '\", \"' + id + '\")'); 
}); 

• javascript
• jquery
• ajax

• 4 Where is it getting the str and id info? – dcclassics Commented Jun 2, 2014 at 14:52
• added it to OP. Forgot that it's dynamically updated via jquery – bo_knows Commented Jun 2, 2014 at 15:04

2 Answers 2

You're not passing anything along to your saveAsNewName() function in the onclick, you're just running the function. Therefore, str and id are null values.

How about something like this, where you get the values from the elements by ID:

function saveAsNewName() {
    var values = {
            'str': document.getElementById('elem1').value,
            'id': document.getElementById('elem2').value
    };
    $.ajax({
        url: "saveAsNewName.php",
        type: "POST",
        data: values,
    });

    ...

}

Obviously, there are innumerable other ways to get the values.

Also, you can POST to a URL regardless of HTML markup, a form being present, etc.

Edit: Seeing your comment about updating the onclick attribute dynamically, I recommend you do 2 things that will allow you to solve this problem on your own. These notes are for Chrome, but will work similarly in Firefox via Firebug.

1) Use the console.log() function on values to verify that you're sending the data to your function that you think you're sending. E.g. console.log(values), then check the console in developer tools.

2) Open the developer tools and use the network tab to inspect the AJAX call. You can actually see the call happen in realtime and can inspect it to see what data was sent and what data was received.

Form values are not necessary, but your problem starts here:

onclick=saveAsNewName()

See, it's passing no values for id and str into the call. The argument array is empty, so you are going to have to find a way of passing them. One way to do this is a submit handler:

$('#myForm').submit(function() {
    var form = $(this);
    //So logic here
    var id = $('#id', form).val();
    var str = 'something';
    saveAsNewName(id, str);
    return false;
});

Another way to do it is simply add selectors inside of saveAsNewName that pull values for id and str from other parts of the document.