Hiding aui:input fields

[Chris T，修改在11 年前。]

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，修改在11 年前。]

Anyone?

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

Cheers,

Chris

[Faramarz Dorani，修改在11 年前。]

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，修改在10 年前。]

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