Formular klonen und validieren

xorg1990 · 03. Aug. 2015

Hallo, ich hab da mal ein keine Verständnis frage zu meinen Vorhaben hier.

Code:

<!DOCTYPE html>
<head>
<title>Profile</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
    body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
} 


#mainFrame h1{
    text-align: center;
    margin-bottom: 80px;
}

#LogoutBtn{
    background:  #666666;
    float: left;
    margin-left: 10px;
    border: 1px solid green;
    padding: 3px 25px 3px 25px;
}


.submit input{
    width: 300px;
    margin-left: 20px;
    background: green;
    cursor:  pointer;
    
}

#menuFrame {
    clear:both;
    width:80%;
    overflow:hidden;
     margin-top:7px;
     margin-bottom: 130px;
}

#menu {
margin-left: -47px;
  padding:0; 
  margin:0 auto;
  list-style-type:none;
  float:left;
  position:relative; 
  left:50%;
  }
  
#menu li {
  float:left;
  position:relative;
  right:50%;
  }
  
#menu a {
  width:auto;
  display:block;
  padding:4px 16px;
  color:#fff; 
  background:#08c; 
  border:2px solid black;
  text-decoration:none;
  }
  
#menu a:hover {
  -moz-box-shadow:    inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow:         inset 0 0 10px #000000;
  color:#000; 
  background:#d4d4d4;
  }

.box_container{
    margin: 0 auto;
    width: 150px;
    height: 150px;
}
  
.Box1{
    border-bottom-left-radius: 0.3em;
    border-top-left-radius: 0.3em;
    float: left;
    overflow: hidden;
    margin-top:  50px;
    width: 50px;
    height: 50px;
}

.Box2{
      border-top-left-radius: 0.3em;
      border-top-right-radius: 0.3em;
    margin-top: -50px;;
    margin-left: 50px;
    width: 50px;
    height: 50px;
}
.Box2_a{
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    font-family: sans-serif;
    padding-left: 7px;
    font-style: normal;
    font-size: 20px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
}
.Box3{
    border-top-right-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
    margin-top: -50px;
    float: right;
    width: 50px;
    height: 50px;
}
.Box4{
      border-bottom-left-radius: 0.3em;
      border-bottom-right-radius: 0.3em;
    float: right;
    margin-right: 50px;
    width: 50px;
    height: 50px;
}

.box_container > div{
     -webkit-transition: -webkit-transform .8s ease-in-out;
  transition: transform .8s ease-in-out;
     background:#08c;
      box-shadow: 0 0 15px #000000;
}

.box_container:hover > div{
     -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
    color: #000;
    cursor: pointer;
    box-shadow: inset 0 0 15px #000000;
     background:#d4d4d4;
}

.formFrame{
    display: none;
    background: #666666;
    width: 810px;
    height: 400px;
    margin-top: 50px;
      margin: 0 auto;
      margin-bottom: 70px;
}

.AddForm{
    border-bottom-right-radius: 0.5em;
    border-top-right-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    border-top-left-radius: 0.5em;
    border-right:  solid 5px #000;
     border-left:  solid 5px #000;
    width: 363px;
    padding-left: 7px;
    padding-right: 7px;
    line-height: 1.5em;
    margin: 5px 0px 0px 5px;
}

.HelperPannel{
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    margin-top: -395px;
    float: right;
    width: 405px;
    height: inherit;
}

.HelperPannel h3{
    padding-top: 7px;
    margin: 0 auto;
}
</style>
<script>


 function validate(that){
	var num = that.id.replace("btn", "");
	var formCount = parseInt(num);
	var formsLength = document.forms.length;
	var GrabberName = document.forms[formsLength-2].GrabberName.value;
	console.log(formsLength);
	$("ul li:nth-child("+String(formCount+3)+") a").empty().append(GrabberName);
	
 }
