Jump to content
Soma

Create simple forms using API

Recommended Posts

how to add a autofocus attribue on a input element

I tried to add this attribute with this line of code. But it didn't work. I'm expected it require a value to output the attribute.
However, it is odd to give whatever  value to autofocus attribute as it is not necessary under html5 spec

$field->attr("autofocus","");

Share this post


Link to post
Share on other sites

This library is not meant to work after html5 spec, in fact even Ryan didn't meant it to be used for the frontend. It's presumably even older than the spec. If you take a look at "required", this doesn't even set the html5 required flag, You would need to add this as attribute by yourself, too. I would just use "autofocus" for the value and the name. 

Share this post


Link to post
Share on other sites
// Skip the label as long as it's blank
$submit->set('skipLabel', Inputfield::skipLabelBlank); 

Maybe not working if field is already added to the form?

Share this post


Link to post
Share on other sites

This shouldn't matter, it's not fixed until it's converted to markup by $form->render(). But I've noticed that InputfieldCheckbox overrides this on its own render() function.  I've already added a github issue about that. So maybe there something alike this in your case.

Share this post


Link to post
Share on other sites
It's thanks to posts like this that PW is so easy to learn. Great one here!

I'm stuck trying to use this with FieldtypeMapMarker. Any ideas?

Share this post


Link to post
Share on other sites

I'm having trouble with processInput vs InputfieldMapMarker. The result:

Error: Call to a member function set() on null (line 177 of C:\xampp\htdocs\cars\site\modules\FieldtypeMapMarker\InputfieldMapMarker.module)

Is there any way to set an exception for this variable not to go through processInput? Or perhaps another, better method to fix this?

Share this post


Link to post
Share on other sites

Thanks for the Tutorial. 

Is  it possible to render the form with custom HTML code  ? 

currently reders  $form->render(); this Markup 

<form>
<ul>
<li>
<label></label>
<div>
<input>
</div>
</li>
<ul>
</form>

Is it possible to create own ? 

Example 

<form>
<div class=one>

<div>
<label></label>
<input>
</div>

<div>
<label></label>
<radio>
</div>

</div>

<div class=twoe>
<div class="custom1">
<label></label>
<input>
</div>

<div class="custom2">
<label></label>
<textarea>
</div>

</div>

</form>

Or is there a Exmaple how to handle ALL Input Field Types ? 

Selct ? Preselected Items ? 

Radio ? Requirements and and and ... 

EDIT:

Edited by iNoize

Share this post


Link to post
Share on other sites

@iNoize

As fas as I know it is not possible. I have worked in the past with api forms and gave it up. I also needed a special markup (in my case Bootstrap). It was not possible to get the exact output as I wanted. Therefore I write forms manually. It is the best way to get full control over the output.

Share this post


Link to post
Share on other sites

I'm using Nette Forms standalone for forms, it is very powerful but easy to setup:

http://doc.nette.org/en/2.3/forms#toc-nette-forms-standalone

Cool thing is that with Live Form Validation javascript it provides JS validation too:

https://gist.github.com/Robyer/7948399

It is also capable to handle conditional fields, so for example show an input field only if you select an item in another select box, etc. And all this stuff works with live js validation, so you have to set rules once and both backend and frontend validation are done.

99% of the time the default form renderer is enough, but you can fine-control your forms if you need to:

http://doc.nette.org/en/2.3/forms#toc-defaultformrenderer

http://doc.nette.org/en/2.3/forms#toc-manual-rendering

You can use Bootstrap style too:

http://doc.nette.org/en/2.3/forms#toc-bootstrap-support

For example, I use it with UIkit:

<?php
// load Nette Forms
require_once(__DIR__ . '/../../../vendor/autoload.php');

// make a new Form instance
$form = new Nette\Forms\Form;

// optional tweaks
$form->setAction($page->url);
//$form->setMethod('GET');

// set "novalidate" and classes
$form->getElementPrototype()->novalidate = 'novalidate';
$form->getElementPrototype()->setClass('uk-form uk-form-horizontal');

// set how form is rendered
$renderer = $form->getRenderer();
$renderer->wrappers['controls']['container'] = 'div';
$renderer->wrappers['pair']['container'] = 'div class="uk-form-row"';
$renderer->wrappers['label']['container'] = 'div class="uk-form-label"';
$renderer->wrappers['control']['container'] = 'div class="uk-form-controls"';

// add fields

$form->addText('name', 'Name:', 30)
//        ->setAttribute('autofocus')
    ->setRequired("Required field")
    ->addRule($form::MIN_LENGTH, "Please add at least %d characters", 3);

// display form
echo $form;
?>

Processing form is another issue, you can start like this:

if ($form->isSuccess()) {
    // get submitted values (true: array format, false: object)
    $values = $form->getValues(true);

    $sender_name = $values['name'];
    $sender_email = $values['email'];
    // ...

    // redirect
    // $session->redirect($success_page);    
      // exit;
}
 
  • Like 2

Share this post


Link to post
Share on other sites

Hey Simple From Support,

I am looking at having a field requiredIf radio = yes. Must the field be set up as follow

$condition_field->attr('id', 'condition_field_id');
$field->requiredIf="condition_field_id='yes'";

I'll be handling the visual stuff on the front end with custon js. But before I do that the back end must work. The back end is basically processing input with the form. Will it catch that this field has now become required? and therefore render it as a required field?

Edited by LostKobrakai
please use code-blocks if possible

Share this post


Link to post
Share on other sites

If the requireIf selector is correct (maybe radios do only match by value and not the label) than this should work. The js doesn't care how the fields are set up if the pieces fit together.

  • Like 1

