Make custom field default text disappear onfocus

  • Posts: 84
  • Thank you received: 1
11 years 5 months ago #103983

I have custom fields that are textareas and text inputs. Would like default value to disappear when the user clicks on the field. I know I can do this by using onfocus? Not sure where to look for this code or what I should insert to make it work.

The idea is that I want to add a description of the field for the user. The text title/label is not enough as a description field.

Please Log in or Create an account to join the conversation.

  • Posts: 84
  • Thank you received: 1
11 years 5 months ago #103985

Is there another way to create a description for the custom field item? If I use the default text it submits that value, which I dont want.

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2322
11 years 5 months ago #104072

Hi,

You have to edit the file "administrator/components/com_hikashop/classes/fields.php" function "display()" in the class "hikashopTextarea", and in the .js add the desired code to remove the content on focus.

Last edit: 11 years 5 months ago by Xavier.

Please Log in or Create an account to join the conversation.

  • Posts: 84
  • Thank you received: 1
11 years 5 months ago #104190

I'm assuming you mean line 1574 which is this line:

$js = 'onfocus="if(this.value == \''.$value.'\') this.value = \'\';" onblur="if(this.value==\'\') this.value=\''.$value.'\';"';



can you give me the string to achieve the following:

onfocus delete default value
and
onsubmit if value is the default value don't submit value

Last edit: 11 years 5 months ago by goloon.

Please Log in or Create an account to join the conversation.

  • Posts: 26151
  • Thank you received: 4027
  • MODERATOR
11 years 5 months ago #104213

Hi,

Why not using the HTML5 "placeholder" tag ?
Compatible with new browser and it does not touch to the input value (so no problem with the submission of the form).
Otherwise, the javascript will be very complex.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 84
  • Thank you received: 1
11 years 5 months ago #104230

ok. how do i do that???

Also, if it's not compatible with older browsers it might be a problem because it is the only description of the field. So if it is not compatible then there will be no description of the field.

Last edit: 11 years 5 months ago by goloon.

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2322
11 years 5 months ago #104308

Hi,

You can simply use the content of $js but put this line out the if condition like:

		if($inside && strlen($value) < 1){
			$value = addslashes($this->trans($field->field_realname));
			$this->excludeValue[$field->field_namekey] = $value;
			$js = 'onfocus="if(this.value == \''.$value.'\') this.value = \'\';" onblur="if(this.value==\'\') this.value=\''.$value.'\';"';
		}
$js = 'onfocus="if(this.value == \''.$value.'\') this.value = \'\';" onblur="if(this.value==\'\') this.value=\''.$value.'\';"';
So everytimes, the default value will be removed onfocus.
And is the textarea is empty, it will reset the default value. You can add css properties in the javascript to change the color for example to show that the text is the description.

ps: for the previous method, you have to set a default value in the custom field configuration.

Please Log in or Create an account to join the conversation.

  • Posts: 84
  • Thank you received: 1
11 years 5 months ago #104361

Ok. This seems to work.

Problem 1: When I add to cart it submits the default value. I don't want default value submitted.

Problem 2: Why is it when I have a custom field enabled and I click "add to cart", it takes me to the checkout page? As opposed to, when I don't have a custom field, it simply adds to the cart and stays on the same page? I'd like to have the custom field enabled and stay on the same page once "add to cart" is clicked.

Last edit: 11 years 5 months ago by goloon.

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2322
11 years 5 months ago #104766

Hi,

Problem 1: As you said before, you have to add a onsubmit in the form, check the custom field value and if it's equal to the default value, erase it.

Problem 2: The custom fields should not change the way the form is submitted, and the redirection. Have you edited any view related on the custom fields - product - cart ?

Please Log in or Create an account to join the conversation.

  • Posts: 84
  • Thank you received: 1
11 years 5 months ago #104880

Problem 1: I don't know JS (that's why I asked how to do it), can you show me how? I assume this would go in the same script mentioned above.

I tried this but didn't work:

$js = 'onfocus="if(this.value == \''.$value.'\') this.value = \'\';" onblur="if(this.value==\'\') this.value=\''.$value.'\';" onsubmit="if(this.value == \''.$value.'\') this.value = \'\';"';


Problem 2: No. All I know is that when the custom fields are enabled, once the add to cart button is clicked from the product page it goes to the checkout. If the custom field is not enabled it stays on same page.

Please Log in or Create an account to join the conversation.

  • Posts: 26151
  • Thank you received: 4027
  • MODERATOR
11 years 5 months ago #104907

Hi,

I am really sorry to insist but, this is not the right solution.
As I said, using such trick will be very complicated for the javascript. Using the "placeholder" attribute will be easier and could be easily compatible with old browser.
By default, the placeholder attribute is compatible with:
* Firefox 4.0+
* Opera 11.01+
* Chrome 3.0+
* Safari 3.0+
* Internet Explorer 10+
For old version, there are some script, like a little jQuery script:

$('[placeholder]').focus(function() {
   var input = $(this);
   if (input.val() == input.attr('placeholder')) {
      input.val('');
      input.removeClass('placeholder');
   }
}).blur(function() {
   var input = $(this);
   if (input.val() == '' || input.val() == input.attr('placeholder')) {
      input.addClass('placeholder');
      input.val(input.attr('placeholder'));
   }
}).blur().parents('form').submit(function() {
   $(this).find('[placeholder]').each(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
         input.val('');
      }
   })
});
And a little CSS
.placeholder { color:#999; }
The script support all cases (focus, blur and form submission). So there is no more development to do.

About the attribute, you can set the placeholder attribute like other attributes (like the class or the javascript events).
So, something like:
$js = 'placeholder="'.$value.'"';
should work good.

Best regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 84
  • Thank you received: 1
11 years 5 months ago #104908

Jerome, can you tell me exactly what to do, as I am a little confused. I will have several custom fields, so will this apply to all of them? and will I still be able to set the default value through custom field backend admin?

Can you give me a step by step and where I should put the codes you mentioned?

Please Log in or Create an account to join the conversation.

  • Posts: 82760
  • Thank you received: 13346
  • MODERATOR
11 years 5 months ago #104956

Jerome simply said to replace the line:
$js = 'onfocus="if(this.value == \''.$value.'\') this.value = \'\';" onblur="if(this.value==\'\') this.value=\''.$value.'\';"';

by:
$js = 'placeholder="'.$value.'"';

in the field.php file.

Please Log in or Create an account to join the conversation.

Time to create page: 0.095 seconds
Powered by Kunena Forum