$(document).ready(function(){
var a = 0;
	 
$(".GrabberName").hover(function(){
        $(".HelperPannel").append("<span class='hover'>The Grabber musst be a name</span>");
        
},function(){
    $(".hover").hide();
});

$(".VisibleFrequency").hover(function(){
        $(".HelperPannel").append("<span class='hover'>Enter the full Visible signal bandwidth </span>");
        
},function(){
    $(".hover").hide();
});
$(".Rate").hover(function(){
        $(".HelperPannel").append("<span class='hover'>Enter the Samplerate form your Soundcard input </span>");
        
},function(){
    $(".hover").hide();
});
$(".RX_Type").hover(function(){
        $(".HelperPannel").append("<span class='hover'>Select the receiver type. Is it Custum so a LO frequency must be entered</span>");
        
},function(){
    $(".hover").hide();
});

$(".LoFreq").hover(function(){
        $(".HelperPannel").append("<span class='hover'>Enter the Oscillator frequency from your Receiver.br>Only selectable when Rx type 'Custom' is selected.</span>");
        
},function(){
    $(".hover").hide();
});

$(".PhaseShift").hover(function(){
        $(".HelperPannel").append("<span class='hover'>In In special case you can decimate the Network bandwidth.</span>");
        
},function(){
    $(".hover").hide();
});

$(".Box2_a").click(function(){
        $(".formFrame").show(900);
        if (document.getElementsByClassName("formFrame").length < 3) {
            $("#menu").append('<li><a id="Grabber'+String(a)+'" href="#nogo">Unknown</a></li>');
            $(".formFrame").clone().appendTo("#mainFrame").css("display","none").show(900).find("#btn0").attr("id", "btn"+String(a));
            a++;
            }
});


});
</script>
</head>
<body style="background: rgb(51, 51, 51);">
    <div id="menuFrame">
        <span id="LogoutBtn">Logout</span>
		<ul id="menu">
			<li><a href="#nogo">Add</a></li>
			<li><a href="#nogo">Profile settings</a></li>
		</ul>
    </div>

<div id="mainFrame">
    <h1>Welcome</h1>
<div class="formFrame">
    <div class="AddForm">
<form>
    <table width="400" height="396">
  <tr>
    <td width="180">Grabbername:</td>
    <td class="GrabberName" width="283"> <input type="text" placeholder="Grabbername" name="GrabberName"></td>
  </tr>
  <tr>
    <td>Visible Frequency range:</td>
    <td class="VisibleFrequency"><input type="text" placeholder="472 kHz - 475kHz" name="VisibleFrequency"></td>
  </tr>
  <tr>
    <td>SampleRate:</td>
    <td class="Rate"><input type="number" placeholder="44100" name="Rate"> Hz</td>
  </tr>
  <tr>
    <td>RX Type:</td>
    <td class="RX_Type"><input type="radio" name="RX_Type" value="Custom">Custom<br><input type="radio" checked = "checked" name="RX_Type" value="Super...">Super...<br></td>
  </tr>
  <tr>
    <td>LO Frequency:</td>
    <td class="LoFreq"><input  type="number" placeholder="Lo Frequency in Hz" name="LoFreq"> Hz<br></td>
  </tr>
  <tr>
    <td>Min Frequncy Shift:</td>
    <td class="PhaseShift"><input type="radio" name="PhaseShift" value="100 Hz">100 Hz<input type="radio" name="PhaseShift" value="300Hz">300 Hz<input type="radio" name="PhaseShift" value="600Hz">600 Hz<br>
        <input type="radio" name="PhaseShift" value="800Hz">800 Hz<input type="radio" name="PhaseShift" value="1khz">1 kHz<input type="radio" name="PhaseShift" value="none">none</td>
  </tr>
  <tr>
    <td colspan="2" class="submit"><input type="button" onclick="validate(this)" id="btn0" name="Submitbtn" value="Submit"></td>
  </tr>
</table>
</form>
</div>
    <div class="HelperPannel">
     <h3>Helperpannel:</h3>
      
        
    </div>
</div>
</div>
<div class="box_container">
    <div class="Box1"></div>
    <div class="Box2"></div>
    <div class="Box2_a">add</div>
    <div class="Box3"></div>
    <div class="Box4"></div>
</div>

</body>
</html>

Das gute ist funktionieren tut alles, nur versteh ich nicht warum var formsLength = document.forms.length; 4 ist wenn ich doch nur 2 Formulare habe??
Gut ziehe ich halt 2 wider ab dann weiß ich von welchen Form der submit kam var GrabberName = document.forms[formsLength-2].GrabberName.value;

Gibt es noch eine einfachere Möglichkeit herauszufinden von welchen Formular der Klick nun kam.

Das action Attribut ist eher unschön, dann könnte man zwar this mitgeben, aber durch ein submit wird immer die Seite neu geladen. Das möchte ich nicht.

kkapsner · 03. Aug. 2015

In dem Parameter von validate hast du doch den Button. Da kannst du mit that.form direkt auf das <form> zugreifen

- - - Aktualisiert - - -

PS: Ich sehe nur ein <form>...

xorg1990 · 04. Aug. 2015

kkapsner schrieb:
Da kannst du mit that.form direkt auf das <form> zugreifen

