✔ onclick abfragen und anzeigen

[fredolin]

Hallo Tuts Gemeinde,

hab da mal wieder ein Problem mit JavaScript. Was will ich erreichen?
Also in einem Formular verwende ich verschiedenen Bezahlarten. Bei einigen Bezahlarten soll der Kunde dann seine Bankdaten eingeben.
Beim anklicken der Bezahlart, soll dann die Formularelemante in einengesonderten Bereich in der Webseite auf gehen.

So hier mal der Coder der Seite

ist nur ein Teil, wäre zulang wenn ich alles rein tue

Hier die Bezahlarten
<form action="#" method="post">
<table>
    <tr>
    <td><input type="radio" name="payment" value="24" class="radio" ></td>
    <td><img src="img/modullogo_bp_kk_zw.gif" align="middle" /></td>
    <td>Kreditkarte (International)</td>
    <td>&nbsp;</td>
  </tr>
        <tr>
    <td colspan=4><hr /></td>

  </tr>
    <tr>
    <td><input type="radio" name="payment" value="26" class="radio" ></td>
    <td><img src="img/modullogo_bp_lv_zw.gif" align="middle" /></td>
    <td>Lastschrift (Deutschland/Österreich)</td>
    <td>&nbsp;</td>
  </tr>
        <tr>

      <td colspan="2">&nbsp;</td>
      <td>Kontoinhaber: *</td>
      <td><input type="text" name="deb_owner" value=""></td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;</td>
      <td>BLZ: *</td>
      <td><input type="text" name="deb_bankcode" value=""></td>

    </tr>
    <tr>
      <td colspan="2">&nbsp;</td>
      <td>Konto: *</td>
      <td><input type="text" name="deb_account" value=""></td>
    </tr>
        <tr>
    <td colspan=4><hr /></td>

  </tr>
    <tr>
    <td><input type="radio" name="payment" value="29" class="radio" ></td>
    <td><img src="img/modullogo_bp_gp_zw.gif" align="middle" /></td>
    <td>Giropay&reg (Deutschland)</td>
    <td>&nbsp;</td>
  </tr>

        <tr>
      <td colspan="2">&nbsp;</td>
      <td>BLZ: *</td>
      <td><input type="text" name="gir_bankcode" value=""></td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;</td>
      <td>Konto: *</td>

      <td><input type="text" name="gir_account" value=""></td>
    </tr>
        <tr>
    <td colspan=4><hr /></td>
  </tr>
    <tr>
    <td><input type="radio" name="payment" value="18" class="radio" ></td>
    <td><img src="img/modullogo_bp_vk_zw.gif" align="middle" /></td>
    <td>Vorkasse (International)</td>

    <td>&nbsp;</td>
  </tr>
    <tr>
    <td colspan=4><hr /></td>
  </tr>
    <tr>
    <td><input type="radio" name="payment" value="10" class="radio" ></td>
    <td><img src="img/modullogo_bp_or_zw.gif" align="middle" /></td>
    <td>Offene Rechnung (International)</td>

    <td>&nbsp;</td>
  </tr>
    <tr>
    <td colspan=4><hr /></td>
  </tr>
	  <tr>
  	<td><input type="radio" name="payment" value="43" class="radio" ></td>
  	<td><img src="img/modullogo_bp_sue_zw.gif" align="middle" /></td>
  </tr>

  	  <tr>
      <td colspan="2">&nbsp;</td>
      <td>Kontoinhaber: *</td>
      <td><input type="text" name="ebank_owner" value=""></td>
  </tr>
  <tr>
      <td colspan="2">&nbsp;</td>
      <td>BLZ: *</td>

      <td><input type="text" name="ebank_bankcode" value=""></td>
  </tr>
  <tr>
      <td colspan="2">&nbsp;</td>
      <td>Konto: *</td>
      <td><input type="text" name="ebank_account" value=""></td>
  </tr>
  	  	<tr>

    <td colspan=4><hr /></td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td colspan="2"><INPUT TYPE="SUBMIT" name="_senden" value="Buchen"></td>
  </tr>
</table>
</form>

Das ist das PAymentformular, wo ich nun über das <input> Feld den Namen und den Inahlt des VALUE gerne auslesen möchte.
Wenn jemand in das FEld <input type="radio" ...../> reinklick, das ich weiss was er geklickt hat und dazu die Informationen anzeigen kann.

Ich hoffe IHr versteht mich nun besser?
Hier schon mal mein JAvaScript Code was ich probiere

