JavaScript query does not work correctly within a function, no results are shown

Question

UPDATE.

I've now added a screen shot of the parse data browser showing a row using customer number 21.

UPDATE.

Based on the comments below and the suggested answer I have updated my code. It functions without error but does not appear to have the desired result.

I see two issues.

Once, I don't see anything being stored in the cname or cnumber variables, they appear undefined.

Secondly, I wanted the result of the user typing in a number (searchnumber) into the input box that matches that stored (cnumber) in parse to then return this parse object to the user.

---

Whats wrong with this code? it runs in the browser without errors in Chrome dev tools, but does not appear to return the "CustomerObject" If I run it outside of the function and without the search button it will work, be it only return an empty object.

Is there a problem with my code structure?

HTML

  <input type="text" name="searchnumber" id="searchnumber" value="" placeholder="Customer Number"/>  
  <button type="submit" onclick = "search()" >Find</button>

JS

function search() {
    var CustomerObject = Parse.Object.extend("CustomerObject");
    var retrieve = new Parse.Query(CustomerObject);  
    retrieve.equalTo("customernumber", $('#searchnumber').val()); 
            retrieve.first({ 
                success: function(retrieveResults) 
            {

            }

        });
            var cname = retrieve.get("customername");  
            var cnumber = retrieve.get("customernumber");

      }; 

Answer 1

Inside the success function, do this:

var cname = retrieveResults.get("customername");
var cnumber = retrieveResults.get("customernumber");

You should rename retrieveResults to object or customerObject or something.

You're trying to get customername and number from the query, not the retrieved object.

Full code:

function search() {
    var CustomerObject = Parse.Object.extend("CustomerObject");
    var retrieve = new Parse.Query(CustomerObject);
    retrieve.equalTo("customernumber", $('#searchnumber').val());
    retrieve.first({
        success: function(customerObject) {
            var cname = customerObject.get("customername");
            var cnumber = customerObject.get("customernumber");
            ...
        }
    });
};