How to pass data to JS from a submit button in a form using Sightly

[preenan98273656]

I have a simple form with a submit button and previously I was using JSP page to write a script tag and execute a JS function. How to convert this to a Sightly page and execute this script? I need to pass data only on click of the submit button and also retrieve data.

Below is the code,

<script>

$(document).ready(function() {

    $('body').hide().fadeIn(5000);

$('#submit').click(function() {

    var failure = function(err) {

             alert("Unable to retrive data "+err);

   };

    //Get the user-defined values to persist in the database

    var myFirst= $('#first').val() ;

    var myLast= $('#last').val() ;

    var myDescription= $('#description').val() ;

    var myAddress= $('#address').val() ;

    var url = location.pathname.replace(".html", "/_jcr_content.persist.json") + "?first="+ myFirst +"&last="+myLast +"&desc="+myDescription +"&phone="+myAddress;

    $.ajax(url, {

        dataType: "text",

        success: function(rawData, status, xhr) {

            var data;

            try {

                data = $.parseJSON(rawData);

                //Set the fields in the forum

                $('#custId').val(data.pk);

             } catch(err) {

                failure(err);

            }

        },

        error: function(xhr, status, err) {

            failure(err);

        }

    });

  });

}); // end ready

</script>

[zeeshanKhan0786 · Accepted solution]

Hi preena,

you have to create clientLib and create your js file and put your code inside

$(function(){

//your js code here

});

and include that clientLib inside your component or page.

How to create ClientLib :AEM Client Libraries explained by example

Thanks

[preenan98273656]

Hi Zeeshank,

How do we pass values to the JS from HTL using clientlib? I have seen this example before, but haven't found a way to pass values or retrieve.

And how is it different from using HTL Javascript Use API?

[Techaspect_Solu]

Hi Preenan,

In Sightly, you can send values from a form to a helper script using JavaScript Use-API and retrieve the form values using "properties.get(<propertyName>, "");"

Unlike using script tag in JSPs, Sightly Executes these helper JS at server side.

Please use the following sample code for further understanding in JavaScript use-API:
http://adobeaemclub.com/javascript-use-api-with-a-simple-component-in-sightly/

Thanks,
Techaspect Solutions.
http://www.techaspect.com/

[zeeshanKhan0786]

Hi

  <script type="text/javascript">

    var locale = "${i18nObj.locale @ context='scriptString'}"

</script>

In your .html page you can pass the value of sightly by using context='scriptString'.like above example

If you want to get the value you can make the javascript variable to be global and acess that value in Javascript.

[zeeshanKhan0786]

and get the value in js like this

                url:"/bin/message?message="+message+"&locale="+locale,

here local is getting value from sightly.

[preenan98273656]

Hi!

I got some part working here. Just want to add one condition while passing value to JS.

Can you show me how to pass the value to Javascript file from HTL only when the submit button is clicked.

Earlier while using JSP page, I had given the condition like below,

$('#submit').click(function() {

//random code

}

How do I do the same in HTL or write this in JS page when using Use API?