Custom form with custom html5 attributes to write to a database table in concrete 5.7

Permalink
Hi Concrete5 community,

I have been looking around the concrete5 forums searching for a exisitng solution but I did not see a topic which relates to concrete 5.7.

What I am trying to achieve is to able to write down a custom form either on a block or a single page with custom html5 attributes as I have already build a form with angular.js framework and want to intergate the error checking functions that I have developed into concrete 5.7.

Thing is a number of examples I see is php based marked up i.e on the register.php of concrete 5.7:
<?php echo $form->label('uName',t('Username'))?>



Is there anyway to able to write this out with in html markup and using the php POST method which the javascript will handle the error checking and only to submit the data when the validation is passed into a database table?

Can anyone here point me to the right direction with examples, blog articles or git source?

Thank you.

 
Gondwana replied on at Permalink Reply
Gondwana
Here's a form block that does some JS validation:
https://www.concrete5.org/marketplace/addons/contact-form-no-links1...
josephtan83 replied on at Permalink Reply
Hi Gondwanna,

Thank you for your reply.

The form is quite close however I am not sure if I am able to use this package as
what I have seen is the only input field which is able to retain data is in form.php.

The view.php of the package which you developed will generate the custom ID and name that was written down for the input field which is nice and I can use that but is there anyway to extend the code to be able to add in a custom "data / attribute" and for the inputs to be able to retain the data from the view.php into the table specified in db.xml.

Also is the
$form->email
already embedded with concrete's 5 jquery email validation as it may cause a conflict with angular's email validation?

Btw nice custom vanilla javascript.
Gondwana replied on at Permalink Best Answer Reply
Gondwana
I didn't think you'd be able to extend that package to meed your needs; I just thought it might contain some clues about client-side validation. Nevertheless, you may be able to work with it.

General documentation about block structure, including saving fields to the database, is hereabouts:
http://documentation.concrete5.org/developers/working-with-blocks/c...

In addition to the bID key, my package saves four fields (from memory): name, subject, email, description. Another user extended it to add another field; see discussion here:
https://www.concrete5.org/marketplace/addons/contact-form-no-links1/...

I've never used angular so can't comment on possible conflicts. Your concern could possibly be addressed by changing the field name from 'email'. In this context, it's just a name.
josephtan83 replied on at Permalink Reply
Well the no-links package does offer some clues to write to a database table on form.php from an input.

I'll have to work out on getting in extra fields from there for the view.php.

The reference link on how to use the form widget tutorial on the other topic was good, I can use the array to specify my attributes on the HTML5 input tags.

Tested it out on your package with the added
print $form->text('name'.$bUID,array("custom-data" => "data-test"));


which output as :

<input type="text" id="name302" name="name302" value="" custom-data="data-test" class="form-control ccm-input-text">


Okay next thing is to finish coding from here.

Thanks again for the reference links.
josephtan83 replied on at Permalink Reply
I have a problem now with the $form-> select which consist its <options> tag attribute.

From the [a href="http://documentation.concrete5.org/tutorials/how-to-use-the-form-widget-in-concrete5-5-7"]documentation[/a] it seems the select form is rather limited in setting its options attributes.

As this:
print $form->select('select_example', array('acorn ' => t('acorn'), 'lemon' => t('lemon'), 'turnip' => t('turnip')), $select_example, array('style' => 'width: 125px;'))


equates to :
<select id="select_example" name="select_example" style="width: 125px;" class="form-control">
<option value="acorn test">acorn</option>
<option value="lemon">lemon</option>
<option value="turnip">turnip</option>
</select>



How am I going to set the array so I am able to add custom attributes to the option tag like so the HTML output is like below?

<select id="select_example" name="select_example" style="width: 125px;" class="form-control">
<option value="acorn" disabled selected = "selected">acorn</option>
<option value="lemon">lemon</option>
<option value="turnip">turnip</option>
</select>


Can anyone help?

Thanks