12 Replies Latest reply on Jan 13, 2016 6:19 AM by Chuck Uebele

    How to pass HTML form value to JSX variable

    photogyulai Level 1

      Hey Guys!

       

      Im trying to fill a layer with a HEX color... and let the user set the color in the panel in a html form....

      I tried many different settings but i miss something.... (im a rookie extendscripter with artist background :-)

       

      So this is the index.html :

      <form>
             
                <input name="acolor"  type="text"  id="colorfield" value="" size="5" maxlength="6" />
               <br>
            
              <input type="submit"  value="GoGo" onclick="fillwithcolor();"/>
            </form>
            
      <script>
        function fillwithcolor() {
        var colorvalue = document.getElementsByName("acolor");   //i tried also with and without this line
                          onClickButton('fill_layer');             
                           }
        </script>
      

       

       


      And the JSX:

      $._ext_fill_layer={
          run : function() {
      // Create a new art layer at the top of the current document
      var layerRef = app.activeDocument.artLayers.add();
      
      // Fill with hex color
      //var colorvalue = document.getElementsByName("acolor").value;  //i tried also with and without this line
      //var colorvalue = document.getElementsById("colorfield").value;    //i tried also  with and without this line
      var color1 = new SolidColor();
      //var colorvalue = ("31e481");
      color1.rgb.hexValue = colorvalue;
      app.activeDocument.selection.fill(color1);
          },
      };
      
      
      

       

       

      The "filllayer" function is working: i get a new layer on the top, and if i set a define HEX color in the !JSX!  than it fill the layer with it....

      but from the html form.... no clue

       

      I tried many version the above codes

       

      Any help would be appreciated!!  (please examples.... pleaaaasssee!!! :-)

       

      Thanks

       

      Ben

        • 1. Re: How to pass HTML form value to JSX variable
          Chuck Uebele Adobe Community Professional & MVP

          I believe you need to pass the color value from your js file to your jsx file. Maybe:

           

          onClickButton("fill_layer",yourColorValue); 

          • 2. Re: How to pass HTML form value to JSX variable
            photogyulai Level 1

            Thanks Chuck.... no luck with this yet:

            I adjusted the js part of the file like this/like you sad:

             

            <script>

              function fill_layer() {

              var colorvalue = document.getElementsByName("acolor").value;

                                onClickButton("fill_hex_layer",colorvalue);            

                                 }

              </script>

             

            i also tried different setting... no luck :-)
            but thanks!

             

            please let me know if you have anything else in Your sleves! :-)

             

            Ben

            • 3. Re: How to pass HTML form value to JSX variable
              Chuck Uebele Adobe Community Professional & MVP

              Just to be clear, you are tying to create an extension panel, where the user can select a color in the extension panel via html? If this is the case, you need to take that value that was selected from the input and pass that to your js file. From there, the js file passes it to the jsx file. I believe the value has to be a string.

              • 4. Re: How to pass HTML form value to JSX variable
                photogyulai Level 1

                Yes You are absolutley right!!  Extension panel >> html form >> input hex color >> press a button >> create new layer and fill it with the color...

                 

                could You provide any example... what to put where?! where to put what?!

                 

                i started to code it but there are to many possibilities ... as i said >> im pretty rookie :-)

                thank You!

                • 5. Re: How to pass HTML form value to JSX variable
                  Chuck Uebele Adobe Community Professional & MVP

                  I'm pretty green at this too. Your function in your jsx file has to have a value to receive the value from the js file. so you need something like

                   

                  jsx:

                  function (theColorValue){

                  //your code here

                  color1.rgb.hexValue = theColorValue; 

                  }

                  • 6. Re: How to pass HTML form value to JSX variable
                    photogyulai Level 1

                    thanks!! Chuck... i have tried 1000 variations.... none of tham had work...

                     

                    i even tried Davide's version:

                    HTML Panels Tips: #4 passing Objects from HTML to JSX | Photoshop, etc.

                     

                    But i guess i slighttly have a different html and js and jsx  connections...

                    i have multiple jsx files.... not only one hostscript.jsx...

                     

                    Any thoughts anybody?!? Maybe Sir Davide hear my call for help :-)

                     

                    My Best for You Guys!

                    • 7. Re: How to pass HTML form value to JSX variable
                      Chuck Uebele Adobe Community Professional & MVP

                      Is there a reason you have multiple jsx files? Seems like it would be simpler just to have one, with all the functions in it. I did notice that your js file is different than how I call my jsx file. I use a structure like Davide's example using:

                       

                      csInterface.evalScript("functionName", functionCall)

                       

                      Hay, DBarranca, got any ideas?

                      • 8. Re: How to pass HTML form value to JSX variable
                        photogyulai Level 1

                        Yes i have a reason.... i (will) have for this project ~10buttons each of them is different function. And each of them is ~1000lines of codes. :-)

                         

                        in one jsx >> 10,000.- lines... and when You want just replace one or two line  :-DD  (it was a nightmare)

                         

                        that is...
                        still my best!

                        • 9. Re: How to pass HTML form value to JSX variable
                          DBarranca Level 4

                          Hi,

                          I'm sorry but apparently I've issues on the email account I use for the forum, so I didn't receive the notification.

                          A problem that I see here is that there's no CSInterface in photogyulai's code - am I missing it?

                           

                          Say that you have an HTML (used "id" instead of "name"):

                           

                          <input id="acolor"  type="text"  id="colorfield" value="" size="5" maxlength="6" />  
                          <br>    
                          <input type="submit"  value="GoGo" onclick="fillwithcolor();"/>  
                          

                           

                          Then your JS:

                           

                          var csInterface = new CSInterface();
                          function fillwithcolor() {
                           // metElementById, not getElementsById
                            var col = document.getElementById("acolor").value); 
                            // Mind the quotes
                            csInterface.evalScript("fill_layer('" + col + "')");
                          }
                          

                           

                          Then your JSX:

                           

                          function fill_layer(col) {
                           //...
                          }
                          

                           

                          Hope this helps!

                           

                          Davide Barranca

                          ---

                          http://htmlpanelsbook.com/

                          • 10. Re: How to pass HTML form value to JSX variable
                            photogyulai Level 1

                            first of all: Thank You, Booth of You!!!

                             

                            still not working... im a bit confused >> maybe it is the multiple jsx....  ?!?!

                             

                             

                            If i call a function like this:

                            ///////////////////////  Start Version Number One ////////////////////////////////////////////////////////////

                            HTML:

                            <input id="acolor"  type="text" value="" size="5" maxlength="6" />   

                            <br>

                            <input type="submit"  value="GoGo" onclick="onClickButton('fill_hex_layer')"/>

                                

                             

                            JS:

                            put nothing extra to the js

                             

                            JSX:

                            $._ext_fill_hex_layer={

                                run : function(col) {                             //also tried:run : function(){

                             

                            // Create a new art layer at the top of the current document

                            var layerRef = app.activeDocument.artLayers.add();

                             

                            // Fill with hex color

                            var color1 = new SolidColor(); 

                            color1.rgb.hexValue = col;

                            app.activeDocument.selection.fill(color1);

                                },

                            };

                            than it is ~working (except of the fill hex part), but the code in the jsx are executed

                            ///////////////////////  End Version Number One ////////////////////////////////////////////////////////////





                            but if i put it like this

                            ///////////////////////  Start Version TWO ////////////////////////////////////////////////////////////

                            HTML:

                            <input id="acolor"  type="text" value="" size="5" maxlength="6" />   

                            <br>     

                            <input type="submit"  value="GoGo" onclick="onClickButton('fillwithcolor')"/>
                            //i also tried: 

                            <input type="submit"  value="GoGo" onclick="fillwithcolor();"/>



                             

                            JS:    >>      ext.js file of course linked in the html

                            var csInterface = new CSInterface(); 

                            function fillwithcolor() { 

                              var col = document.getElementById("acolor").value;  

                              // Mind the quotes 

                              csInterface.evalScript("fill_hex_layer('" + col + "')"); 

                             

                            JSX:

                            $._ext_fill_hex_layer={

                                run : function(col) {    //also tried:run : function(){

                             

                            //Same as version number ONE

                             

                                },

                            };

                            than it didnt work.... did not execute any simple code of the, in the jsx.....

                            ///////////////////////  End Version TWO ////////////////////////////////////////////////////////////

                             

                            Itried to link every file everywhere, and many different options, no luck.... im pretty sire im missing something important...
                            Any thoughts?!?

                            • 11. Re: How to pass HTML form value to JSX variable
                              Chuck Uebele Adobe Community Professional & MVP

                              I would try changing your jsx file. Instead of these lines:

                               

                              $._ext_fill_hex_layer={
                                  run : function(col) {    //also tried:run : function(){
                              

                               

                              Use this:

                               

                              function fill_hex_layer(col)
                              
                              • 12. Re: How to pass HTML form value to JSX variable
                                Chuck Uebele Adobe Community Professional & MVP

                                I also think that the multiple jsx files might be an issue. You did mention that they were very big, but you can still put each in function the when working on them, you can expand or collapse the ones you're working on, to make it easier to edit.