Is it possible to execute ampscript or ssjs onchange via checkbox check/uncheck

Question

As I wrote in the question title I was just wondering if a block of ampscript & ssjs combined code can be execute on change via checkbox check/uncheck?

<input name="TopicID" type="checkbox" onchange="sub-unsub" value="Newsletter"
                                    %%[ IF @TopicID == "Koronavirus" THEN ]%% checked %%[ ENDIF ]%%>&nbsp;&nbsp;Novica1</label>

and I would like to call this code onChange()

%%[
SET @sub = "EmailAddress" 
SET @email = "EmailAddress"
SET @Listid = "ListID"
SET @ListStatus = "Active"
SET @listemailexist = Lookup("_ListSubscribers","EmailAddress","ListID", @Listid,"EmailAddress", @email,"Status", @ListStatus)
]%%

%%[if @listemailexist == @email AND @ListStatus == "Active" Then]%%
subscriber already exist
%%[ELSE]%%
<script runat="server">
Platform.Load("core","1.1.5"); 
var prox = new Script.Util.WSProxy();
var options = {SaveOptions: [{'PropertyName': '*', SaveAction: 'UpdateAdd'}]};

//getting values from AMPSCRIPT variables to SSJS variables
var email = Variable.GetValue("@email");
var subscriberkey = Variable.GetValue("@sub");

function AddToSub(obj) {
var props = { 
SubscriberKey: subscriberkey,
EmailAddress: email,
Lists: [{
ID: obj.listID,
Status: 'Active' // to unsub = "Unsubscribed" to subscribe = "Active"
}]
};
var data = prox.updateItem("Subscriber", props, options);
return data.Results[0].StatusCode;
}

var myPubLists = [
{mid:'MID', listID:'ListID'}
];

for (var i=0; i<myPubLists.length; i++) {
var result = AddToSub(myPubLists[i]);
Write("Subscriber has been added to the publication list");
}
</script>
%%[ENDIF]%%

Has anyone tried this before.

Tnx.

Answer 1

You can't execute neither SSJS nor Ampscript clientside.

My best advice to you would be to create an JSON Code Resource in Cloud Pages, populating it with your code. This code is executed when the Code Resource URL is called, which should be done from your onChange() function. You will be able to populate the JSON response with e.g. status of code execution.

In order to overcome CORS limitations, you should utilise a JSONP approach: You essentially make a GET request with a callback parameter:

(get) http://cloudpages.example.com/endpoint?callback=foo

Ampscript/SSJS will wrap the JSON reply in a function call to your callback, where you can handle it:

foo({"your": "json", here: true})