Hiding aui:input fields

[Chris T, modificado hace 11 años.]

Folks,

I've created a basic page using the AlloyUI taglibs, containing a select box and an <aui:input>. I'd like to hide the input dependant on the selected value of the select box.

Is there a way to easily hide the entire span generated by <aui:input> using Javascript? The few examples I've seen on the net have been around hiding the input field but I'd like to ensure the label is hidden aswell.

I'm very new to YUI/AUI, so apologies if there's something I've missed. I've been hunting through documentation and examples all afternoon but haven't found what I'm looking for.

What I've got so far ...

JSP :-

			<aui:select name="selectAmount" inlinelabel="true" label="select-amount" onchange="updateWarningInputField()">
				<aui:option value="0"></aui:option>
				<aui:option value="1">1</aui:option>
				<aui:option value="2">2</aui:option>
				<aui:option value="3">3</aui:option>
				<aui:option value="4">4</aui:option>
				<aui:option value="5">5</aui:option>
			</aui:select>

			<aui:input id="warningInput" inlineLabel="true" label="warning" name="warning" size="30" />

Script block within JSP :-

<script type="text/javascript">
	function updateWarningInputField() {
		var portletNamespace = '<portlet:namespace />';
		var selectedValue = $('#selectAmount').val();
		
		if(selectedValue == '0') {
			AUI().use('aui-base', function (A) {
				A.one('#' + portletNamespace + 'warningInput').hide();	
			});					
		} else {
			AUI().use('aui-base', function (A) {
				A.one('#' + portletNamespace + 'warningInput').show();	
			});
		}
	}
</script>

Your suggestions would be greatly appreciated!

Cheers,

Chris

[Chris T, modificado hace 11 años.]

Anyone?

I'm revisiting this after a couple of weeks off and still no clues!

Cheers,

Chris

[Faramarz Dorani, modificado hace 11 años.]

Hi Chris,

I solved your problem.
Just few changes are applied.

HTML PART:

<select name="selectAmount" id="selectAmount" title="select-amount" onchange="updateWarningInputField();">
         <option value="0"></option>
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
	</select>

    <input id="warningInput" value="warning" name="warning" size="30">

Just removed the aui: from tags.

SCRIPT PART:

function updateWarningInputField() {
         	//var portletNamespace = '<portlet:namespace />';
         	AUI().use('node', 'event', function(A) {
				var selectedValue = A.one('#selectAmount').val();
				if (selectedValue == '0') {
					AUI().use('node', 'aui-base', function (A) {
						A.one('#warningInput').hide();    
					});                    
				} else {
					AUI().use('node', 'aui-base', function (A) {
		                A.one('#warningInput').show();    
		            });
		        }
         	});
    	}

I tested this code and works fine for me.

Maybe it helps. ;)

[mohammad azaruddin, modificado hace 10 años.]

HI try this
A.one('#<portlet:namespace/>warningInput').ancestorsByClassName('aui-field-content').hide();