Javascript console.log works but input value is undefined

Question

I'm having some trouble with a simple function that makes an ajax call to get the link for a specific category and then puts the value at an input.

My Ajax Call:

function GetCategoryInfo(){
var form  = document.getElementById('add-info');
var formData = new FormData(form);
formData.append('caller', 'Info');
$.ajax({ url: '../inc/call.php',
    enctype: 'multipart/form-data',
    processData: false,
    contentType: false,
    cache: false,
    data: formData,
    type: 'POST',
    success: function(output) {
        console.log(output);
        return output;
    }
});
}

My function:

$('#card_category').change(function(){
$('#card_slug').val(GetCategoryInfo() + "/" + GetNameInfo());
CheckPokemonSlug();
})

Please ignore function GetNameInfo() since its working very well. My problem occurs when the change select item happens. It always fill the input with "undefined/text from function GetNameInfo()"

The worst thing it that the console.log outputs the right information that should be in the input form.

Any suggestions on this? Since I call the isn't this supposed to work. Get's the information and then set it to input.

You've to understand the concept, read and read and read then you'll accomplish it. — Zakaria Acharki, Sep 25 '18 at 18:13

Serj Sagan · Answer 1 · 2019-01-15T17:15:03.743

1

Since this is an AJAX call, it is asynchronous, however, your selection is synchronously done. Therefore the function immediately returns an undefined, and only later returns the asynchronous value, but you are no longer listening to that value.

You could try assignment of your input text from where your console.log is, at that point, the call has already returned.

edited Jan 15 '19 at 17:15

answered Sep 25 '18 at 18:14

Serj Sagan

24,625
17
133
166

If the console log works in that point, the return ouput shouldn't work either?! – Tiago Sep 25 '18 at 18:15
Your return is irrelevant at that point, your function has already returned from when you called it to set your input text, also please don't down vote my answer, I am trying to help you and I am right, you're just not understanding – Serj Sagan Sep 25 '18 at 18:17
I didn't downvoted you. That would be maybe another user. So, what's the point? There's any way to check if the function has a value? Like wait until ajax call is completed? I'm completly lost and as I'm learning I really don't know where and how to search. – Tiago Sep 25 '18 at 18:19
Set your input value from where the console.log is – Serj Sagan Sep 25 '18 at 18:20
@Tiago: if(typeof != 'undefined') ... – Flash Thunder Sep 25 '18 at 18:24
@Tiago When you call `GetCategoryInfo()` it will perform an ajax request that will wait for the answer since it's an "asynchronous" method. when the ajax is waiting the `GetCategoryInfo()` is a "synchronous" method ant it will not wait it will return immediately when the result isn't yet ready that why it will return `undefined` – Zakaria Acharki Sep 25 '18 at 18:31
@SerjSagan that won't work since I need to join two different values. One comes from select (GetCategoryInfo) and another from an input (GetNameInfo). – Tiago Sep 25 '18 at 18:31
@ZakariaAcharki Thanks for your comment. I already noticed that when your first comment. My problem is, how can I wait until I have the result and to that? Thanks. – Tiago Sep 25 '18 at 18:32
2

So the answer is : the event should look like `$('#card_category').change(GetCategoryInfo);` and the callback should set the value like `success: function(output) { $('#card_slug').val(output + "/" + GetNameInfo());CheckPokemonSlug(); }` – Zakaria Acharki Sep 25 '18 at 18:33
@ZakariaAcharki Thanks. Sorry for this, but I'm learning and there are some concepts that are diving me crazy. I searched and searched and this makes totally sense right now! Thanks again for your time. – Tiago Sep 25 '18 at 18:41
1

Glad I could help brother, happy coding. – Zakaria Acharki Sep 25 '18 at 19:28

Javascript console.log works but input value is undefined

1 Answers1