Jump to content

Create simple forms using API


Soma

Recommended Posts

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/

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

[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'
);
Link to comment
Share on other sites

  • 4 weeks later...

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!

Link to comment
Share on other sites

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;
}
 
  • Like 2
Link to comment
Share on other sites

Ups, thanks diogo. I think it's one of those afterwards adding stuff errors. Strange nobody noticed it earlier :D 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"); 

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 1 month later...
  • 1 month later...

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) :P

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...