5 Replies Latest reply on Dec 14, 2011 4:02 PM by maxwyss

    Importing HTML with Javascript


      Hi folks,


      I have multiple (but simple) HTML forms that need to be imported as they are. Basically, I want to avoid the work of editing each button's Javascript manually in Acrobat, so I have the form ready in HTML with some JavaScript. Each form button has an onClick event calling the function below. The form works well in a browser, but, unfortunately, when I try to import it, the Javascript embedded in the page header disappears and the buttons do not work as programmed.


      Is there anyway to import the HTML *WITH* the Javascript?


      Here is the embedded Javascript code (pretty simple):



      <script type="text/javascript">
      function DisplayCost(){

      var numPass = 0;
      var numTIDS = 0;
      var numExp = 0;
      var amtPass = 0;
      var amtTIDS = 0;
      var amtExp = 0;
      var amtTotal = 0;

      for(j=1; j <= 4; j++)
      tester = document.batch.elements["a" + j];
      exp_tester = document.batch.elements["b" + j];

      for( i = 0; i < tester.length; i++ ){
        if( tester[i].checked == true ){
      //   alert(tester[i].value)
         if(tester[i].value == "35") { numPass += 1; amtPass += parseInt(tester[i].value);
                  if (exp_tester.checked == true) { numExp += 1; amtExp += parseInt(exp_tester.value);}}
         if(tester[i].value == "55") { numTIDS += 1; amtTIDS += parseInt(tester[i].value);
      if (exp_tester.checked == true) { numExp += 1; amtExp += parseInt(exp_tester.value);}}
         if(tester[i].value == "0") {exp_tester.checked=false}



      if(document.getElementByName('numPass') != null) { document.getElementByName('numPass').value = numPass;
             document.getElementByName('amtPass').value = amtPass; }

      if(document.getElementByName('numTIDS') != null) { document.getElementByName('numTIDS').value = numTIDS;
             document.getElementByName('amtTIDS').value = amtTIDS;}

      document.getElementByName('numExp').value = numExp;
      document.getElementByName('amtExp').value = amtExp;
      document.getElementByName('amtTotal').value = amtPass + amtTIDS + amtExp;



      Any help wuld be much appreciated.




        • 1. Re: Importing HTML with Javascript
          Bernd Alheit Adobe Community Professional & MVP

          There are differences between Browser Javascript and Acrobat Javascript. Check the documentation.

          • 2. Re: Importing HTML with Javascript
            CodeChaser Level 1

            So what you are saying is that I cannot import simple Javascript (as above) from a webpage to PDF?!

            • 3. Re: Importing HTML with Javascript
              Dave Merchant MVP & Adobe Community Professional

              Acrobat JS is an API control engine designed to talk to PDF documents, forms and the user interface. It has no concept of the HTML document object model, so the functions you would use in a Web script are meaningless. There's no idea of "elements" for example.

              • 4. Re: Importing HTML with Javascript
                CodeChaser Level 1

                I guess my question should then be: can I import multiple buttons with onClick events that will call an Acrobat Javascript function that I will later paste into Acrobat's JS editor?


                My main goal is to avoid 1) naming the event button by button in Acrobat and 2) have one function that will work equally for the multiple forms I create.


                Many thanks for your prompt assistance.

                • 5. Re: Importing HTML with Javascript
                  maxwyss Level 4

                  As it has already been said, there are fundamental differences between HTML "documents" and PDF documents. This also applies to JavaScript. Acrobat JavaScript and web browser JavaScript have things in common, and that is called the "Core" (get Flanagan's JavaScript, the Definitve Guide, published by O'Reilly, and you will see very clearly what objects etc. are relevant, and what not. Also, the document object model in PDF and in HTML are fundamentally different. And the field events are fundamentally different as well (as there is no onClick event in PDF, but mouseUp is used for clicking.


                  What you can do, if you develop both, HTML forms and PDF forms, is to separate everything user interface-related from the raw (core) functions. The core functions can be used in either place, if their arguments are neutral, and you define them accordingly in your respective documents.


                  You also can create your HTML form, and then get it into Acrobat, using WebCapture. The fields will be created, as well as labels etc. You will nevertheless rename your fields, in order to make them usable. Adding JavaScript to the appropriate events will be rather simple and straightforward.


                  It would really be worthwile to have a closer look at the Acrobat JavaScript documentation (which is part of the Acrobat (X) SDK, downloadable from the Adobe website.


                  For heavy duty application, you might look at a rather high-end forms design tool, OneForm Plus by Amgraf, which does create PDF forms and HTML forms from the same document, and is pretty good when it comes to the look of the forms. It also creates back-end code which is used to process submitted data. It is then also possible to have hybrid workflows when data gets displayed in PDF, and in HTML in the subsequent step and vice versa.


                  Hope this can help.


                  Max Wyss.