function init(){
	var pa = document.getElementById("pay");
	for (i = 0; i <= pa.length; ++i);
	alert (pa);
	if(pa[i].value == "24") {
		alert("Kreditkarte");
		return true;
	} else if(pa[i].value == "26") {
		alert("Lastschrift");
		return true;
	} else if(pa[i].value == "29") {
		alert("Giropay");
		return true;
	} else if(pa[i].value == '43') {
		alert("E-Banking");
		return true;
	}
	return false;
}

Gruß
Fredolin

 

[one6666]

Wo ist den der Fehler ?
du beschreibst leider nur was du gerne machen möchtest, aber nicht wo es Probleme gibt

Was ich aber jetzt schon sehe ist das du versuchst auf ein Array zuzugreifen, document.getElementById() gibt aber kein Array aus,
Da müsstest du mit document.getElementByTagName()[] arbeiten

 

[Sven Mintel]

Moin fredolin,

genaugenommen müsstest du mit document.getElemenstByName() arbeiten.

Anstatt das value-Attribut zu Prüfen(dies ändert sich nicht, egal ob der Button ausgewählt wurde oder nicht), teste darauf, ob die Eigenschaft checked des Buttons true ist.

 

[fredolin]

Hallo Sven,

leider weiss ich nicht genau wie ich anfangen soll... und wie ich es aufbauen soll.. das ist mein Problem..

wenn du mir da starthilfe geben könntest..


Danke gruß
Fredolin

 

[fredolin]

Habe nun doch was zusammen gebastelt.
Aber leider bekomme ich immer eine Fehlermeldung.

Hier mein JavaScript-Code

function showValue(){
	var cols = document.getElementsByName('payment');
	for (var i=0; i<cols.length; i++) {
   if (cols[i].checked == true) {
      alert('Ihr gewähltes Payment ist ' + cols[i].nextSibling.nodeValue);
      break;
   }
 }
}

ich benutze dieses Script in einem Paymentformular, wo ich mehrere Paymenttypen (KK / LS / GP / VK / OR) benutze.
Die Paymenttypen spreche ich so an

<form action="" method="post">
 <input type="radio" onClick="showValue();" name="payment" value="24" id="24" /><br />
 <input type="radio" onClick="showValue();" name="payment" value="29" id="29" /><br />
 <input type="radio" onClick="showValue();" name="payment" value="10" id="10" /><br />
u.s.w

</form>

Das Script liefert mir dann einen Fehler, wo ich nichts mit anfangen kann, weil normalerweise der Wert gesetzt bzw. gefüllt sein sollte.

Fehlermeldung: cols[i].netSibling is null

Kann ir jemand weiter helfen

Gruß
Fredolin

 

[Sven Mintel]

Hier mal eine ganz simple und zugleich sehr performante Lösung.
(performant deswegen, weil sie nicht erfordert, endlos Zeilen zu durchlaufen)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2010-02-09" />
<title>Test</title>
<style type="text/css">
<!--
form fieldset{
display:none;
}
form.klasse1 fieldset.klasse1,
form.klasse2 fieldset.klasse2,
form.klasse3 fieldset.klasse3{
  display:block
}
-->
</style>
</head>
<body>
<form action="#" method="post">
  <table border="1">
    <tr>
      <td>
        <input name="payment"  type="radio"  onclick="if(this.checked)this.form.className='klasse1';" >klasse1
        <fieldset class="klasse1">
          mehr zeugs#1
        </fieldset>
      </td>
    </tr>
    <tr>
      <td>
        <input name="payment"  type="radio"  onclick="if(this.checked)this.form.className='klasse2';" >klasse2
        <fieldset class="klasse2">
          mehr zeugs#2
        </fieldset>
      </td>
    </tr>
    <tr>
      <td>
        <input name="payment"  type="radio"  onclick="if(this.checked)this.form.className='klasse3';" >klasse3
        <fieldset class="klasse3">
          mehr zeugs#3
        </fieldset>
      </td>
    </tr>
  </table>
</form>  
</body>
</html>

Geändert wird jeweils nur der Klassenname des Formulars, der Rest geschieht über das CSS.
(Hab die zusätzlichen Daten mal in einem <fieldset> untergebracht, der IE scheint zumindest bis V7 diese Lösung im Zusammenhang mit Tabellenelementen zu Verweigern)

 

[fredolin]

Das Formular ist ein Paymentformular, wo der User die Bezahlart auswählen kann die er möchte.

