0
Ich habe ein Problem, wenn ich auf meine Suchschaltfläche klicke.CSS-Umwandlung reinitialisiert nach dem Senden des Formulars
Wenn mein Formular zuerst geladen wird und ich ein Wort in die Eingabe eintippe, können wir sehen, dass sich das Etikett darin am unteren Ende der Eingabe bewegt, dank etwas translateY.
Aber wenn ich mein Formular abschicke, ist es so, als würde die CSS "abgebrochen" werden und zu dem zurückkehren, was es ursprünglich war, indem ich die Etiketten in die Eingabe zurücklegte.
Auch nach dem Senden, ist es nicht die gleiche Radio-Taste, die überprüft wird als vor dem Senden.
Gibt es eine Möglichkeit zu sagen "verlassen css wie es auch nach dem Absenden des Formulars"?
Dank
Im Folgenden sind meine HTML/CSS und JS
$(document).ready(
function() {
debugger;
$('.form').find('input:not([type="radio"])').on('keyup blur focus',
function(e) {
console.log('this is my script');
var $this = $(this),
label = $this.prev('label');
if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {
if ($this.val() === '') {
label.removeClass('highlight');
} else if ($this.val() !== '') {
label.addClass('highlight');
}
}
});
}
);*,
*:before,
*:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #c1bdba;
font-family: 'Titillium Web', sans-serif;
}
.form {
background: rgba(19, 35, 47, 0.9);
padding: 40px;
max-width: 70%;
margin: 40px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}
h1 {
text-align: center;
color: #ffffff;
font-weight: 300;
margin: 0 0 40px;
}
label {
position: absolute;
-webkit-transform: translateY(6px);
transform: translateY(6px);
left: 13px;
color: rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size: 18px;
}
label .req {
margin: 2px;
color: #57b7ff;
}
label.active {
transform: translateY(40px);
animation: forwards;
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #ffffff;
}
input:not([type=radio]),
textarea {
font-size: 22px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: none;
background-image: none;
border: 1px solid #a0b3b0;
color: #ffffff;
border-radius: 0;
-webkit-transition: border-color .25s ease, box-shadow .25s ease;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus,
textarea:focus {
outline: 0;
border-color: #ede741;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
position: relative;
margin-bottom: 10px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 23%;
margin-right: 2%;
}
.top-row > div:last-child {
margin: 0;
}
.button {
border: 0;
outline: none;
border-radius: 0;
padding: 15px 0;
margin-bottom: 10px;
font-size: 2rem;
font-weight: 300;
letter-spacing: .1em;
background: #57b7ff;
color: #ffffff;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover,
.button:focus {
background: #179b77;
}
.button-block {
display: block;
width: 30%;
}
.forgot {
margin-top: -20px;
text-align: right;
}
fieldset {
margin-bottom: 30px;
border: 0.5px solid #57b7ff;
}
legend {
font-size: 1.5rem;
color: #57b7ff;
}
/*.searchtype{
margin-left: 8px;
margin-top: 20px;
}*/
input[type=radio] {
margin-top: 10px;
margin-right: -5px;
padding: 0px;
}
label.radio {
cursor: pointer;
overflow: visible;
position: relative;
margin-bottom: 10px;
margin-right: 25px;
}
label.radio:before {
background: #57b7ff;
content: '';
position: absolute;
top: 0px;
left: -30px;
width: 20px;
height: 20px;
border-radius: 100%;
}
label.radio:after {
opacity: 0;
content: '';
position: absolute;
width: 0.5em;
height: 0.25em;
background: transparent;
top: 7.0px;
left: -25px;
border: 3px solid ghostwhite;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type=radio]:checked + label:after {
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form">
<div class="tab-content">
<div id="wrapperAll">
<h1>Wrapper Testing Tool</h1>
<form id="wrapperForm" method="POST" runat="server" action="WrapperTestingTool.aspx">
<fieldset>
<legend>Connection Info</legend>
<div class="top-row">
<div class="field-wrap">
<label>
Organization ID<span class="req">*</span>
</label>
<input id="inputOrgId" type="text" required autocomplete="off" runat="server" />
</div>
<div class="field-wrap">
<label>
User Name<span class="req">*</span>
</label>
<input id="inputUserName" type="text" required autocomplete="off" runat="server" />
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input id="inputPassword" type="password" required autocomplete="off" runat="server" />
</div>
<div class="field-wrap">
<label>
Source<span class="req">*</span>
</label>
<input id="inputSource" type="text" required autocomplete="off" runat="server" />
</div>
</div>
</fieldset>
<fieldset>
<legend>Client Details</legend>
<div class="top-row">
<div class="field-wrap">
<label>
Name<span class="req">*</span>
</label>
<input id="inputClientName" type="text" required autocomplete="off" runat="server" />
</div>
<div class="field-wrap">
<label>
Client ID<span class="req">*</span>
</label>
<input id="inputClientId" type="text" required autocomplete="off" runat="server" />
</div>
<input type="radio" value="None" id="radioIndividual" name="account" checked runat="server" />
<label for="radioOne" class="radio">Individual</label>
<input type="radio" value="None" id="radioOrg" name="account" runat="server" />
<label for="radioTwo" class="radio">Organization</label>
<input type="radio" value="None" id="radioElement" name="account" runat="server" />
<label for="radioThree" class="radio">Specific Element</label>
</fieldset>
<button type="submit" class="button button-block" />Search</button>
<div>
<textarea rows="6" cols="150" id="searchResults">
<%=t his.ResultLookup %>
</textarea>
</div>
</form>
</div>
</div>
<!-- tab-content -->
</div>
<!-- /form -->
Vielleicht möchten Sie das Formular mit Ajax einreichen? – mplungjan