How to add input with type="number"?

How to add input with type="number"?

Hi peacemaster,

The Form Wizard doesn't yet support the HTML5 input types :-(

I can think of a few ways you could get round this: a) use JavaScript to change the type of a text input when the page loads; b) add the type='number' input into a Custom Element element; c) use a text input but validate as numeric.

Bob

I have a question related to this. I want to use HTML5 date picker, with month only type option, and pass the value back to Chronoform so I can include in the email.

I can get the HTML5 date picker to show, but can't figure out how to pass the values into the form data array.

Please help.

Hi taung,

As long as the HTML5 input has a name and is inside the <form> tags it will be submitted in the same way as any other input.

I built a little test and found two ways to add HTML5 inputs in a ChronoForm.

a) Use Javascript to change the type.

I added a text input with the name='date_month' & id='date_month' and then added this in a Load JS action:

window.addEvent('domready', function() {
  $('date_month').setProperty('type', 'month');
});

b) Use a Custom Element element

For this I dragged a Custom Element element from the Advanced Group into the Preview box and added

<input type='week' name='date_week' id='date_week' />

Both seem to work OK in browsers that support HTML5. You can see my test form here for the time being.

There are disadvantages in using this as support is limited to current browser versions and many corporates are still on IE8! The JavaScript version could be extended to detect the browser type and add a JavaScript datepicker if the browser isn't HTML compliant.

Bob

PS In checking this out I found a good explanation here

ahhh.. you want to use the id you set in the HTML code, not what you set in the form wizard config section. Thanks Gary, as always. Hope you will release another cookbook soon.

by the way, i went with HTML5 input. how can I made the custom element field a reqired field? the normal "required" in HTML5 input is not registering.

Hi taung,

You can add the FormCheck classes directly to the inputs e.g. class='validate[required email]'

Bob