Antworten auf deine Fragen:
Neues Thema erstellen

Javascript :: DIV-ANZEIGE nach Onclick Radio ::

puur

puur

Nicht mehr ganz neu hier

Einen wunderschönen,

Hab mir da mal wieder was überlegt. Undzwar folgendes:
Ich möchte etwas machen, was so ähnlich funktioniert wie ein Bilderwechsel, allerdings soll diesmal nicht ein Bild gewechselt werden, sondern ne ganze DIV Box samt Inhalt. -> Also z.B.

Man hat die wahl zwischen folgenden Zahlungsmethoden:
1. Überweisung
2. Bankeinzug
3. PayPal

Wenn man nun den Radio Button für Bankeinzug klickt soll eine neue DIV BOX erscheinen in der dann wieder input Felder sind für die Kontodaten.

---
Mein Ansatz:

HTML: 
<div style="padding-bottom: 5px;"><h5 style="padding-left: 0px;">Zahlungsmethode</h5></div>
<div style="float: left; width: 158px; color: #e0e0e0; padding-bottom: 10px;">
<input class="radio_margin-ie" type="radio" name="Zahlungsart" value="&Uuml;berweisung" />&nbsp;&Uuml;berweisung<br />
<input class="radio_margin-ie" type="radio" name="Zahlungsart" value="Bankeinzug" />&nbsp;Bankeinzug<br />
<input class="radio_margin-ie" type="radio" name="Zahlungsart" value="PayPal" />&nbsp;PayPal<br />
</div>
<br style="clear: left;" />
<div style="" name="Kontodaten"><input class="check" style="width:176px;" type="text" name="bankleitzahl" maxlength="50" /></div>
<div class="weiter_punkt4" style="margin-bottom: -10px;"><input class="submit" type="image" src="./images/bestellen/weiter_button.png" value="Absenden"></div>

HTML: 
function show_div(id)
{
    if (id == "2")
    {
        document.getElementById("kontodaten").style.display = 'block';
    }
    else
    {
        document.getElementById("kontodaten").style.display = 'none';
    }
    if (id == "3")
    {
        document.getElementById("paypalmail").style.display = 'block';
    }
    else
    {
        document.getElementById("paypalmail").style.display = 'none';
    }
}
 

C

Christian

verpeilt & verschallert

AW: Javascript :: DIV-ANZEIGE nach Onclick Radio ::

HTML: 
<script>
var d = document;
const PAYMENT_IDENT = 'displayZahlungsart';
function switchPayment( id ){
	var paymentContainer = d.getElementsByName( PAYMENT_IDENT );
	if( paymentContainer ){
		for( var i = 0; i < paymentContainer.length; i++ ){
			if( paymentContainer[i].id == "zahlart"+id ){
				paymentContainer[i].style.display = 'block';
			}else{
				paymentContainer[i].style.display = 'none';
			}
		}
	}
}
</script>

<div style="padding-bottom: 5px;"><h5 style="padding-left: 0px;">Zahlungsmethode</h5></div>
<div style="float: left; width: 158px; color: #e0e0e0; padding-bottom: 10px;">
<input class="radio_margin-ie" onClick="switchPayment(1);" type="radio" name="Zahlungsart" value="&Uuml;berweisung" />&nbsp;&Uuml;berweisung<br />
<input class="radio_margin-ie" onClick="switchPayment(2);" type="radio" name="Zahlungsart" value="Bankeinzug" />&nbsp;Bankeinzug<br />
<input class="radio_margin-ie" onClick="switchPayment(3);" type="radio" name="Zahlungsart" value="PayPal" />&nbsp;PayPal<br />
</div>
<br style="clear: left;" />
<div style="display:none;" id="zahlart1" name="displayZahlungsart">&Uuml;berweisung--</div>
<div style="display:none;" id="zahlart2" name="displayZahlungsart">Bankeinzug--</div>
<div style="display:none;" id="zahlart3" name="displayZahlungsart">PayPal--</div>
<div class="weiter_punkt4" style="margin-bottom: -10px;"><input class="submit" type="image" src="./images/bestellen/weiter_button.png" value="Absenden"></div>
=) In bestem Denglisch gecodet -.-
 