Bist du dir sicher? Bin der Meinung da bekomme ich nur die Attribute des buttons, wenn dam müsste man das über das Action Attribut abwickeln. <form action="validate(this)"

kkapsner schrieb:
PS: Ich sehe nur ein <form>...

Das ist ja der Clou, dieses eine Form tue ich immer klonen, eben so viele Grabber der User erstellen will.

Code:

$(".Box2_a").click(function(){
        $(".formFrame").show(900);
        if (document.getElementsByClassName("formFrame").length < 3) {
            $("#menu").append('<li><a id="Grabber'+String(a)+'" href="#nogo">Unknown</a></li>');
            $(".formFrame").clone().appendTo("#mainFrame").css("display","none").show(900).find("#btn0").attr("id", "btn"+String(a));
            a++;
            }
});

Diese laaaange Zeile macht das klonen.

$(".formFrame").clone().appendTo("#mainFrame").css("display","none").show(900).find("#btn0").attr("id", "btn"+String(a));

find("#btn0").attr("id", "btn"+String(a));
Das war meine erste Idee um die Zugehörigkeit der Formulare zu erkennen. Das erste Form hat die id btn0, dass 2te geklonte die id btn1, erhöt durch die Zählvariable a.
Aber das funzt nicht so wirklich weil das 2te geklonte form das 4te ist, aber warum

Sehen tue ich jedenfalls nur 2.

kkapsner · 07. Aug. 2015

xorg1990 schrieb:
Bist du dir sicher?

Ja: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-form

Beim clonen machst du den Fehler. Der Selektor ".formFrame" passt natürlich auf alle <form>s. Beim ersten Clonen wird also ein zweites <form> erzeugt. Beim zweiten Clonen werden aber alle beide bestehenden <form>s erwischt und geclont -> du hast danach 4. Beim nächsten Clonen hättest du dann 8 usw. Du darfst immer nur ein <form> clonen.

PS: Deine Logik mit dem .show() ist auch irgendwie falsch.

xorg1990 · 07. Aug. 2015

kkapsner schrieb:
Ja: https://developer.mozilla.org/en-US/...nput#attr-form

Ah ok, bin ja auch nicht allwissend.

kkapsner schrieb:
Beim nächsten Clonen hättest du dann 8 usw. Du darfst immer nur ein <form> clonen.

Ja das habe ich gestern auch mitbekommen als ich das erste Formular ausgefüllt hatte, war beim klonen das 2te auch ausgefüllt.. da ging das Licht an.
Hab allerdings noch keine Gegenmaßnahmen unternommen weil, Büro brennt. Leipziger Neuseenland

Leipziger Toskana trift's besser *schwitz*.

=kkapsner schrieb:
PS: Deine Logik mit dem .show() ist auch irgendwie falsch.

inwiefern? meinst du ich kann das .css("display","none") weglassen weil ich es eh schon im CSS Block definiert habe und das mit vererbt wird.
show() muss ja sein sonnst wird nix eingeblendet.

kkapsner · 08. Aug. 2015

Du darfst nur das neu erzeugte <form> einblenden und nicht alle - sonst kannst du ja deine Vorlage verändern... außerdem hast du so, wie du es verwendest, das Problem, dass die geklonten <form>s eine Höhe und Breite von 1px haben.

xorg1990 · 08. Aug. 2015

Habe das erst mal soweit geändert:

Code:

<!DOCTYPE html>