Share this post


Link to post
Share on other sites

Hey LostKobrakai,

Thanks for the reply, Yeah I tested the value strait away after I posted the question.

I am rendering the markup myself using a full MVC approach. Could this cause the issue?

Here is an example of what I am rendering

<div class="Inputfield  push_-large_-bottom " id="wrap_post_line_one">
  <label for="post_line_one"><!--
    -->Postal address line 1      </label>
  <input type="text" name="post_line_one" id="post_line_one" placeholder="" maxlength="2048" value="">
</div>

I want post line one to be requiredIf. Is processwire only looking at the field id in input->post? Because then this should work as all of the forms work perfectly.

The issue i guess lies in the setup of requiredIf on my side, here is post_line_one's setup,

    // create an input for a visitor's Postal address
    $form_post_one = $modules->get("InputfieldText");
    $form_post_one->attr('label', "Postal address line 1");
    $form_post_one->requiredIf = "has_post.value='no'";
    $form_post_one->attr('id+name','post_line_one');
    $form_post_one->attr('placeholder','');
    $form_post_one->attr('grid','g-1/1');
    $this->append($form_post_one); //this is where my mvc starts

Share this post


Link to post
Share on other sites

You're missing all the "wrapper" classes needed for requireIf to work. Maybe take a look at the pw rendered output to see those.

Share this post


Link to post
Share on other sites

So I rendered the form now, using the form->render function. However this does not seem to work. That brings me to my selector.

Tries ->

- "has_post='no'"

- "has_post_no=1"

- "has_post.value='no'"

Share this post


Link to post
Share on other sites

In wire/templates-admin/scripts/inputfields.js you can set debug mode to true (first view lines). Please have a look at what this is does print to the console.

Share this post


Link to post
Share on other sites

Ill do that, however I am now going to use a fix that works just the same, 

$form_post_two->required = $input->post->has_post === 'yes' ? 0 : 1;

Share this post


Link to post
Share on other sites

I realised that the content of the field is cut off after 255 chars. How can I enlarge the amount of chars that processwire processes?

EDIT: First problem solved. Problem was the sanitizer. I used $sanitizer->text() instead of $sanitizer->textarea()

Second question still open:

How can I set the maxlength attribute on an InputFieldTextarea? The following code only worked on InputFieldText:

$field = $modules->get("InputfieldText");
$field->attr('maxlength', "80");         // html output: maxlength="80"
...
$field = $modules->get("InputfieldTextarea");
$field->attr('maxlength', "254");      // no equivalent html output

Share this post


Link to post
Share on other sites

The maxlength attribute on textareas is an html5 attribute and the inputfield's implementation is older than html5. It does support maxlength only in conjunction with an fieldtype textarea, which would ensure the max length on the server side. 

  • Like 3

Share this post


Link to post
Share on other sites

Hey everyone,

I just recently found out that PW exists, and I really like it so far, but I am still in the "get-used-to"-Phase  :undecided:

I am creating a small Website for a Friend, and stumbled across this Thread while trying to get a Email-Form done for him.

There is just a little part of the Code that is not exactly clear to me:

         //to sanitize input
         $name = $sanitizer->text($input->post->name);
         $email = $sanitizer->email($form->get("email")->value);

I understand what it does, but why is the syntax so different, considering both lines do almost the same?

To be more specific why is it not:

         //to sanitize input
         $name = $sanitizer->text($input->post->name);
         $email = $sanitizer->email($input->post->email);

or:

         //to sanitize input
         $name = $sanitizer->text($form->get("name")->value);
         $email = $sanitizer->email($form->get("email")->value);

?

Thanks in advance!

PS: Great work <- for this Tutorial, this CMS and this community!  O0

  • Like 1

Share this post


Link to post
Share on other sites

GosuSan,

Welcome. :)

I'm not sure of the context of those examples. I think Soma's original post has them as examples that are commented out. They are just meant to show alternate ways of accessing the values. Probably at different points in the submission process, depending on what you want to do.

Accessing the values from $form->get("field_name")->value means the value already exists in the form object, so you are getting the values either after a successful submission, or at some point during the submission process. Perhaps for doing some other kind of check/validation (see the hotmail error in the first post example).

So they both work, but it just depends on at what point you are asking for the values.

  • Like 4

Share this post


Link to post
Share on other sites

Thank you very much, renobird.

Yes, I referred to the commented-out section of Soma's original post.

Thanks for clarifying, this was another step towards understanding PW better.

I have to say it has an easy understandable structure in most situations (for now).

In most other CMS / CMF I spent much more time to orientate.

Thanks again!

Share this post


Link to post
Share on other sites

Hi,

i have a specific question while dealing with file uploads: I have a (API) form which contains several file upload fields beside other field types elements. Some of them are required, so submitting the form gets into the error fork, when they are not populated/checked.

A rather simplified structure of the form is available as a Gist (https://gist.github.com/e838fc5ecf90c309842e).

The form (and uploads in general) works just fine, but i don't get along with the common issue, that all file uploads gets lost/empty if the form runs into the error fork after first submission, e.g. some required fields are not populated or checked (checkboxes). If the user correct this and submits the form again, no files are available any longer (without uploading them again on every submit. What is annoying and expresses rather lame UX).

So i wonder how and where to store those file uploads temporarily, so they are available on form submission even if there are several submits because of form validation errors until the form succeed.

My last approach was to put the generation of file uploads (e.g. building a array of all upload field values) shortly after the submit condition. But that doesn't work either, e.g. when submitting the form twice or more the $uploaded_documents array is empty...

Perhaps some of you has a clearer view on that (?). Would be great.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...