Was möchte ich erreichen?
ICh möchte erreichen, das bei der Auswahl der Bezahlart sich ein Textfeld oder ein zusätzliches Fomfeld, wo der User BLZ und Konto-Nr. eingeben kann, erscheint.

Super wäre, wenn dann noch ein preloder vorher läuft, der den User informiert das weitere Daten geladen werden.

So ich habe auch es hinbekommen, mit den onClick Event die ausgewählte Bezahlart per alert an zu zeigen.

Code des Paymentformular (diese wird per include in die index.php eingefügt)

<?php if ($ccard){?>
        <div class="paymentradio"><input id="24" onClick="showValue();" type="radio" name="payment" value="24" class="radio" <?php if (isset($_REQUEST['payment']) && $_REQUEST['payment']=='24') echo 'checked';?>></div>
        <div class="paymentgrafik"><img src="<?php echo $picpfad ?>modullogo_bp_kk_zw.gif" align="middle" /></div>
        <div class="paymentgrafik"><?php echo BUSINESS_PAYMENT_CCARD ?></div>
        <div class="layerdiv" id="24" style="display: none;">
            <div class="background-color: #ADADAD;">
                Hier soll dann die Informationen eingeblendet werden
            </div>
        </div>
        <div class="clear"></div>
    <?php }?>
        <div class="clear"></div>
    <?php if ($debit){?>
        <div class="paymentradio"><input id="26" onClick="showValue();" type="radio" name="payment" value="26" class="radio" <?php if (isset($_REQUEST['payment']) && $_REQUEST['payment']=='26') echo 'checked';?>></div>
        <div class="paymentgrafik"><img src="<?php echo $picpfad ?>modullogo_bp_lv_zw.gif" align="middle" /></div>
        <div class="paymentgrafik"><?php echo BUSINESS_PAYMENT_DEBIT ?></div>
        <!--<div class="layerdiv">
            <?php if ($uos_direct_debit == 1){?>
                <div class="payment_box">
                    <?php echo BUSINESS_PAYMENT_KONTOINHABER ?>: <?php if (in_array('deb_owner',$checkFieldsDebitDirect)) echo '*';?><br/>
                    <input type="text" name="deb_owner" value="<?php if (isset($_REQUEST['deb_owner'])) echo $_REQUEST['deb_owner'];?>"><br/><br/>
                </div>
                <div class="payment_box">
                    <?php echo BUSINESS_PAYMENT_BLZ ?>: <?php if (in_array('deb_bankcode',$checkFieldsDebitDirect)) echo '*';?><br/>
                    <input type="text" name="deb_bankcode" value="<?php if (isset($_REQUEST['deb_bankcode'])) echo $_REQUEST['deb_bankcode'];?>"><br/><br/>
                </div>
                <div class="payment_box">
                    <?php echo BUSINESS_PAYMENT_KONTO ?>: <?php if (in_array('deb_account',$checkFieldsDebitDirect)) echo '*';?><br/>
                    <input type="text" name="deb_account" value="<?php if (isset($_REQUEST['deb_account'])) echo $_REQUEST['deb_account'];?>"><br/><br/>
                </div>
            <?php } ?>
        </div>//-->
        <div class="clear"></div>
    <?php } ?>
    <div class="clear"></div>
    <?php if ($giropay){?>
        <div class="paymentradio"><input id="29" onClick="showValue();" type="radio" name="payment" value="29" class="radio" <?php if (isset($_REQUEST['payment']) && $_REQUEST['payment']=='29') echo 'checked';?>></div>
        <div class="paymentgrafik"><img src="<?php echo $picpfad ?>modullogo_bp_gp_zw.gif" align="middle" /></div>
        <div class="paymentgrafik"><?php echo BUSINESS_PAYMENT_GIROPAY ?></div>
        <!--<div class="layerdiv" id="giropay">
            <?php if ($uos_direct_giro == 1){?>
                <div class="payment_box">
                    <?php echo BUSINESS_PAYMENT_BLZ ?>: <?php if (in_array('gir_bankcode',$checkFieldsGiroDirect)) echo '*';?><br/>
                    <input type="text" name="gir_bankcode" value="<?php if (isset($_REQUEST['gir_bankcode'])) echo $_REQUEST['gir_bankcode'];?>"><br/><br/>
                </div>
                <div class="payment_box">
                    <?php echo BUSINESS_PAYMENT_KONTO ?>: <?php if (in_array('gir_account',$checkFieldsGiroDirect)) echo '*';?><br/>
                    <input type="text" name="gir_account" value="<?php if (isset($_REQUEST['gir_account'])) echo $_REQUEST['gir_account'];?>"><br/><br/>    
                </div>
            <?php } ?>
        </div>//-->
        <div class="clear"></div>
    <?php } ?>
        <div class="clear"></div>
    <?php if ($prepaid){?>
        <div class="paymentradio"><input id="18" onClick="showValue();" type="radio" name="payment" value="18" class="radio" <?php if (isset($_REQUEST['payment']) && $_REQUEST['payment']=='18') echo 'checked';?>></div>
        <div class="paymentgrafik"><img src="<?php echo $picpfad ?>modullogo_bp_vk_zw.gif" align="middle" /></div>
        <div class="paymentgrafik"><?php echo BUSINESS_PAYMENT_VORKASSE ?></div>
        <div class="layerdiv"></div>
    <?php } ?>
        <div class="clear"></div>
    <?php if ($invoice){?>
        <div class="paymentradio"><input id="10" onClick="showValue();" type="radio" name="payment" value="10" class="radio" <?php if (isset($_REQUEST['payment']) && $_REQUEST['payment']=='10') echo 'checked';?>></div>
        <div class="paymentgrafik"><img src="<?php  echo $picpfad ?>modullogo_bp_or_zw.gif" align="middle" /></div>
        <div class="paymentgrafik"><?php echo BUSINESS_PAYMENT_OFFENERECHNUNG ?></div>
        <div class="layerdiv"></div>
    <?php } ?>
        <div class="clear"></div>
    <?php if ($ebanking){?>
        <div class="paymentradio"><input id="43" onClick="showValue();" type="radio" name="payment" value="43" class="radio" <?php if (isset($_REQUEST['payment']) && $_REQUEST['payment']=='43') echo 'checked';?>></div>
        <div class="paymentgrafik"><img src="<?php  echo $picpfad ?>modullogo_bp_sue_zw.gif" align="middle" /></div>
        <div class="paymentgrafik"><?php echo BUSINESS_PAYMENT_SOFORTUEBERWEISUNG ?></div>
        <!--<div class="layerdiv" id="ebanking">
            <?php if ($uos_direct_ebank == 1){?>
                <div class="payment_box">
                    <?php echo BUSINESS_PAYMENT_KONTOINHABER ?>: <?php if (in_array('ebank_owner',$checkFieldseBankDirect)) echo '*';?><br/>
                    <input type="text" name="ebank_owner" value="<?php if (isset($_REQUEST['ebank_owner'])) echo $_REQUEST['ebank_owner'];?>"><br/><br/>
                </div>
                <div class="payment_box">
                    <?php echo BUSINESS_PAYMENT_BLZ ?>: <?php if (in_array('ebank_bankcode',$checkFieldseBankDirect)) echo '*';?><br/>
                    <input type="text" name="ebank_bankcode" value="<?php if (isset($_REQUEST['ebank_bankcode'])) echo $_REQUEST['ebank_bankcode'];?>"><br/><br/>
                </div>
                <div class="payment_box">
                    <?php echo BUSINESS_PAYMENT_KONTO ?>: <?php if (in_array('ebank_account',$checkFieldseBankDirect)) echo '*';?><br/>
                    <input type="text" name="ebank_account" value="<?php if (isset($_REQUEST['ebank_account'])) echo $_REQUEST['ebank_account'];?>"><br/><br/>
                </div>
            <?php } ?>
        </div>//-->
        <div class="clear"></div>
    <?php } ?>
        <div class="clear"></div>
        <div class="toggler" style="text-align: center;"><INPUT TYPE="SUBMIT" name="_senden" value="<?php echo PAYMENTSEND ?>"></div>

Hier mein Code vom JavaScript, was teilweise funktioniert, wo ich nun nicht weiter weis:

function showValue(){
    var cols = document.getElementsByName("payment");
    for(var i=0; i<cols.length; i++){
        if(cols[i].checked == true){
            if(cols[i].value == "24"){
                alert("Kreditkarte");
                var a = cols[i].value;
                alert (a);
                break;
                var pay = document.getElementById(a);
                if(!pay)return true;
                if(pay.style.display == 'none'){
                    pay.style.display == 'block';
                } else {
                    pay.style.display == 'none';
                }
                return true;
            }
        }
    }
}

Ich bekomme nun den Wert, den ich in col[i].value nicht in das document.getElementById() rein. Bekomme etweder [objectHTMLInputElement] oder es wird nichts angezeigt.

Woran kann es liegen? Weiß da jemand weiter?

Mit freundlichen Grüßen
Fredolin