How to pass HTML form value to JSX variable

Report · Jan 09, 2016

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

Report · Jan 10, 2016

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

onClickButton("fill_layer",yourColorValue);

Report · Jan 10, 2016

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

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

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

Report · Jan 10, 2016

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.

Report · Jan 10, 2016

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!

Report · Jan 10, 2016

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;

}

Report · Jan 10, 2016

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!

Report · Jan 10, 2016

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?

Report · Jan 10, 2016

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!

Report · Jan 11, 2016

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/

Report · Jan 12, 2016

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:

<br>

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:

<br>

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

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?!?

Report · Jan 13, 2016

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)

Report · Jan 13, 2016

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.

How to pass HTML form value to JSX variable

Explore related tutorials & articles