Is it possible to pass a variable from Javascript to AMP Script or SSJS? The reason is I need to use Javascript libraries to generate a variable which I need to use in SSJS to make an API call.
Add a comment
|
1 Answer
Common question, likely a duplicate. But anyway:
- Ampscript is server-side.
- Server-sided JavaScript is server-side.
vs.
- "normal" Javascript is client-side.
Server-side means, in plain terms:
To execute the code, the page needs to (re-)load. The client (frontend) never gets to see or change the code. Only the server serving the page interpreted it and "that ship has sailed" by the time you / a user sees the final page.
Client-side means:
The code can execute after page load (e.g. on click). The client also can see or tamper with the code. Bad for API calls that rely on secret credentials.
So: your API call, as you say, needs to be server-side.
But:
Can something that happens after page load (client side script) manipulate other code that has already been executed earlier (server side script)?
No. Just "order of execution"-wise, it cannot work.
What you need to do is:
Send the result of your client-side javascript to a page that loads and executes serverside script like AMPScript/ SSJS on load. That page can send the API call.
This can be a separate Page (typically a handler page that you can set up as code resource - costs no supermessage) or your original page, but then you'll need to set your page up so that it send the data back to the page itself.
A nice "best of both worlds" approach (don't make the user leave the page, but send the data somewhere else for server-side handling) is AJAX.
I keep reusing this code bit for the frontend (which I've stolen somewhere else - appreciated, unknown contributor). It relies on a jquery library for the AJAX call. Your handler / backend you'll of course need to create separately using AMPScript / SSJS.
<html>
<head>
<title></title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<form id='form1'>
<div><input type='text' name='name' placeholder='Name' /></div>
<div><input type='text' name='email' placeholder='Email' /></div>
<div><input type='text' name='number' placeholder='Mobile Number' /></div>
<div><input type='submit' value='Submit' /></div>
</form>
<div id='response'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js "></script>
<script>
$(document).ready(function(){
$('#form1').submit(function(){
// show that something is loading
$('#response').html("<b>Loading response...</b>");
// Call ajax for pass data to other place
$.ajax({
type: 'POST',
url: 'YOURHANDLERCLOUDPAGEURLHERE',
data: $(this).serialize() // form values
}).done(function(data){ // executed when response is returned
// show the response
$('#response').html(data);
}).fail(function() { // executed when post failed
alert( "Submission failed" );
});
// to prevent page refresh
return false;
});
});
</script>
</body>
</html>
answered Mar 30, 2023 at 10:45
-
thanks for sharing the snippet it is very useful! Commented Mar 30, 2023 at 12:15