Search Form sub-category only populates after Submit and return to Form

[ChrisjChrisj]

With this basic Search Form when I bring up the page that has the Search Form and select Category, from the Search Form, my two choices show in the drop-down. When I select either one, and then select Sub-Category, that drop-down shows no choices (just “Sub-Category”). If I refresh the page, same result. But if I select “Submit” go to the results page, and then return to Search Form page, the Form works properly with all Categories and sub-categories available. If I refresh the page, the choices are still available. And, if I close the page, and then return, by retyping the url, no choices in sub-category again, until I submit and return. This same scenario in Chrome & IE. Any way to remedy this so, all choices are available without Submitting and returning first? Here’s the code:

<form method="get" action="../search.php" name="" />
<input id="keyword" name="keyword" value="SEARCH WORDS" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#000000';}" onclick="clickclear(this, 'Enter Search Words')" onblur="clickrecall(this,'Enter Search Words')" value="" />
<select size="1" name="channel" class="dropdown" />
<option value="">SELECT</option>
<option value="All">ALL</option>
<option value="1">Channel1</option>
<option value="2">Channel2</option>
</select>
<select size="1" name="sub_category" class="dropdown" />
<option value="All">Sub-Category</option>
</select>
<input type="submit" value="VIEW"/>
</td>
</form>

<script>
$(document).ready(function() {
$("select[name='channel']").change(function() {
var channel_id = $(this).val();

console.log(channel_id);

$("select[name='sub_category']").html("<option value='All'>Sub Category</option>");

$.ajax({
type: "POST",
url: "../ajax.php",
data: "channel_id="+channel_id,
dataType: 'json',
statusCode: {
200: function(data) {
for(i = 0; i < data.length; i ++) {
$("select[name='sub_category']").append("<option value='"+data[i]["sub_channel_id"]+"'>"+data[i]["sub_channel_name"]+"</option>");
}
}
}
});
});
});
</script>

Any help will be appreciated.

[ChrisjChrisj]

I looked at the Chrome dev tools console and I see this:

MLHttpRequest cannot load https://www…com/ajax.php.
esponse to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Origin ‘http://www…com’ is therefore not allowed access.

which, I’m guessing may be related to Search Form because of the /ajax.php reference.

Any ideas/remedy will be appreciated.

[Paul_Wilkins]

@ChrisjChrisj

Any ideas/remedy will be appreciated.

The other website needs to add a header that gives you permission to access their content.

For example:

Access-Control-Allow-Origin: *

Or more explicitly:

Access-Control-Allow-Origin: http://yourdomain.com

[ChrisjChrisj]

Thanks for your reply.
I don’t understand “the other website needs to add a header that gives you permission to access their content”.
This is just my one domain, I don’t understand “the other website”. Can you enlighten me please?

[Mittineague]

For security reasons, AJAX requests have a “same origin” policy.

It was my understanding that “same site” requests were “whitelisted” but apparently that is incorrect.

The keyword here is “prefighted”.

According to MDN certain conditions trigger a preflight check.

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

a request is preflighted if:

It uses methods other than GET, HEAD or POST. Also, if POST is used to send request data with a Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain, e.g. if the POST request sends an XML payload to the server using application/xml or text/xml, then the request is preflighted.

[ChrisjChrisj]

Thanks for your reply.
I appreciate it, but who is “the other”, the server?

[Paul_Wilkins]

@ChrisjChrisj

I don’t understand “the other website needs to add a header that gives you permission to access their content”.
This is just my one domain, I don’t understand “the other website”. Can you enlighten me please?

In that case, it will be easy for you to make the appropriate change, just add this header to the PHP script that the ajax request is getting information from:

 header("Access-Control-Allow-Origin: *");

[ChrisjChrisj]

Thanks.

Exactly how, like this?

<header("Access-Control-Allow-Origin: *");>

[Mittineague]

@ChrisjChrisj

Exactly how, like this?

I would be more likely to use the sites URL as the origin value myself.

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

The origin parameter specifies a URI that may access the resource. The browser must enforce this. For requests without credentials, the server may specify “*” as a wildcard, thereby allowing any origin to access the resource.

[Paul_Wilkins]

@ChrisjChrisj

Exactly how, like this?

No, exactly as the PHP code that I gave in my previous post. Put it in your ajax.php file.

The asterisk is just for testing purposes only. When it works, fine-tune it as recommended by @Mittineague to just your domain only.

[ChrisjChrisj]

Thank you