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="enable Greyscale()">
<script language="javas cript">
greyscaleContro l('images/bandw.gif','ima ges/bandw.gif', true);
</script>
<span class="editboxa cttitle"><commo nweb: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_sm all.gif" style="cursor:p ointer" alt="Taupe" name="taupe_sma ll" id="taupe_small " onClick="enable Taupe();">

<!-- 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="enable Greyscale()">
<script language="javas cript">
greyscaleContro l('images/bandw.gif','ima ges/bandw.gif', true);
</script>
<span class="editboxa cttitle"><commo nweb: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_sm all.gif" style="cursor:p ointer" alt="Taupe" name="taupe_sma ll" id="taupe_small " onClick="enable Taupe();">

<!-- 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_6576 57657657? 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.undoDisabl ed = false;
this.updateCrop ping();
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.undoDisabl ed = false;
this.updateCrop ping();
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]

Update form field by ID?

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="Javasc ript:document.w rite.albumform. WrapColour.valu e+"taupe";"

I get an error that "document.write .albumform.Wrap Colour 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.getEle mentById(id);
box.value = value;
}

</script>

<input id="WrapColour " value="" onclick="set_va lue(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_WrapC olour_2030SINGL ECANVAS/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_sma ll.gif" style="cursor:p ointer" alt="Pink" name="pink_smal l" id="pink_small " />
<img src="images/canvas_colours/images/canvas_blue_sma ll.gif" style="cursor:p ointer" alt="Blue" name="blue_smal l" id="blue_small " />
<img src="images/canvas_colours/images/canvas_taupe_sm all.gif" style="cursor:p ointer" alt="taupe" name="taupe_sma ll" 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="javas cript">
function set_value(id, value) {

var box = document.getEle mentById('WrapC olour');

box.value = value;
}
</script>

The form field that is hidden is like this.

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

My images with that are clickable are like this.


<img src="images/canvas_colours/images/canvas_taupe_sm all.gif" onclick="set_va lue(WrapColour, 'taupe');" style="cursor:p ointer" /></td>
<img src="images/canvas_colours/images/canvas_pink_sma ll.gif" onclick="set_va lue(WrapColour, 'pink');" style="cursor:p ointer" />
<img src="images/canvas_colours/images/canvas_blue_sma ll.gif" onclick="set_va lue(WrapColour, 'blue');" style="cursor:p ointer" />

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_WrapC olour_2030SINGL ECANVAS/0433-002" value="" id="att_WrapCol our_2030SINGLEC ANVAS/0433-002"/>

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

Is this possible?