I need to theme the login form. I need additional css classes and tabindex for the form elements.
Now I have a problem with these both for the login button.
In template.php I use 'attributes' for that. For e.g. the password field it works perfect with this code:
$form['pass']['#attributes']['class'][] = 'input-sm form-control';
$form['pass']['#attributes']['tabindex'][] = '2';
When I use this for the button - nothing is rendered in html:
$form['op']['#attributes']['class'][] = 'test-button';
$form['op']['#attributes']['tabindex'][] = '3';
'op' is the name of the login button which I can see in html output.
How can I get the 'class' and 'tabindex' to the login button?
For the button you should use $form['#submit'].
In any case you can use hook_form_alter() and devel's dpm($form) to get the form data. A generic example:
function MYTHEME_form_alter(&$form, &$form_state, $form_id) {
dpm($form);
}
The submit button may be accessed like this for a common Drupal theme (structure taken from the dpm() function):
$form['actions']['submit']['#attributes']['tabindex'][] = "2";
One important thing here is to be careful because you may override the form again later on your theme... In this case look for the very last hook and apply changes there.
Related
How to make the quill editor field required? The editor gets rendered into a div, but it isn't clear if there is a way to make the field/editor required when the form submits.
As you wrote, Quill works with a div and not with a form element so it can't help you with form validation.
You'll need to check manually if the editor's content is empty, prevent the user from submitting the form and show a message that this field is required.
You can copy quill contents to a hidden input element before submitting the form as shown in this example.
A custom form control is also a good way to go. You can try to workaround with Quill's event handler and getting the value of the form.
Then a custom form validator is also possible.
Check : https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html
I've been trying to work around exactly this problem too today, using Python for back-end and a hidden form-field (name='editor') to get the value from the quill container to the back-end. Ended up with not actually really a validator but working about the same:
if request.form['editor'] == '\"<p><br></p>\"':
flash("You cannot send in empty posts!")
return redirect(CURRENT PAGE)
else:
CODE EXECUTED IF EDITOR IS NOT EMPTY
Not sure what you're doing with the input on the editor or whether you're even using Python for backend but I hope this helps. "<p><br></p>" is what the console told me the standard input on empty submission was when getting the information out of the editor.
Good luck!
const yourText = '<div><br></div>';
const htmlTagsToRemove = ['<div>', '</div>', '<br>'];
function removeHtmlTags(data) {
let text = data;
htmlTagsToRemove.forEach(it => {
text = text.replace(it, '');
});
return text;
}
const newText = removeHtmlTags(yourText);
console.log(newText);
I am using Chronoform V5 for my Joomla site. I have created a Multi Page form wherein a user will fill in each page and click next to proceed and at the end the form will be finally submitted and some results will be displayed based on the input. This part works fine.
Now I have a dropdown in first page. If a user selects e.g, option 'a' and clicks 'next page' button i want to hide a dropdown in the second page. In case the user selects option 'b' in the first page this dropdown in second page should be visible.
Any idea how to achieve this?
I would use a Custom code action to check the submitted value and use CSS to show or hide the value:
<?php
$display = 'block';
if ( $form->data['var_name'] == 'xxx' ) {
$display = 'none';
}
$style = "#some_id { display: '{$display}'; }";
$jdoc = \JFactory::getDocument();
$jdoc->addStyleDeclaration($style);
?>
I am trying to do userLogin through a webservice. The project is using Bootstrap for css and angular in the backend.
I am having a login Screen with a hidden div that is shoown when user click login button.Its a animated login icon.
Everything is working fine.I just want to make the background that is whole page including the userId, password uneditable as well as signin button unclickable.
When you hit the login button you can make the input(s) and button(s) disabled to make sure they remain unchanged.
When you get a result from your REST call you can re-enable them all.
You probably already have a variable $scope.loginIn on your controller scope since you are showing an animated login icon while login. If you don't, add it to your login function, something like :
$scope.login = function(...) {
$scope.loginIn = true;
loginService.login(...).finally() {
$scope.loginIn = false;
}
}
then just use it on your input and buttons to disable them :
<div class="login">
<input enable="!loginIn">...</input>
<button enable="!loginIn">...</button>
</div>
(That might be off the context, if you give me some code I could probably be more accurate in my answer)
How can i save the textfields and checkboxes to the DB without reloading the page?
Just to click on the button and then its in the DB. Nothing more. I don't get it. This means when I have a textfield where I type in a content -> then click the button, the content from the textfield should be in the DB and should do nothing more (not reloading the page, or go to top for example).
I don't get it.
EDIT:
When I have a a <div> tag with the id="testid" in the standard create.gsp:
def create() {
def mytestInstance = new Mytest(params)
}
and the <g:remoteLink> which should save this part looks like:
<g:remoteLink class="button" name="myForm" update="testid"
url="[controller:'mytest', action: 'create']" value="....." />
That does not work because the page is refreshing or something like this and the things are not stored in the DB, plus they are not in the textfields any more.
Use <g:formRemote> or <g:submitToRemote> to do the form submission with an Ajax call.
You should be able to use the formRemote tag to send the data to a controller via Ajax
Edit
As it says on that page;
This tag also requires the use of either the <g:javascript/>(link) or <g:setProvider/>(link) tags. See the AJAX section of the user guide to find out more.
Have you done that?
i try to populate a dropdown menu for quicksearch in mvcgrid my code is:
$g = $this->add('MVCGrid');
$g->setModel('materiale');
$g->addPaginator(25);
$s = $g->addQuickSearch(array('nome_mat'));
$value_list = array(
1=>'Granito',
2=>'Marmo'
);
$s->addField('dropdown','tipo_mat','Tipo_mat: ')->setValueList($value_list);
The dropdown list appear on quick search form.
My db field is tipo_mat, but when i click quicksearch button nothing uppens, can someone help me plase.
Thank's
You will find that the Quicksearch is nothing more that a simple form, which applies condition to your grid when submitted. In theory, you could have a standard form sitting in there doing the same thing:
$search = $g->add('Form',null,'quick_search',array('form/quicksearch','form'));
$search->addFiled('dropdown','tipo_mat')
->setValueList($value_list)
->set($_GET['tipo_mat']);
$search->addField('search','q')
->set($_GET['q']);
// Handle submit of form, reload grid with AjAX, pass values as arguments
if($search->isSubmitted()){
$grid->js()->reload($search->getAllData())->execute();
}
// If values are passed, use them
if($_GET['q'])
$grid->dq->where('name like','%'.$_GET['q'].'%');
if($_GET['tipo_mat'])
$grid->dq->where('foo',$_GET['tipo_mat']);
The "Filter" and "QuickSearch" classes help you with saving search values but you must not be afraid to look into their source and create your own QuickSearch class which can apply parameters properly.
Perhaps using Filter in your case is better than quick search, because of how "applyDQ" is handled:
https://github.com/atk4/atk4/blob/master/lib/Filter.php#L62