<head>
    <title>Profile</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        
        #mainFrame h1 {
            text-align: center;
            margin-bottom: 80px;
        }
        
        #LogoutBtn {
            background: #666666;
            float: left;
            margin-left: 10px;
            border: 1px solid green;
            padding: 3px 25px 3px 25px;
        }
        
        .submit input {
            width: 300px;
            margin-left: 20px;
            background: green;
            cursor: pointer;
        }
        
        #menuFrame {
            clear: both;
            width: 80%;
            overflow: hidden;
            margin-top: 7px;
            margin-bottom: 130px;
        }
        
        #menu {
            margin-left: -47px;
            padding: 0;
            margin: 0 auto;
            list-style-type: none;
            float: left;
            position: relative;
            left: 50%;
        }
        
        #menu li {
            float: left;
            position: relative;
            right: 50%;
        }
        
        #menu a {
            width: auto;
            display: block;
            padding: 4px 16px;
            color: #fff;
            background: #08c;
            border: 2px solid black;
            text-decoration: none;
        }
        
        #menu a:hover {
            -moz-box-shadow: inset 0 0 10px #000000;
            -webkit-box-shadow: inset 0 0 10px #000000;
            box-shadow: inset 0 0 10px #000000;
            color: #000;
            background: #d4d4d4;
        }
        
        .box_container {
            margin: 0 auto;
            width: 150px;
            height: 150px;
        }
        
        .Box1 {
            border-bottom-left-radius: 0.3em;
            border-top-left-radius: 0.3em;
            float: left;
            overflow: hidden;
            margin-top: 50px;
            width: 50px;
            height: 50px;
        }
        
        .Box2 {
            border-top-left-radius: 0.3em;
            border-top-right-radius: 0.3em;
            margin-top: -50px;
            ;
            margin-left: 50px;
            width: 50px;
            height: 50px;
        }
        
        .Box2_a {
            color: #fff;
            display: table-cell;
            vertical-align: middle;
            font-family: sans-serif;
            padding-left: 7px;
            font-style: normal;
            font-size: 20px;
            margin-left: 50px;
            width: 50px;
            height: 50px;
        }
        
        .Box3 {
            border-top-right-radius: 0.3em;
            border-bottom-right-radius: 0.3em;
            margin-top: -50px;
            float: right;
            width: 50px;
            height: 50px;
        }
        
        .Box4 {
            border-bottom-left-radius: 0.3em;
            border-bottom-right-radius: 0.3em;
            float: right;
            margin-right: 50px;
            width: 50px;
            height: 50px;
        }
        
        .box_container > div {
            -webkit-transition: -webkit-transform .8s ease-in-out;
            transition: transform .8s ease-in-out;
            background: #08c;
            box-shadow: 0 0 15px #000000;
        }
        
        .box_container:hover > div {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
            color: #000;
            cursor: pointer;
            box-shadow: inset 0 0 15px #000000;
            background: #d4d4d4;
        }
        
        .formFrame {
            display: none;
            background: #666666;
            width: 810px;
            height: 400px;
            margin-top: 50px;
            margin: 0 auto;
            margin-bottom: 70px;
        }
        
        .AddForm {
            border-bottom-right-radius: 0.5em;
            border-top-right-radius: 0.5em;
            border-bottom-left-radius: 0.5em;
            border-top-left-radius: 0.5em;
            border-right: solid 5px #000;
            border-left: solid 5px #000;
            width: 363px;
            padding-left: 7px;
            padding-right: 7px;
            line-height: 1.5em;
            margin: 5px 0px 0px 5px;
        }
        
        .HelperPannel {
            font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
            margin-top: -395px;
            float: right;
            width: 405px;
            height: inherit;
        }
        
        .HelperPannel h3 {
            padding-top: 7px;
            margin: 0 auto;
        }
    </style>
    <script>
        function validate(that) {

            var num = that.id.replace("btn", "");
            var formCount = parseInt(num);
            var GrabberName = that.form.GrabberName.value;
            $("ul li:nth-child(" + String(formCount + 3) + ") a").empty().append(GrabberName);

        }
        
        $(document).ready(function() {
            var a = 0;

            $(".GrabberName").hover(function() {
                $(".HelperPannel").append("<span class='hover'>The Grabber musst be a name</span>");

            }, function() {
                $(".hover").hide();
            });

            $(".VisibleFrequency").hover(function() {
                $(".HelperPannel").append("<span class='hover'>Enter the full Visible signal bandwidth </span>");

            }, function() {
                $(".hover").hide();
            });
            $(".Rate").hover(function() {
                $(".HelperPannel").append("<span class='hover'>Enter the Samplerate form your Soundcard input </span>");

            }, function() {
                $(".hover").hide();
            });
            $(".RX_Type").hover(function() {
                $(".HelperPannel").append("<span class='hover'>Select the receiver type. Is it Custum so a LO frequency must be entered</span>");

            }, function() {
                $(".hover").hide();
            });

            $(".LoFreq").hover(function() {
                $(".HelperPannel").append("<span class='hover'>Enter the Oscillator frequency from your Receiver.br>Only selectable when Rx type 'Custom' is selected.</span>");

            }, function() {
                $(".hover").hide();
            });

            $(".PhaseShift").hover(function() {
                $(".HelperPannel").append("<span class='hover'>In In special case you can decimate the Network bandwidth.</span>");

            }, function() {
                $(".hover").hide();
            });

            $(".Box2_a").click(function() {
                $("#menu").append('<li><a id="Grabber' + String(a) + '" href="#nogo">Unknown</a></li>');
                $("#hiddenForm").clone().appendTo("#mainFrame").show(900).removeAttr("id").find("#btn0").attr("id", "btn"+String(a));;
                a++;

                // $(".formFrame").show(900);
                // if (document.getElementsByClassName("formFrame").length < 3) {
                //     $("#menu").append('<li><a id="Grabber'+String(a)+'" href="#nogo">Unknown</a></li>');
                //      $(".formFrame").clone().appendTo("#mainFrame").css("display","none").show(900).find("#btn0").attr("id", "btn"+String(a));
                //      a++;
                //      }
            });


        });
    </script>
