Why are updated element values not being passed?

Question

I currently check if an input/textarea/checkbox/select changes and if so then I want to initiate my function to search the database and update the 'results' div. Now this is what I have so far..

It works on change no problem, the only issue is now when I change a form item, it detects it but the new values are not passed to the .php file. Suggestions?

Note: I tried to use the $(this).serialize(); but it didn't work for me. I simply want to pass ALL of the specified form variables to the PHP file.

$(document).ready(function() { 

    $("select,:checkbox").change(function(){ inits(); });
    $("input,textarea").keystop(function(){ inits(); });

    a = "GET";
    b = "#recipeSearch";
    c = $(b).attr('action') + '?r';
    f = "#searchResults";

    function inits(){

        var values = {
            'term' : $("input#searchterm").val(),
            'photos' : $(b + " #requirephotos").val(),
            'prep' : $(b + " #preptime").val(),
            'cook' : $(b + " #cooktime").val()
        }

        console.log('Search Init');

        $.ajax({
            url: c,
            cache: false,
            dataType: 'json',
            data: values,  // $(b).serialize(); // this still didn't work
            success: function(response) {
                //decoded = JSON.stringify(response);

                if (response) {
                    $(f).html(response);
                }

                //$.each(r.items, function(i,data){} //usage later on 
            },
            error: function(e, jqxhr, settings, exception) {
                console.log('Error: ' + e.toString() + ' - ' + jqxhr);
            }
        });
    }

});

Any and all suggestions are appreciated. I don't have a jsfiddle for you since it uses another script for keystop.

Example JSON

{
"items": [
        "item 1",
        "item 2",
        "item 3",
        "item 4",
        "item 5"
        ]
}

you need to serialize the form, not `$(this)`. it should be `$('#id_of_form').serialize()` — Brian Glaz, Oct 26 '12 at 20:30
Try removing the `&` from `b`. `jQuery.ajax` adds this automatically when necessary (it checks whether the URL already contains `?` or not). The result is that you're sending `URL?r&&term=...`, which might not work properly. — Barmar, Oct 26 '12 at 21:10
@Barmar - I've made those changes, but now I'm receiving parsererror. — Braunson, Oct 26 '12 at 23:00
That sounds like the PHP script isn't returning proper JSON. — Barmar, Oct 26 '12 at 23:04
@Barmar It returns valid json with the correct headers (I had it commented out) BUT NOW the jQuery returns null. Ideas? — Braunson, Oct 26 '12 at 23:11

Braunson · Answer 1 · 2012-10-28T00:15:54.870

0

I've resolved this issue. Not sure what the issue was but it's been fixed now.

Edit The fix was.. I guess I could narrow it down to a server side issue. The php file I was retrieving from only provided information if the requesting file was on a whitelist, mine however was not, and adding it to the whitelist resolved the issue.

edited Oct 28 '12 at 00:15

answered Oct 27 '12 at 20:37

Braunson

717
2
12
36

Are there any more details you can provide, so that this answer could help people in the future with a similar issue? – Brad Larson Oct 27 '12 at 22:42
Hmm, I guess I could narrow it down to a server side issue. The php file I was retrieving from only provided information if the requesting file was on a whitelist, mine however was not, and adding it to the whitelist resolved the issue. – Braunson Oct 28 '12 at 00:15

Why are updated element values not being passed?

1 Answers1