Re : Clear text button inside Input Widget

Re : Clear text button inside Input Widget

  
Hi,

Is there any built in feature for input widget, to add button which can clear the content of input widget?

Please refer the link for example,
http://jsbin.com/exizep


Thanks
Sagar Nannaware
Hello Sagar Nannaware,

You can perform the feature you're asking for eample using logic, where you can have an action that clears the text field when you click a button and then refresh the input field.
Other way is to use the magic and simplicity of jQuery, adding a button/image/div....etc.. where you can add the following extended property to add an onclick behavior to that event:

       onclick="$('#" + <your element ID> + "').val('');"

Hope this helps.

Best Regards,
Gonçalo Martins
Hi Sagar,

Here is a sample how to do it.
I just made it based on the sample you linked ...using the same sprite image from stackoverflow (because I had no tool here to cut the sprite keeping the transparency). You should get a better image if you plan to actually use it.


There's 2 versions of the solution on my eSpace:
In the "InlineSolution" screen its a how you can do it for a single input. This one uses very little javascript.

Then the "ReusableSolution" screen + "InputClearWidget" block. That shows how to implement it on a webblock so you can use it in any input you want just by reusing the webblock. It's a bit more complex solution if you want to use that pattern multiple times, but uses a bit more complex javascript inside (not that you actually need to edit it anyway :) ).


Regards,
João Rosado
its simple, just clear the variable of input widget and use ajax refersh of input widget.

balu
Thanks :)

João Rosado wrote:
Hi Sagar,

Here is a sample how to do it.
I just made it based on the sample you linked ...using the same sprite image from stackoverflow (because I had no tool here to cut the sprite keeping the transparency). You should get a better image if you plan to actually use it.


There's 2 versions of the solution on my eSpace:
In the "InlineSolution" screen its a how you can do it for a single input. This one uses very little javascript.

Then the "ReusableSolution" screen + "InputClearWidget" block. That shows how to implement it on a webblock so you can use it in any input you want just by reusing the webblock. It's a bit more complex solution if you want to use that pattern multiple times, but uses a bit more complex javascript inside (not that you actually need to edit it anyway :) ).


Regards,
João Rosado