xorg1990
New member
Hallo, ich hab da mal ein keine Verständnis frage zu meinen Vorhaben hier.
Das gute ist funktionieren tut alles, nur versteh ich nicht warum
Gut ziehe ich halt 2 wider ab dann weiß ich von welchen Form der submit kam
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.
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.
Sehen tue ich jedenfalls nur 2.