Zuletzt bearbeitet:
puur

puur

Nicht mehr ganz neu hier

AW: Javascript :: DIV-ANZEIGE nach Onclick Radio ::

Vielen Dank! Du warst mir wiedermal eine Große Hilfe das Script funktioniert einwandfrei.

***EDIT***
Fast Perfekt ;) Undzwar hast du evtl. eine Ahnung warum es im FF klappt aber im IE 6/7 nicht ? -JAVA ist eingeschaltet-

Hier der Code wie ich ihn eingebunden hab:
HTML: 
                                    <script>
                                    var d = document;
                                    const PAYMENT_IDENT = 'displayZahlungsart';
                                    function switchPayment( id ){
                                        var paymentContainer = d.getElementsByName( PAYMENT_IDENT );
                                        if( paymentContainer ){
                                            for( var i = 0; i < paymentContainer.length; i++ ){
                                                if( paymentContainer[i].id == "zahlart"+id ){
                                                    paymentContainer[i].style.display = 'block';
                                                }else{
                                                    paymentContainer[i].style.display = 'none';
                                                }
                                            }
                                        }
                                    }
                                    </script>

                                    <div style="margin-bottom: -10px;"><h5 style="padding-left: 0px;"><!--Zahlungsmethode--></h5></div>
                                    <div style="float: left; width: 158px; color: #e0e0e0; padding-bottom: 10px;">
                                        <input class="radio_margin-ie" onClick="switchPayment(1);" type="radio" name="Zahlungsart" value="&Uuml;berweisung" />&nbsp;&Uuml;berweisung<br />
                                        <input class="radio_margin-ie" onClick="switchPayment(2);" type="radio" name="Zahlungsart" value="Bankeinzug" />&nbsp;Bankeinzug<br />
                                        <input class="radio_margin-ie" onClick="switchPayment(3);" type="radio" name="Zahlungsart" value="PayPal" />&nbsp;PayPal<br />
                                    </div>
                                    <br style="clear: left;" />
                                    <div style="display:none;" id="zahlart2" name="displayZahlungsart">
                                        <h4>Kontodaten:</h4>
                                        <div style="float: left; padding-right: 15px; padding-top: 2px; font-family: Verdana; color: #cdcdcd; font-size: 10px;">Kontonummer: </div>
                                        <div style="float: left;"><input class="text2" style="margin-top: 1px; width: 103px;" type="text" name="Kto" /><br /></div>
                                        <br />
                                        <div style="float: left; padding-right: 26px; padding-top: 7px; font-family: Verdana; color: #cdcdcd; font-size: 10px;">Bankleitzahl: </div>
                                        <div style="float: left; padding-top: 5px;"><input class="text2" style="margin-top: 1px; width: 103px;" type="text" name="BLZ" /><br /></div>
                                        <br />
                                        <div style="float: left; padding-bottom: 10px; padding-right: 24px; padding-top: 7px; font-family: Verdana; color: #cdcdcd; font-size: 10px;">Kreditinstitut: </div>
                                        <div style="float: left; padding-bottom: 10px; padding-top: 5px;"><input class="text2" style="margin-top: 1px; width: 103px;" type="text" name="Bank" /><br /></div>
                                        <br /><br />
                                    </div>
                                    <div style="display:none;" id="zahlart3" name="displayZahlungsart">
                                        <div style="float: left; padding-bottom: 10px; padding-right: 15px; padding-top: 2px; font-family: Verdana; color: #cdcdcd; font-size: 10px;">PayPal E-mail: </div>
                                        <div style="float: left; padding-bottom: 10px;"><input class="text2" type="text" name="PayPal" /> <br /></div>
                                    </div>
                                    <div class="weiter_punkt4" style="margin-bottom: -10px;"><input class="submit" type="image" src="./images/bestellen/weiter_button.png" value="Absenden"></div>
 
