How to pass data to JS from a submit button in a form using Sightly | Community
Skip to main content
preenan98273656
preenan98273656
July 19, 2017
Solved

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

  • July 19, 2017
  • 6 replies
  • 3639 views

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>

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by zeeshanKhan0786

    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

    6 replies

    zeeshanKhan0786
    zeeshanKhan0786Accepted solution
    Level 5
    July 19, 2017

    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
    preenan98273656Author
    July 19, 2017

    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
    Techaspect_Solu
    Level 7
    July 19, 2017

    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
      zeeshanKhan0786
      Level 5
      July 19, 2017

      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
      zeeshanKhan0786
      Level 5
      July 19, 2017

      and get the value in js like this

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

      here local is getting value from sightly.

      preenan98273656
      preenan98273656Author
      July 19, 2017

      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?

      Terms & ConditionsAccessibility statement

      Loading footer...