Update form field by ID?

[cmcdermo]

Ok my first post here so sorry if i mess something up.

I have to edit a page that uses some javascript and not sure really.

At the moment a user clicks on a button saying "black and white" and this shows an image on the page in black and white, it also update a hidden form field with the value "BW".

This works fine.

here is the code for that.


<!-- this shows the user the button to click -->

<div class="effect" onClick="enableGreyscale()">
<script language="javascript">
greyscaleControl('images/bandw.gif','images/bandw.gif', true);
</script>
<span class="editboxacttitle"><commonweb:resource resid="EFFECTS_BANDW"/></span>
</div>

<!-- end-->

<!-- the js funtion -->

function enableGreyscale()
{
selectedproduct.att_effect = "BW";
selectedproduct.update();
draw();
}

<!-- end-->

So what i need to do now is give the users the functionality to choose a border colour.

This is not to redraw any image on the page, all that happens is a user clicks on a colour and i want it to update a hidden form field with the value of the colour.

This is what i tried with my limited knowledge.


<!-- this shows the user the button to click -->

<img src="images/canvas_colours/images/canvas_taupe_small.gif" style="cursor:pointer" alt="Taupe" name="taupe_small" id="taupe_small" onClick="enableTaupe();">

<!-- end -->

<!-- the js function -->

function enableTaupe()
{
selectedproduct.att_wrapcolour = "Taupe";
selectedproduct.update();
draw();
}

<!-- end -->



This doesn't work, the value in the form field just says value=""

Any help would be great!

[merseyside]

Ok my first post here so sorry if i mess something up.

I have to edit a page that uses some javascript and not sure really.

At the moment a user clicks on a button saying "black and white" and this shows an image on the page in black and white, it also update a hidden form field with the value "BW".

This works fine.

here is the code for that.


<!-- this shows the user the button to click -->

<div class="effect" onClick="enableGreyscale()">
<script language="javascript">
greyscaleControl('images/bandw.gif','images/bandw.gif', true);
</script>
<span class="editboxacttitle"><commonweb:resource resid="EFFECTS_BANDW"/></span>
</div>

<!-- end-->

<!-- the js funtion -->

function enableGreyscale()
{
selectedproduct.att_effect = "BW";
selectedproduct.update();
draw();
}

<!-- end-->

So what i need to do now is give the users the functionality to choose a border colour.

This is not to redraw any image on the page, all that happens is a user clicks on a colour and i want it to update a hidden form field with the value of the colour.

This is what i tried with my limited knowledge.


<!-- this shows the user the button to click -->

<img src="images/canvas_colours/images/canvas_taupe_small.gif" style="cursor:pointer" alt="Taupe" name="taupe_small" id="taupe_small" onClick="enableTaupe();">

<!-- end -->

<!-- the js function -->

function enableTaupe()
{
selectedproduct.att_wrapcolour = "Taupe";
selectedproduct.update();
draw();
}

<!-- end -->



This doesn't work, the value in the form field just says value=""

Any help would be great!

Is selectedproduct and object created in JavaScript? If so, does it have a property called att_wrapcolour?

[cmcdermo]

Yes it is, it usually has a order number at the end so it looks like

att_wrapcolour_657657657657

[merseyside]

Yes it is, it usually has a order number at the end so it looks like

att_wrapcolour_657657657657

Would att_effect also look like att_effect_657657657657? Where is the order number stored and is it available to the update() function?

[cmcdermo]

It is stored in the form (hidden).

Is it available to the update? what update?

[merseyside]

It is stored in the form (hidden).

Is it available to the update? what update?

The update method of selectedproduct

function enableGreyscale()
{
   selectedproduct.att_effect = "BW";
   selectedproduct.update();
   draw();
}
 

Looking at this function and taking the assumption that selectedproduct.att_effect would follow selectedproduct.att_effect_[order number] then the update() method must be doing something to selectedproduct.att_effect_[order number]? The draw() method refreshing the page somehow?

[cmcdermo]

ah this is what update does.

function update()
{
this.undoDisabled = false;
this.updateCropping();
this.updateZoom();
}

I don't need it to do this, all i want is when the users clicks on enabletaupe that the hidden form field att_wrapcolor value gets updated.

Sorry i'm not very good at this!

[merseyside]

ah this is what update does.

function update()
{
this.undoDisabled = false;
this.updateCropping();
this.updateZoom();
}

I don't need it to do this, all i want is when the users clicks on enabletaupe that the hidden form field att_wrapcolor value gets updated.

Sorry i'm not very good at this!

OK. Bearing in mind JavaScripts limitations with object-orientation. As I understand it, att_effect and att_wrapcolour should both be properties of the object selectedproduct, update(), updateCropping(), updateZoom() are methods of the object selectedproduct. On clicking a link/button they should both be updated using the code as you've described in enableGreyscale() and enableTaupe().

You mention hidden fields on the form, what are their names? Is it

<input type="hidden" name="att_effect" value="" />
or
input type="hidden" name="att_effect_[ordernum]" value="" />
 

Have you seen any code that looks anything (not exactly) like

document.formname.att_effect.value = ...

[cmcdermo]

So i'm thinking can i do something like. . . . .

function enableTaupe()
{
selectedproduct.att_Wrapcolour = "Taupe";
document.write.albumform.( 'att_wrapcolour_'+productcode )
selectedproduct.update();
draw();
}

[cmcdermo]

Hello,

