Create simple forms using API

[Soma]

Thanks a lot for sharing this neildaemond! Great resource indeed this plugin. Now only accessibility could be improved and with some jquery validate this is great.

[neildaemond]

this version will validate the current fieldset before moving on to the next slide using jquery validation plugin. Must initiallize with:

$("#formID").formToWizard();
$("#formID").validate({
				 ignore: ".ignore"
		 });

 

PWformToWizard-validate.js

EDIT: must also include the validation plugin from http://bassistance.de/jquery-plugins/jquery-plugin-validation/

[neildaemond]

I noticed that jquery ui classes like ui-widget-header and ui-widget are in the rendered form. After adding jquery ui css to my site, all the form styles got wonky.

They are probably important for the admin section forms but, is there a way to make it so that those classes are not populated when rendered on my pages?

[Soma]

No there isnt a way i know of to disable this as is.

[interrobang]

[quotamos]This is really interesting stuff and I'm learning so much from it. I've already tested Soma's code and it works very well. Is there a way of configuring $form->render() so that it outputs different html (divs for ul/li etc.)? [/quotamos]

you.can usage. $form->setMarkup(); und $form->setClasses(); two.set markups und html caresses.

see.eliamos /wire/core/InputfieldWrapper.php

Like Willy said, you can change the outputted classNames so your jquery ui css can't find/style them.

The default classes are these:

/**
* Classes used during the render() method - customize with InputfieldWrapper::setClasses($array)
*/
$defaultClasses = array(
'list' => 'Inputfields',
'list_clearfix' => 'ui-helper-clearfix',
'item' => 'Inputfield {class} Inputfield_{name} ui-widget',
'item_required' => 'InputfieldStateRequired',
'item_error' => 'ui-state-error InputfieldStateError',
'item_collapsed' => 'InputfieldStateCollapsed',
'item_column_width' => 'InputfieldColumnWidth',
'item_column_width_first' => 'InputfieldColumnWidthFirst'
);

[Soma]

Its a couple post above where this is asked

[neildaemond]

d'oh! sorry guys, I should read more carefully~

[Soma]

Yeah me too ;-)

[neildaemond]

haha, I like how you gave the same "its impossible" response ~

[David Noble]

Hi,

Thanks for the excellent tutorial. There's one question I'd like to ask, as I haven't been able to find the answer in the forums or API documentation.

I have included a hidden field on my form (using InputfieldHidden). This works fine, but displays a label for the hidden field (which I don't want). It uses the name/id for the label. I have tried setting the label using $field->label = '';, but it still displays the label. Is there anyway to prevent this? (I could make it disappear using CSS, but would rather it wasn't there at all.)

Just by way of explanation. The form has three fields for providing a phone number, email address and street address. The person submitting the form has to supply at least one of these. I have a test to make sure that is the case in the field processing and set an error if this is not the case.

The three fields are in a fieldset, and I tried adding the error to the fieldset (for which I set an id and name), but that doesn't display the error message on screen when the form is submitted. It also doesn't make sense to add the error to one of the three existing fields. So that is why I'm adding a hidden field. If there is an error I attach the error to the hidden field, and on submission the error is displayed in the location of the hidden field - which is great. It's just that the hidden field label is displayed too, which I don't want. (The label displays when the form first displays too - not just when there is an error.)

Any suggestions appreciated - including any better way to achieve this outcome.

Thanks!

[diogo]

first of all, @soma, when trying this I noticed that you have a problem in your hotmail example, because you are adding the error to the email value and not the object itself. You should change it to this instead:

$emailfield = $form->get("email");
$vemail = $email->value;
if($vemail && (strpos($vemail,'@hotmail') !== FALSE)){
    // attach an error to the field
    // and it will get displayed along the field
    $emailfield->error("Sorry we don't accept hotmail addresses for now.");
}

(new code editing of the forum is great )

---

@david, I wouldn't use a hidden field only for printing an error...

If you don't mind having the error outside the form, you can do simply something like this:

if(your check) {
    $out .= "<p>Please fill one of those three</p>";
    $out .= $form->render();
}