</head>

<body style="background: rgb(51, 51, 51);">
    <div id="hiddenForm" style="display: none" class="formFrame">
        <div class="AddForm">
            <form>
                <table style="width: 400px; height:396px">
                    <tr>
                        <td style="width:180px">Grabbername:</td>
                        <td class="GrabberName" style="width:283px">
                            <input type="text" placeholder="Grabbername" name="GrabberName">
                        </td>
                    </tr>
                    <tr>
                        <td>Visible Frequency range:</td>
                        <td class="VisibleFrequency">
                            <input type="text" placeholder="472 kHz - 475kHz" name="VisibleFrequency">
                        </td>
                    </tr>
                    <tr>
                        <td>SampleRate:</td>
                        <td class="Rate">
                            <input type="number" placeholder="44100" name="Rate"> Hz</td>
                    </tr>
                    <tr>
                        <td>RX Type:</td>
                        <td class="RX_Type">
                            <input type="radio" name="RX_Type" value="Custom">Custom
                            <br>
                            <input type="radio" checked="checked" name="RX_Type" value="Super...">Super...
                            <br>
                        </td>
                    </tr>
                    <tr>
                        <td>LO Frequency:</td>
                        <td class="LoFreq">
                            <input type="number" placeholder="Lo Frequency in Hz" name="LoFreq"> Hz
                            <br>
                        </td>
                    </tr>
                    <tr>
                        <td>Min Frequncy Shift:</td>
                        <td class="PhaseShift">
                            <input type="radio" name="PhaseShift" value="100 Hz">100 Hz
                            <input type="radio" name="PhaseShift" value="300Hz">300 Hz
                            <input type="radio" name="PhaseShift" value="600Hz">600 Hz
                            <br>
                            <input type="radio" name="PhaseShift" value="800Hz">800 Hz
                            <input type="radio" name="PhaseShift" value="1khz">1 kHz
                            <input type="radio" name="PhaseShift" value="none">none</td>
                    </tr>
                    <tr>
                        <td colspan="2" class="submit">
                            <input type="button" onclick="validate(this)" id="btn0" name="Submitbtn" value="Submit">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="HelperPannel">
        <h3>Helperpannel:</h3>
    </div>

    <div id="menuFrame">
        <span id="LogoutBtn">Logout</span>
        <ul id="menu">
            <li><a href="#nogo">Add</a></li>
            <li><a href="#nogo">Profile settings</a></li>

        </ul>
    </div>

    <div id="mainFrame">
        <h1>Welcome</h1>

    </div>

    <div class="box_container">
        <div class="Box1"></div>
        <div class="Box2"></div>
        <div class="Box2_a">add</div>
        <div class="Box3"></div>
        <div class="Box4"></div>
    </div>

</body>

</html>

Allerdings wird jetzt das Jquery hover nicht mehr ausgeführt.

es bringt auch nix die hover aus dem $(document).ready herzunehmen.

Dann würde ich gerne von diesem Gedöns wegkommen .find("#btn0").attr("id", "btn"+String(a));
Dafür sollte es eine einfachere Möglichkeit geben.

- - - Aktualisiert - - -

Problem gefunden.
im clone() gehört noch ein true rein, dann geht auch das hover.:icon7:

Dann war noch durch das Umbauen das div <div class="HelperPannel">
verrutscht, das wurde nicht mit geklont. somit habe ich auch nix gesehen.

Nun möchte ich mir nur noch diese schritte ersparen.

Code:

  var num = that.id.replace("btn", "");
            var formCount = parseInt(num);

Gut am Ende fällt auch nur das repalce weg oder hat jemand ein bessere idee?

- - - Aktualisiert - - -

Gelöst:

Code:

$(document).ready(function(){
            //validate the entrys
            $('.Submitbtn').click(function () {
            var index = $('.Submitbtn').index(this);
            var GrabberName = this.form.GrabberName.value;
            $("ul li:nth-child(" + String(index + 2) + ") a").empty().append(GrabberName);
             });

//....

Formular klonen und validieren

xorg1990

New member

kkapsner

Super Moderator

xorg1990

New member

kkapsner

Super Moderator

xorg1990

New member

kkapsner

Super Moderator

xorg1990

New member