I have a form field with an ID of WrapColour.

I am trying to do an "onclick" so when the user clicks it updates the value of the form field.

This is what I have tried

onclick="javascript:document.write.albumform.WrapC olour.value+"taupe";"

I get an error that "document.write.albumform.WrapColour is null or not an object".

The form field WrapColour has an ID and a value so I'm stuck.

Any help would be great.

Thanks.

[gits]

hi ...

i hope i didn't misunderstand your problem ... try to play with the following:

[HTML]
<script>

// demonstrates how to use getElementById and setting a value (you may pass
// 'this' to the function and set the value directly (this would be the
// object itself) so the function would be:
// function(obj, val) { obj.value = value; }

function set_value(id, value) {
var box = document.getElementById(id);
box.value = value;
}

</script>

<input id="WrapColour" value="" onclick="set_value(this.id, 'taupe');"/>
[/HTML]

hope it helps ... and

kind regards

[cmcdermo]

Thanks for your time and your reply.

Ok you have to forgive my lack of knowledge but this is driving me a little crazy.

Ok so in my form i have a field called

<input type="hidden" id="WrapColour" name="att_WrapColour_2030SINGLECANVAS/0433-002" value=""/>

The numbers and text value after the att_WrapColour_ is dynamic.

I then have a various buttons that represent a colour, so when a user clicks the colour i want it to update the WrapColour hidden form field.

<img src="images/canvas_colours/images/canvas_pink_small.gif" style="cursor:pointer" alt="Pink" name="pink_small" id="pink_small" />
<img src="images/canvas_colours/images/canvas_blue_small.gif" style="cursor:pointer" alt="Blue" name="blue_small" id="blue_small" />
<img src="images/canvas_colours/images/canvas_taupe_small.gif" style="cursor:pointer" alt="taupe" name="taupe_small" id="taupe_small" />

So I want to put the onclick on the images, sorry i'm just a little confused and can't see the bigger picture.

Thanks.

[gits]

ok ... let me try to understand: you want to call a function to set the value of your hidden field depending on the button you clicked?

you may use the function i provided above ... id has to be 'WrappedColour' instead of this.id ... and you must call the function through onclick from your button ... where you have to provide the value for your hidden-field to set as the second parameter (assuming you use the provided code) ... best of luck with it ... all you need is there ... try it ;)

kind regards ...

[cmcdermo]

Ok I have now it set up like this.

<script language="javascript">
function set_value(id, value) {

var box = document.getElementById('WrapColour');

box.value = value;
}
</script>

The form field that is hidden is like this.

<input type="hidden" id="WrapColour" name="att_WrapColour_${product.code}" value="white"/>

My images with that are clickable are like this.


<img src="images/canvas_colours/images/canvas_taupe_small.gif" onclick="set_value(WrapColour, 'taupe');" style="cursor:pointer" /></td>
<img src="images/canvas_colours/images/canvas_pink_small.gif" onclick="set_value(WrapColour, 'pink');" style="cursor:pointer" />
<img src="images/canvas_colours/images/canvas_blue_small.gif" onclick="set_value(WrapColour, 'blue');" style="cursor:pointer" />

When I click a colour i don't get an error, how do i test if the hidden field has been updated?

Thanks for your help.

[cmcdermo]

Quick question.

It would be easier for me if I could update the hidden field

<input type="hidden" name="att_WrapColour_2030SINGLECANVAS/0433-002" value="" id="att_WrapColour_2030SINGLECANVAS/0433-002"/>

But as the values after WrapColour_ is dynamic I'm not sure how to call it.

Is this possible?

[cmcdermo]

Ah ok i have now changed it to this.

<script language="javascript">
function set_value(id, value) {

var box = document.getElementById('att_WrapColour_${product. code}');

box.value = value;

}
</script>

And the onclick to this

onclick="set_value(Att_WrapColour_${product.code}, 'taupe');"

When viewing the source they both look like this.

<script language="javascript">

function set_value(id, value) {

var box = document.getElementById('Att_WrapColour_4060SINGLE CANVAS/0433-006');

box.value = value;

}

</script>


onclick="set_value(Att_WrapColour_4060SINGLECANVAS/0433-006, 'taupe');"

When i click on the image i get

Att_WrapColour_4060SINGLECANVAS is undefined, it seems to be missing the value after the slash. /0433-006

??

[gits]

Ah ok i have now changed it to this.
...
onclick="set_value(Att_WrapColour_4060SINGLECANVAS/0433-006, 'taupe');"
...

ok ... you have to pass the id as a primitive string-value that means put it in single quotes in the above statement. and use id in the function until you pass it and the function receives it (leave it as it was first - the one that i provided ;) )... ok? it should work ;)

kind regards ...

ps: the error says that you pass an undefined value to the function ... this is due to the fact that JavaScript interpretes your unquoted id as a variable to pass ...

[gits]

...
When I click a colour i don't get an error, how do i test if the hidden field has been updated?
...

you may simply change type from 'hidden' to 'text' ... and you will see the set value within the textbox. the input-elements have the same behaviour and the 'hidden' is only an 'undisplayed' textbox ... you may also ask the field for its value after updating it:

// use a onclick or whatever you want to call a function like that:
function get_value(id) {
    var hidden_field = document.getElementById(id);
    alert(hidden_field.value);
}
 

you have to pass the correct id (your WrapColour-id) as string and you should get a notify-box with the value of your hidden field ...

kind regards ...