Custom Attribute "Value"

Design help Custom code
1

Hi everyone,

I’ve been trying to set a custom attribute for “value” to a form text field but WF says that attribute name is reserved.

Is there a way to get around this limitation other than adding the same field via the embed widget?

Best would be if WF could get the value attribute out of the “reserved list” like they did before with other attributes (e.g. maxLength).

Anyone from the WF who can shed some light on this?

Thanks.

3

Hey @Omar_Melizza,

We preserve some attributes so we can control what’s happening with certain node in designer. For now please use following steps:

  1. Click on the input and go to Settings.
  2. Note down the id of it:
  3. Click on Page Manager and and go to page settings.
  4. When you scroll further down you will see the Custom Code.
  5. In before </body> custom code field paste the following:
<script>
  Webflow.push(function() {
    document.getElementById('name').value = "desired value";
  });
</script>

Please note the .getElementById(...) that contains the field ID and the desired value that is going to be what you want to have in the field.

You can also use the Embed option :)

Also if you want to add a value so you can style the text accordingly in the input, you can simply go to Preview Mode, click on the field and type something in. After you leave Preview Mode the value will persist for you to style. It is important to remember, that value added that way is not going to be rendered on published site and will disappear on next designer refresh or page switch

Let me know if that help :)
Cheers,
Bart

2 Likes
4

Bart, thanks a lot. That really helps.

Just one more thing I’d like to get your opinion on.

I need to assign an XYZ value to checkboxes because I’m trying to implement the mixItUp plugin advanced filtering (kudos to @sabanna for creating an amazing tutorial for this) with dynamic embeds.

Here’s what I’ve done so far. Apart from the horrible styling (that is just my sandbox) I achieved the overall result of getting the plugin to work. Here’s the actual result.

As you’ll see, “sabanna’s method” requires using embed code for assigning XYZ value to checkboxes, which is fine but has some cons if you want do some fancy with those checkboxes.

Your method on the other hand seems to be the way to go. However, as in my project I’ll be needing about 30-40 checkboxes, it might be difficult to implement it. Lots, lots of code would need to be added, wouldn’t it?

Thoughts?

PS: One last thing while we are on this subject.

As you’ll see in my preview link, I’m using a bit of code.

Question: any way to consolidate this piece of coding into something smaller and more appropriate from a purely semantic point of view?

<script>
jQuery('.mix .gender ').each(
  function(index, element) {
    var _this = jQuery(element);
    _this.parent().addClass(_this.text().toLowerCase());
  }
);
</script>

  <script>
jQuery('.mix .label ').each(
  function(index, element) {
    var _this = jQuery(element);
    _this.parent().addClass(_this.text().toLowerCase());
  }
);
</script>

<script>
jQuery('.mix .color ').each(
  function(index, element) {
    var _this = jQuery(element);
    _this.parent().addClass(_this.text().toLowerCase());
  }
);
</script>
5

7 posts were split to a new topic: Change Webflow checkbox default value