I'm trying to disable this CakePHP combo:
echo $this->Form->input('backupid', array('options' => $users_backup, 'class'=>'autocompletar', 'empty' => true, "label"=>__('Backup'), 'id' => 'cmbBackup'));
When I click this Checkbox:
echo $this->Form->input('criticalresource');
I've tried to add the property 'disabled' and 'readonly' in every combo element
The following image contains part of my DOM where you can see the Checkbox and the Combobox :
¿Is there any way to DISABLE that combo? I'd rather prefer a JS procedure, but every answer is welcome!
Thank you guys!
I could find an alternative answer: I'll put a 'div' above and insert this class inside:
.disabledbutton {
pointer-events: none;
opacity: 0.4;
}
Replace your critical resource input with the following code
echo $this->Form->input('criticalresource',array('onclick'=>'disableCombo();'));
And in JavaScript
<script>
function disableCombo()
{
var cmbBackup = document.getElementById("cmbBackup");
cmbBackup.attr('disabled','disabled');
}
</script>
Related
I am trying to troubleshoot a PHP form within a Drupal 7 site. At the moment, the form can only be submitted if the user clicks the button. I would like to enable submission with "Enter" key. How can I do this?
Here is the relevant code:
$form['search']['search_button'] = array(
'#type' => 'button',
'#value' => 'Search',
'#ajax' => array(
'callback' => 'ajax_search_callback',
// 'wrapper' => 'search-results',
'wrapper' => 'search',
'method' => 'replace',
'effect' => 'fade',
'event' => 'click',
),
);
I suspect that I need to change 'event' field or add another field.
I implemented this by adding this piece of code on textfield on which i want to trigger submit event:
$form['field_name']['#attributes']['onkeypress'][] if (event.keyCode == 13) {jQuery('.submit-selector').mousedown();}
You need to add the keypress attribute to the ajax array and set it to TRUE.
It is explained in the form api documentation, here.
EDIT :
The first solution works only for one single input field. To add keypress event on the form, you must add an "onkeypress" attribute to the form by adding it in the attributes array:
$form['#attributes']['onkeypress'] = 'if(event.keyCode==13){this.form.submit();}';
Where 13 is the keyCode for Enter (or return for a mac).
I don't know if it's the cleanest solution, but it should work.
This worked for me:
$form[FORM_ITEM]['#attributes']['onkeypress'][]="jQuery('input').keydown(function(e) {if (e.keyCode == 13) {e.preventDefault(); jQuery('#edit-submit').mousedown();}});";
I'm not an expert in JS, but this is how i would have tackled the issue myself.
I didn't test it, but I suggest adding something like the following statement in your js file
$( document ).ready(function() {
$( "#target" ).keypress(function() {
if ( event.which == 13 ) {
$('my_form').submit();
}
});
});
Basically, you look for the keypress event 13, then you submit your form.
I hope your form doesn't have any textarea tags, because you might face some user issues.
EDIT: Where to add the Javascript?
I assume you are writing a custom module to generate your form, so you can add a path to the .info file of your module or use the function drupal_add_js("your_path_to_js_file"); which is probably a better solution here.
I hope it helps.
Cheers
I am new to PHP and CakePHP. I m trying to call Ajax on changing drop down item. I have done it for a link as below code
echo $this->Html->link('TestLink', array('controller'=>'Tutors','action'=>'getData',$iid), array('class'=>'js-ajax'));
but unable to apply on drop down. I have used the code for drop down as below
echo $this->Form->input('My City', array('empty'=>'Select City','options' => $cities));
here, where to put code to call ajax.
Please help.
You should bind an ajax event to js-ajax
$('.js-ajax').on('change', function(){
// do some ajax here.
});
`
If its just the selector you're looking to add to trigger the ajax, then do the following:
echo $this->Form->input('My City', array(
'empty'=>'Select City',
'options' => $cities,
'class' => 'js-ajax'
));
Then you can have your javascript onchange called with this selector
Why you don't use jquery to do this?
put in your webroot and call in your layout(app/view/layouts)
$(document).ready(function(){
//your code
$("#youFieldId").change(function(){
//Your logic
});
});
Say I am on a view on my Cake app. E.g. http://myapp.com/controller/action/argument
I am aware of generating a link with the HtmlHelper like so:
echo $this->HtmlHelper->link( 'Link title', array('controller' => 'mycontroller', 'action' => 'myaction', $parameter) );
Now, say I have a dropdown select box with a load of options in it. What's the best way to have the link use the value in the select box as the parameter for the action? Would I need to use jQuery to change the link upon dropdown change?
You should wrote the CakePHP link as more generic as you can, so using a jQuery function like that:
function displayVals() {
var src = $( "#sel" ).val();
$('#link').attr('href',src);
}
and a HTML part like that:
<form action="../">
<select id="sel" name="myDestination">
<option value="http://www.yahoo.com/">YAHOO</option>
<option value="http://www.google.com/">GOOGLE</option>
</select>
</form>
click
your result will be something similar to this this fiddle.
yes you can do this by using jquery
just use html script block for getting the script inside your html.
echo $this->Html->scriptBlock("
$('#yourSelectBoxId').change(function() {
var url = '". $this->Html->url(array(
'controller' => 'mycontroller',
'action' => 'myaction', $parameter
)) ."'; // just setting your url like this.
// you can proceed further with url
})
")
Okay so i have a combobox with two options.
Now if one of the options is selected a new input field should appear.
echo $this->Form->input('group_id', array( 'id' => 'groupId'));
echo $this->Form->input('clientid',array( 'type' => 'hidden', 'id' => 'id_client',));
And for that i would use Jquery to check the values
<script>
$(document).ready(function () {
$("#groupId").change(function () {
if($(this).val() == 2){
// do set visible
}
})
});
</script>
My question is: how can i change the type of the field to visible? i have tried: $('#groupId').show(); also $('#clientid').get(0).type = 'text';
But didnt seem to work and i am starting to wonder if this is the best way of doing such a thing?
$(this).attr('type', 'text');
You're doing it wrong.
type="hidden" is not appropriate to hide UI elements (form fields or anything else).
You should instead use the CSS attribute display. Change your clientid input type to "text". When groupId is not 2, set display: none on your clientid input. When it's 2, set display: block.
With jQuery, you can use $('#clientid').show() and .hide().
For instance:
<select id="groupId"><!-- options... --></select>
<input type="text" id="clientId" />
<script>
$(document).ready(function () {
function showHideClient() {
var show_client = $(this).val() == 2;
$("#clientId").toggle(show_client); // hide or show
}
// we bind the "change" event to the hide/show checking
$("#groupId").change(showHideClient);
// and we call it at page load to hide the input right away if needed
showHideClient();
});
</script>
How can I add a text behind a form element in Zend Framework? Let's say I have a text input field, first there is a label, bellow the label there is an actual input field but I want to add some additional text (2-3 sentences) behind the input field. Something like a short tip or suggestion what is the best value for that field.
You can simply add a description to the input element, e.g.
$element = new Zend_Form_Element_Text('itemName', array(
'label' => 'My Label',
'description' => 'Enter some text'
));
From the ZF Manual Chapter 23.7.3. Zend_Form_Decorator_Description:
By default, if no description is present, no output is generated. If the description is present, then it is wrapped in an HTML p tag by default, though you may specify a tag by passing a tag option when creating the decorator, or calling setTag(). You may additionally specify a class for the tag using the class option or by calling setClass(); by default, the class 'hint' is used.
So to modify the decorator you would write something like
$element->setDecorators(
array(
'ViewHelper',
'Errors',
array('Description', array('placement' => 'append',
'escape' => false,
'tag' => 'span')),
array('HtmlTag', array('tag' => 'dd')),
array('Label', array('tag' => 'dt', 'escape' => false))
));
You also might want to check this series of tutorials about Zend Form Decorators.
You can use the description option as an element option to add a <p> tag with your description, after the element (with default decorators.)
You strategy then simply requires some CSS to position the description in the right place. Something like
dd.myelement{
position: relative;
}
dd.myelement p {
position: absolute;
top:0;
right: 0;
}
You'll probably need z-index properties on the input and p too:
dd.myelement p {
z-index: 1;
}
dd.myelement input {
z-index: 2;
}
There might be a CSS property missing (I've written that from memory) but I hope you get the idea :)
Richard,
you need a decorator! :) They are sometimes a little complicated, but I've been using the following tutorial, which is probably a little outdated, but not less helpful. Especially check the use of legend. I think that's perfect for what you want to do.
Hope this helps!