HTML Formular Versand (ausgeblendete Elemente)

Eased04

Guten Tag Gemeinde,

ich habe folgendes Problem -> mit dem unten angehänten "Script" bin ich soweit zufrieden (bin gewiss kein ProfI).
Allerdings habe ich dass Problem dass mir zwar im Klartext auf der Seite nur die Felder angezeigt werden, welche ich auch durch die vorherige Auswahl (Radiobutton) brauche, jedoch muss ich zum Versand über den Versenden Button sämtliche Required Felder bestücken (sprich in jede Auswahl rein gehen und das Feld bestücken, da es ja ein "required" Feld ist... Das ist natürlich nicht praktikabel.
Fällt da jemand eine geschicktere Lösung ein.
Es muss definitiv bestehen bleiben dass in beiden (später noch mehrere Fälle) Fällen jeweils Felder ausgefüllt werden MÜSSEN, jedoch möchte ich diese natürlich nur ausfüllen, wenn der entsprechende Radio Button dazu betätigt wurde.

Danke für die Hilfe!!

</script>

<div id="Portale">
<input type="radio" name="Portale" value="Portal1"> Portal1<br>
<input type="radio" name="Portale" value="Portal2"> Portal2<br>

</div>

<form id="Portale" action="mailto:MAILADRESSE"
method="post" enctype="text/plain">
<div id="Auswahl">
<div id="Portal1">
<p><h2> Portal1</h2>
<p>Nr.: <input type="text" name="Nummer1" required="required" /> <br>
<p>Version: : <input type="text" name="Version2" required="required" /> <br>

</div>
<div id="Portal2">
<p>Nr.1: <input type="text" name="Nummer2" required="required" /> <br>
<p>Version: <input type="text" name="Version2" /> <br>

</div>
<input type="Submit" name="absenden" value="absenden">
</form>
</html>

synaptic

javascript hat aber in der eigentlichen validierung des formulars nix zu suchen....
das kannste zwar nutzen, um die werte vorab abzufangen und verschiedene mandatory fields vorzugaukeln, aber die "echte" validierung sollte niemals mit javascript ablaufen, sondern immer mit der serverseitigen validierung.

die du aber nicht hast, weil du ja direkt ne mail per lokaler software versenden willst...
geht zwar, aber rate ich von ab

Eased04

Sorry, kannst du es evlt. nochmals für dumme ausführen (ich hoffe dass war nicht bereits die Variante für dumme :D).

Das einzige Problem was ich damit habe ist wie erwähnt nur dass sämtliche Required Felder ausgefüllt werden müssen, obwohl diese nicht ausgefüllt sind.
Also Portal2 müsste in diesem Fall auch ausgefüllt werden obwohl Portal1 ausgewählt wurde... Jedoch wären natürlich nach der jeweiligen Auswahl des Portals die Felder unbedingt auszufüllen.

Dass mit dem Mailprogramm ist tatsächlich vorraussetzungen - jeder hat hier Outlook auf seinem Rechner.

Ist nur eine kleine Spielerei in der Firma - es soll lediglich ein "Antrag" mit ein paar Feldern bestückt werden.
Jedoch sollten halt die Einträge unter den jeweiligen Auswahlpunkten "versteckt" sein bzw. erst nach betätigen des jeweiligen Buttons sichtbar werden.

synaptic

ok ich gebs auf..^^
das war schon die leichte version...
aber eventuell hilft dir das hier:
habs aufgeräumt, nen html-grundgerüst hinzugefügt

und das mit den requireds hingeflanscht. is nich performant, is nich gekapselt aber sollte für deine zwecke genügen.

HTML

<!DOCTYPE html>
<html>
    <head>
         <script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
        <script type="text/javascript">
        <!--
        $(document).ready(function(){
            $('#auswahl div').hide();
            $('#Portale input[type=radio]').click(function(){
                $('#Auswahl div').hide();
                $('#'+$(this).val()).show();
                if($(this).val()=='Portal1'){
                    $('#Portal1').find('input[name='Nummer1']').attr('required','required');
                    $('#Portal1').find('input[name='Version2']').attr('required','required');
                    $('#Portal2').find('input[name='Nummer2']').removeAttr('required');
                }else{
                    $('#Portal1').find('input[name='Nummer1']').removeAttr('required');
                    $('#Portal1').find('input[name='Version2']').removeAttr('required');
                    $('#Portal2').find('input[name='Nummer2']').attr('required','required');
                }
            });
        });
        -->
        </script>
    </head>
    <body>
        <div id="Portale">
            <input type="radio" name="Portale" value="Portal1"> Portal1<br>
            <input type="radio" name="Portale" value="Portal2"> Portal2<br>
        </div>
        <form id="Portale" action="mailto:MAILADRESSE" method="post" enctype="text/plain">
            <div id="Auswahl">
                <div id="Portal1">
                    <h2> Portal1</h2>
                    <p>Nr.: <input type="text" name="Nummer1" required="required" /></p>
                    <p>Version: : <input type="text" name="Version2" required="required" /></p>
                </div>
                <div id="Portal2">
                    <h2> Portal2</h2>
                    <p>Nr.1: <input type="text" name="Nummer2" required="required" /></p>
                    <p>Version: <input type="text" name="Version2" /></p>
                </div>
            </div>
            <input type="Submit" name="absenden" value="absenden">
        </form>
    </body>
</html>

Alles anzeigen

Tags