You are viewing limited content. For full access, please sign in.

Discussion

Discussion

Forms - Set field type with CSS instead of Javascript

Updated May 19, 2017
posted on May 19, 2017

When I set a field to type Time in the forms designer it creates 2 fields, a time fields and an AM/PM field. This doesn't work for my purposes and I like the way the field works when setting it to type time using the following javascript.

$('.start input').attr("type", "time");

Now I would like all the fields within a table to be this same type of field, but javascript can only change the first row. 

For stability purposes I would like to use CSS to ensure all these fields are a time field from the start. Is there anyway to set this attribute in CSS, I can't find any examples of setting attributes in CSS on a web search.

0 0
replied on May 19, 2017 • Show version history

Hi Chad,

Unfortunately, I do not believe it's possible to use CSS to change the value of the 'type' attribute of an input (see here for more details and a potential hack to change appearance, but not actually type).

However, I was able to achieve the results in the following screenshot:

Using the following CSS:

select.timepicker-type-dropdown {display: none !important;}

In conjunction with the following JS:

$(document).ready(function() {
  $('.start input').attr('type', 'time');
  $('#q3').click(function() {
  	$('.start input').attr('type', 'time');
  });
});

In my JS snippet, the id #q3 refers to the id on the 'Add' anchor for the table, that allows users to add more rows. Just change '#q3' to whatever the ID is for the 'Add' anchor on your table.

Hope this helps!

Rob

1 0
View 1 previous reply
replied on May 19, 2017

Thanks! I was concerned about the stability of this, if the browser does not register the click event the field will be broken. Is there a way to do this by class instead of individual field numbers? All my tables have the class timetable.

0 0
replied on May 19, 2017

What exactly is the concern re: stability? As far as I know (and tested in IE, Firefox, and Chrome), this small amount of JS should not present a stability issue for the form. If for some reason the browser does not register the click event, no fields will be broken--the field in the first row will function as is does when the form finishes loading and no other rows will be added. In other words, if the browser isn't registering the click event, there are bigger problems than broken fields! smiley

That said, you can replace $('#q3') with $('.hideAddRow') and achieve the same effect as before.

Good luck!

0 0
replied on May 19, 2017

This works perfectly! Thanks.

As for my trust issues.

I recently added a function to another form that clicks the auto-fill button for each row in a table as they enter information. Worked perfectly on most workstations. On about 10 workstations it would not work. Same javascript, same form, same browser, same server.

Javascript was not disabled since everything else worked, so now I don't trust that Javascript output is universal even if it is run in the same browser.

The exact code and details are posted here at the bottom. Even stranger is that if I unpublish the form, the javascript produces the same output on all workstations.

https://answers.laserfiche.com/questions/120173/Accessing-forms-with-the-Formsformnew-instead-of-the-published-link

0 0
replied on May 19, 2017

Good, I'm glad it works!

Thanks for the background--that's quite the situation you had on your hands, and your distrust of JS is understandable. Hopefully, since the JS in this situation is not performing any actions on the elements (ie, clicking a button, entering text into an input, choosing a dropdown option, etc.), its behavior will be more predictable across browsers.

My first thought on reading the post you linked above was, "I wonder if the problem URL has a broken link to the jQuery library?" But one of your lines using jQuery works, so that's almost certainly not the case. I'm interested to learn what's causing that erratic behavior, so I subscribed to that post. Thanks!

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...