Zuletzt bearbeitet:
C

Christian

verpeilt & verschallert

AW: Javascript :: DIV-ANZEIGE nach Onclick Radio ::

HTML: 
<script>
var d = document;
var PAYMENT_IDENT = 'displayZahlungsart';
function switchPayment( id ){
	var paymentContainer = d.getElementsByTagName( 'div' );
	
	if( paymentContainer ){
		for( var i = 0; i < paymentContainer.length; i++ ){
			if( paymentContainer[i].lang == PAYMENT_IDENT ){
				if( paymentContainer[i].id == "zahlart"+id ){
					paymentContainer[i].style.display = 'block';
				}else{
					paymentContainer[i].style.display = 'none';
				}
			}
		}
	}
}


</script>

<div style="margin-bottom: -10px;"><h5 style="padding-left: 0px;"><!--Zahlungsmethode--></h5></div>
<div style="float: left; width: 158px; color: #e0e0e0; padding-bottom: 10px;">
	<input class="radio_margin-ie" onClick="switchPayment(1);" type="radio" name="Zahlungsart" value="&Uuml;berweisung" />&nbsp;&Uuml;berweisung<br />
	<input class="radio_margin-ie" onClick="switchPayment(2);" type="radio" name="Zahlungsart" value="Bankeinzug" />&nbsp;Bankeinzug<br />
	<input class="radio_margin-ie" onClick="switchPayment(3);" type="radio" name="Zahlungsart" value="PayPal" />&nbsp;PayPal<br />
</div>
<br style="clear: left;" />
<div style="display:none;" id="zahlart2" lang="displayZahlungsart">
	<h4>Kontodaten:</h4>
	<div style="float: left; padding-right: 15px; padding-top: 2px; font-family: Verdana; color: #cdcdcd; font-size: 10px;">Kontonummer: </div>
	<div style="float: left;"><input class="text2" style="margin-top: 1px; width: 103px;" type="text" name="Kto" /><br /></div>
	<br />
	<div style="float: left; padding-right: 26px; padding-top: 7px; font-family: Verdana; color: #cdcdcd; font-size: 10px;">Bankleitzahl: </div>
	<div style="float: left; padding-top: 5px;"><input class="text2" style="margin-top: 1px; width: 103px;" type="text" name="BLZ" /><br /></div>
	<br />
	<div style="float: left; padding-bottom: 10px; padding-right: 24px; padding-top: 7px; font-family: Verdana; color: #cdcdcd; font-size: 10px;">Kreditinstitut: </div>
	<div style="float: left; padding-bottom: 10px; padding-top: 5px;"><input class="text2" style="margin-top: 1px; width: 103px;" type="text" name="Bank" /><br /></div>
	<br /><br />
</div>
<div style="display:none;" id="zahlart3" lang="displayZahlungsart">
	<div style="float: left; padding-bottom: 10px; padding-right: 15px; padding-top: 2px; font-family: Verdana; color: #cdcdcd; font-size: 10px;">PayPal E-mail: </div>
	<div style="float: left; padding-bottom: 10px;"><input class="text2" type="text" name="PayPal" /> <br /></div>
</div>
<div class="weiter_punkt4" style="margin-bottom: -10px;"><input class="submit" type="image" src="./images/bestellen/weiter_button.png" value="Absenden">
So Code für IE auch angepasst. Worauf Du jetzt achten musst, ist dass jedes Div-Element, das eine Zahlartspezifische Angabe enthält nun nicht mehr über name="displayZahlart" aufgerufen wird, sondern lang="displayZahlart". Der Grund ist, dass FF auf einmal rumzickt und divElement.name als undefined dargestellt wird. Der Grund ist mir jedoch schleierhaft :O
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 123 (Mitglieder: 2, Gäste: 121)
Robots: 565

Statistik des Forums

Themen
118.633
Beiträge
1.538.446
Mitglieder
67.555
Neuestes Mitglied
scheflo
Oben