if you really want to put the error inside the form, and between elements (alert: I will be a bit creative here because I don't really know how to change the render() method), I would suggest that you use a php dom parser (yep, creative, i told you). I tried this one http://simplehtmldom.sourceforge.net by putting it on my templates folder and changing it's extension to .inc and including it on my template with include('simple_html_dom.inc');.

You would be able to do what you want by writing something like this inside your error check conditional:

if(your check) {
    $out = str_get_html($out);

    //get the fielset by it's id
    $fieldset = $out->find('fieldset#id');

    // prepend the message to the fieldset
    $fieldset->innertext = '<p class="error">Please, fill one of these three</p>' . $fieldset->innertext;

    echo $out;
}

 

[Soma]

Ups, thanks diogo. I think it's one of those afterwards adding stuff errors. Strange nobody noticed it earlier I corrected it.

I think you could use the markup inputfield (InputfieldMarkup) to add an error inside the form, maybe right before or after the fields. IF you don't add a string value to the field it won't show anything. But if you give it an error it should display it. Or use custom code to validate and add it before the form like diogo suggested.

I haven't tried to, but I think it's also possible to add the error to the form itself. $form->error("Hey somethings wrong"); 

[ryan]

Good suggestions, but if you want to use the hidden inputfield here or somewhere else, you should hide it (or whatever part of it you want) with CSS. This is what ProcessWire does. The reason it has a label is just because Inputfields need a common/predictable set of things going on. 

[David Noble]

Thanks for all the suggestions. ProcessWire certainly has an active and helpful community behind it!  Cheers

[panictree]

This post has been useful to me beyond belief, guys! Just to let you know all your efforts and suggestions are much appreciated!  

[arjen]

Just stopping by to say thanks! Great post and great comments. It is indeed very much appreciated!

[renobird]

Is resizing possible with InputfieldFile? 

I know setting max width/height in the fields settings don't effect images uploaded via API.

I was hoping something like this would work:

$field->maxWidth = 1000;

 or  

$field->attr("maxWidth",'1000');

but no luck.
 

I've been looking at InputfieldFile.module to see if I could find a clue, but nope (still clueless)

[Soma]

InputfieldFile isnt neccessarely an image. Youd have to take InputfieldImage.

[renobird]

Doh!

I see it in the module now. Thanks Soma.

[renobird]

Trying this to no avail.

$field = $modules->get("InputfieldImage");
$field->label = " ";
$field->required = 0; 
$field->maxFilesize = 2*1024*1024;
$field->description = "Upload Photo";
$field->attr("name+id",'profile_photo');
$field->destinationPath = $upload_path;
$field->maxWidth = 100;
$field->maxHeight = 100;
$form->add($field);

For the sake of seeing an easy result, I set it low (100).

Upload happens fine. Just no resize. 

Also tried as:

$field->maxWidth = "100";

Still no likey.

[Soma]

Ahh, if you use the InputfieldImage/-File to upload it won't be like a field you have on a page, you only have the Inputfield and use it to "upload" files. In this case it's not doing anything because those particular actions are triggered when an image is added to a page.

So since you add the image to a page at the end, you'd have to set the max size there of course. Once you add it to the page it will resize.

Or you could do it using API after submit and before you attach the image to a page image.

[renobird]

Or you could do it using API after submit and before you attach the image to a page image.

Do you mean, resize it in the temp location? and then attach the resized to the page?

Initially I was trying via API:

- add image

- save

- resize 

- save

resulted in:

Fatal error: Exception: Method Pageimages::size does not exist or is not callable in this context

[renobird]

OK,

So I randomly stumbled across the docs on class ImageSizer()

and figured I could try that — and guess what? It worked.

$newSize = new ImageSizer($user->profile_photo->first()->filename);
$newSize->resize(150,150);

I'm not sure this is the most effective method, but it works.

[Soma]

I think if you set the max with and height on the image field you have on the page you won't have to resize it. Larger images will get resized when attached to it.

Of course you can resize the image via API using ImageSizer.

[renobird]

Hi Soma,

I tried that first, but images just seemed to get uploaded at the original size.