formularfelder erst aktivieren wenn ratio aktiv

Benjamin Rauer

Benjamin Rauer

Mitglied
hallo
ich habe ein kleines problem beim erstellen eines formulars.

in meinem Formular sind 4 ratio buttons und zu jedem ratio sind mehrere imputfelder.
jetzt sollen die imput-felder nur aktiviert werden sollen wenn der dazu gehörige ratio aktiviert ist.

hier mal mein form..
PHP: 
<form name="payout" method="post" action="">

<div class="form_de">
<input type="radio" value="ueb" name="austype">
<span class="f2"><?php echo JText::_('BONI_UBERWEISUNG'); ?></span> <span class="f1dgrey"><?php echo JText::_('BONI_DE'); ?></span>

<div class="az_bl">
<input readonly="" value="" name="de_inhaber" maxlength="50" size="25"><br><?php echo JText::_('BONI_KTOINHABER'); ?><br>
<input readonly="" value="" name="ueb_konto" maxlength="50" size="25"><br><?php echo JText::_('BONI_KTONR'); ?><br>
<input readonly="" value="" name="ueb_blz" maxlength="50" size="25"><br><?php echo JText::_('BONI_BLZ'); ?><br>
<input readonly="" value="" name="ueb_blz" maxlength="50" size="25"><br><?php echo JText::_('BONI_BANK'); ?>
</div>
</div>

<div class="form_eu">
<input type="radio" value="eu" name="austype"><span class="f2"><span class="darkblue"><b><?php echo JText::_('BONI_EU'); ?></b>
</span><?php echo JText::_('BONI_UBERWEISUNG'); ?></span> <span class="f1dgrey"><?php echo JText::_('BONI_AT'); ?></span>
<div class="az_bl">
<input readonly="" value="" name="eu_inhaber" maxlength="50" size="30"><br><?php echo JText::_('BONI_KTOINHABER'); ?><br>
<input readonly="" value="" name="eu_iban" maxlength="50" size="30"><br><?php echo JText::_('BONI_IBAN'); ?><span class="dgrey">(<?php echo $this->params->get('iban'); ?>)</span><br>
<input readonly="" value="" name="eu_bic" maxlength="50" size="30" ><br><?php echo JText::_('BONI_BIC'); ?><span class="dgrey">(<?php echo $this->params->get('bic'); ?>)</span><br>
<input readonly="" value="" name="eu_bank" maxlength="100" size="30"><br><?php echo JText::_('BONI_BANK'); ?>
</div>
</div>
</div>

<div class="clear"></div>

<div class="form_pp">
<input type="radio" value="paypal" name="austype"><span class="f2"><b><?php echo JText::_('BONI_PAYPAL'); ?></b><?php echo JText::_('BONI_TRANSFER'); ?></span><br>

<div class="ffix az_bl">
<div style="float:left;margin-right:10px;">
<input type="text" value="" name="wms_login" size="30"><br><?php echo JText::_('BONI_PAYPAL_ADDRESSE'); ?>
</div>
</div>
</div>

<div class="form_sp">
<div style="clear:both;" class="mt5">
<input type="radio" value="sp" name="austype" ><span class="f2b"><?php echo JText::_('BONI_SPENDE'); ?></span><img width="20" height="9" alt="" class="l4"b src="http://img4.klamm.de/images/itsnew.gif"><br>
<div class="f1dgrey az_bl"><?php echo JText::_('BONI_SPENDETEXT'); ?></div>
</div>
</div>

<div class="clear"></div>


<div class="send">
<?php $allowreceivecopy = $this->params->get('allowreceivecopy',1);
if ($allowreceivecopy){

echo '<label><input type="checkbox" name="receivecopy" id="receivecopy" checked/>'.JText::_('BONI_MAILCOPY').'</label> ';

}
?>

<input type="submit" disabled="" style="width:140px;" value="<?php echo JText::_('BONI_BEANTRAGEN'); ?>">
</div>

</form>

ich hoffe mir kann jemand dabei helfen.
 
HTML: 
<form name="payout" method="post" action="">

<!-- [1] -->

<input type="radio" value="ueb" name="austype">
<input readonly="" value="" name="de_inhaber" maxlength="50" size="25"><br>
<input readonly="" value="" name="ueb_konto" maxlength="50" size="25"><br>
<input readonly="" value="" name="ueb_blz" maxlength="50" size="25">
<input readonly="" value="" name="ueb_blz" maxlength="50" size="25">

<!-- [2] -->

<input type="radio" value="eu" name="austype">
<input readonly="" value="" name="eu_inhaber" maxlength="50" size="30">
<input readonly="" value="" name="eu_iban" maxlength="50" size="30">
<input readonly="" value="" name="eu_bic" maxlength="50" size="30">
<input readonly="" value="" name="eu_bank" maxlength="100" size="30">

<!-- [3] -->
<input type="radio" value="paypal" name="austype">
<input type="text" value="" name="wms_login" size="30">

<!-- [4] -->
<input type="radio" value="sp" name="austype" ><span class="f2b">

<input type="checkbox" name="receivecopy" id="receivecopy" checked>
<input type="submit" disabled="" style="width:140px;" value="?senden">


</form>
 
Hast du zufällig jQuery auf der Seite? Dann sieht die Lösung sehr viel einfacher aus. Falls nicht, dann hier die Idee, wie man es macht:

1. An alle vier radio Buttons einen "change" Listener hängen
2. Die Elemente die auf den radio Button reagieren sollen in ein gemeinsames div stecken (vier Stück insgesamt)
3. Wenn das change Event passiert, durchläuft du alle input-Elemente in den vier divs und deaktivierst sie
4. Jetzt noch eine eine div durchlaufen, dass zu dem radio Button gehört und alle input Elemente aktivieren
 
Ich war mir jetzt nicht sicher, was zu dem vierten radio Button gehört (gar nichts? die checkbox?). Aber das sollte reichen um weiter zu kommen.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Radio buttons</title>
</head>

<body>
	<form name="payout" method="post" action="">
		<input type="radio" value="ueb" name="austype">
		<div class="disableable">
			<input disabled="disabled" value="" name="de_inhaber" maxlength="50" size="25"><br>
			<input disabled="disabled" value="" name="ueb_konto" maxlength="50" size="25"><br>
			<input disabled="disabled" value="" name="ueb_blz" maxlength="50" size="25">
			<input disabled="disabled" value="" name="ueb_blz" maxlength="50" size="25">
		</div>
		
		<input type="radio" value="eu" name="austype">
		<div class="disableable">
			<input disabled="disabled" value="" name="eu_inhaber" maxlength="50" size="30">
			<input disabled="disabled" value="" name="eu_iban" maxlength="50" size="30">
			<input disabled="disabled" value="" name="eu_bic" maxlength="50" size="30">
			<input disabled="disabled" value="" name="eu_bank" maxlength="100" size="30">
		</div>
		
		
		<input type="radio" value="paypal" name="austype">
		<div class="disableable">
			<input type="text" value="" name="wms_login" size="30">
		</div>
		
		<input type="radio" value="sp" name="austype" />
		
		<input type="checkbox" name="receivecopy" id="receivecopy" checked="checked" />
		<input type="submit" disabled="" style="width:140px;" value="?senden" />
	</form> 
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	$(function() {
		var
			disableables = $('.disableable'),
			radios = $(':radio[name=austype]');
		
		radios.change(function() {
			//Erstmal alles deaktivieren
			disableables.find('input').attr('disabled', true);
			
			
			//Der index dex geänderten radio Buttons unter allen anderen
			var index = radios.index(this);
			
			//Den Kasten aktivieren, der zu dem radio Button passt
			disableables.eq(index).find('input').attr('disabled', false);
		});
	});
	/* ]]> */
	</script>
</body>

</html>
 
Hallo nochmal

jetzt habe ich mit der validierung ein problem
wenn ich jetzt den ersten ratio butten mit den 4 inputs aktiviere und die daten abschicken will,
bekomme ich die fehlermeldung, dass die daten im ratio 3 nicht korrekt sind.

kannst du mir sagen wie ich die validierung nur auf aktive ratio buttens richte
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück