Button während dem Upload
Verena
- programmiertechnik
Guten Morgen,
ein User kann auf meiner Seite ein Bild bis zu 25 MB hochladen, da viele einfach immer wieder auf den Button klicken weil sie denken es passiert nichts, möchte ich gerne den Button während dem Upload ändern bzw. austauschen. Ist dieses Möglich? Wenn ja wie könnte ich dieses umsetzten? Oder gibt es eine andere einfache Möglichkeit?
Liebe Grüße aus Köln
Verena
Einfach alle Upload Felder unsichtbar machen, wenn User auf den Submitbutton geklickt hat
$(document).on("click","#submitbutton", function() {
$("input[type='file']").css("display", "none");
return true;
});
$("#rex_signatur").css("display", "none");
Om nah hoo pez nyeetz, T-Rex!
Einfach alle Upload Felder unsichtbar machen, wenn User auf den Submitbutton geklickt hat
Keine Gute Idee.
$("#rex_signatur").css("display", "none");
Unwesentlich besser:
$("#rex_signatur").attr("disabled", "disabled");
Deutlich besser, aber auch deutlich aufwändiger: ein Progress-Element, das den entsprechenden Fortschritt zeigt.
Matthias
Hallo,
Deutlich besser, aber auch deutlich aufwändiger: ein Progress-Element, das den entsprechenden Fortschritt zeigt.
das hat man mir auch schon gesagt, aber ich finde für ein kleines Formular ist das zu viel Aufwand oder?
Liebe Grüße
Verena
Om nah hoo pez nyeetz, Verena!
das hat man mir auch schon gesagt, aber ich finde für ein kleines Formular ist das zu viel Aufwand oder?
Die Frage ist, ob du zufriedene Benutzer deiner Seite haben möchtest. Ein Nutzer braucht eine Rückmeldung, ob sich das warten noch lohnt.
Matthias
Hallo,
Die Frage ist, ob du zufriedene Benutzer deiner Seite haben möchtest. Ein Nutzer braucht eine Rückmeldung, ob sich das warten noch lohnt.
klar möchte ich zufriedene Benutzer haben. Gibt es dafür eine am liebsten Deutsche Anleitung wie ich so etwas einbauen kann? Ich kann zwar Englisch aber mir wäre eine Deutsche Anleitung lieber.
Danke für eure Hilfe.
Liebe Grüße
Verena
hi,
das hat man mir auch schon gesagt, aber ich finde für ein kleines Formular ist das zu viel Aufwand oder?
nein, mit den neuen Features, XHR2 und FormData ist das kein großer Aufwand.
Horst
Hallo Horst,
nein, mit den neuen Features, XHR2 und FormData ist das kein großer Aufwand.
vielen Dank für den Link, ich schau mir das gleich an, sieht sehr gut aus. Danke dir.
Liebe Grüße
Verena
hi,
nein, mit den neuen Features, XHR2 und FormData ist das kein großer Aufwand.
vielen Dank für den Link, ich schau mir das gleich an, sieht sehr gut aus. Danke dir.
Gehe tiefer rein, es lohnt sich, denn bei dieser Gelegenheit könntest Du auch anstelle eines unschönen <input type="file"> eine ansprechbar gestaltete Drop-Area verwenden.
Was Du auf MDN findest, ist einfach der Wahnsinn, konzentriere Dich auf FileReader, Blob, XHR2 und FormData.
Horst
Guten Morgen,
$(document).on("click","#submitbutton", function() {
> $("input[type='file']").css("display", "none");
> return true;
> });
>
vielen Dank für deinen Hilfe, hätte dazu noch eine Frage. Ist es möglich dass ich den Button wechsel und dafür ein Hinweistext einblende?
Liebe Grüße
Verena
vielen Dank für deinen Hilfe, hätte dazu noch eine Frage. Ist es möglich dass ich den Button wechsel und dafür ein Hinweistext einblende?
Also ich hab total direkt auf deine Frage geantwortet. Was Matthias sagt ist für den User natürlich besser und hotti hat dir eine (auf den ersten blick) einfache Lösung gezeigt eine Progressbar zu implementieren.
Wenn du jedoch weiter meinen 08/15 weg gehen willst, dann lass dir gesagt sein dass du alles machen kannst was du willst.
$(document).on("click","#submitbutton", function() {
$("input[type='file']").css("display", "none");
$("#hinweisblock").css("display", "block");
//--- um noch einfacher und banaler zu werden könntest du sogar ein "loader" einbauen.
$("#loader").css("display", "block");
return true;
});
Wenn du einen Loader einbauen möchtest kannst du dir bei ajaxloader einen hübschen zusammenbauen.
Gruß
08/15 Bankkunde
T-Rex
Hi,
Einfach alle Upload Felder unsichtbar machen, wenn User auf den Submitbutton geklickt hat
$(document).on("click","#submitbutton", function() {
Ist es sinnvoll, das an das Klick-Ereignis des Submit-Buttons zu hängen?
Klar, die Frage von Verena lautet genau so, aber:
Ich würde es eher an das Submit-Ereignis des Formulars hängen - ein Formular kann ja auch abgeschickt werden, ohne daß ein/der Submit-Button gedrückt wird.
cu,
Andreas
Hello,
Einfach alle Upload Felder unsichtbar machen, wenn User auf den Submitbutton geklickt hat
$(document).on("click","#submitbutton", function() {
Ist es sinnvoll, das an das Klick-Ereignis des Submit-Buttons zu hängen?
Klar, die Frage von Verena lautet genau so, aber:Ich würde es eher an das Submit-Ereignis des Formulars hängen - ein Formular kann ja auch abgeschickt werden, ohne daß ein/der Submit-Button gedrückt wird.
Dann müsste also das ganze Submit-Ereignis selber abgefangen und ins Nirvana schicken.
Und außerdem würde ich den Button nicht ausblenden (Display:none) sondern nur unwirksam machen (disabled). Dafür gibt es dann auch noch eine pseudo-Class (input[name=telefon]:disabled).
Liebe Grüße aus dem schönen Oberharz
Tom vom Berg
Hallo,
hab mein Formular nun mit HTML und CSS erstellt und wollte fragen ob das HTML und CSS so richtig ist, dass es auch überall gut angezeigt wird? Ich habe zwar schon einiges über HTML5 gelesen aber wüsste jetzt nicht, wie ich dieses hier einsetzten soll.
Vielleicht habt ihr noch eine Idee für Verbesserungen. Achtung das ganze soll derzeit nicht responsive sein.
HTML Code:
<div id="container">
<div id="inhalt">
<form id="form1" name="form1" method="post" action="">
<fieldset>
<div class="textfeld">
<label for="name">Ihr Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="textfeld">
<label for="mail">Ihre eMail</label>
<input type="email" name="mail" id="mail" />
</div>
<div class="textfeld">
<label for="telefon">Ihre Telefonnummer</label>
<input type="tel" name="telefon" id="telefon" />
</div>
<div class="textfeld">
<label for="nachricht">Ihre Nachricht</label>
<textarea name="nachricht" id="nachricht" rows="10" cols="6" ></textarea>
</div>
<div class="submitbutton">
<input type="submit" value="Absenden" />
</div>
</fieldset>
</form>
</div>
<div id="rechts">
Hier kann der Datenschutz veröffentlich werden!
</div>
</div>
Mein CSS Code:
#container {
width:960px;
min-height:500px;
}
#inhalt {
width:500px;
float:left;
}
form {
padding: 20px;
}
fieldset {
margin: 0;
padding: 10px;
border: 0px;
}
.textfeld, .submitbutton{
margin: 15px 15px 10px 180px;
}
fieldset label{
display: block;
}
.textfeld input, .textfeld textarea{
width: 250px;
padding: 4px;
display: block;
border-radius: 2px;
border: 1px solid #999;
}
.textfeld label{
margin-left: -180px;
float: left;
width: 150px;
}
label{
cursor: pointer;
}
#rechts {
margin-left: 20px;
width:200px;
float:left;
padding: 40px 0 0 0;
}
Liebe Grüße
Verena
@@Verena:
nuqneH
<div id="rechts">
Hier kann der Datenschutz veröffentlich werden!
</div>
"rechts" ist die Abkürzung für "rechtliches"? Ansonsten ist es als Klassenname ungeeignet.
Qapla'
"rechts" ist die Abkürzung für "rechtliches"?
Oder eine politische Bewegung?
Ich glaube ich helfe nicht mehr :D.
Gruß
Verurteilender Vorurteiler
T-Rex
Hallo,
"rechts" ist die Abkürzung für "rechtliches"? Ansonsten ist es als Klassenname ungeeignet.
eigentlich nicht, da diese Spalte auf diversen Seiten vorkommen soll, das soll eigentlich sagen, dass diese Spalte auf der Rechten Seite zu sehen ist.
Liebe Grüße
Verena
Om nah hoo pez nyeetz, Verena!
eigentlich nicht, da diese Spalte auf diversen Seiten vorkommen soll, das soll eigentlich sagen, dass diese Spalte auf der Rechten Seite zu sehen ist.
Verwende Klassenbezeichner entsprechend des Inhaltes, nicht entsprechend der (gegenwärtig gewünschten) Darstellung.
Matthias
Moin,
<div id="container">
<div id="inhalt">
Kennst du schon die neuen Elemente [main](http://www.w3.org/wiki/HTML/Elements/main), [section](http://www.w3.org/wiki/HTML/Elements/section) und [article](http://www.w3.org/wiki/HTML/Elements/article)? Diese sind zur Strukturierung von Seiten seit HTML5 dabei und besser geeignet als Divs.
> ~~~html
<div id="rechts">
> Hier kann der Datenschutz veröffentlich werden!
> </div>
Dieses Div könnte eventuell durch das Aside-Element ersetzt werden.
Grüße Marco
Hi,
hab mein Formular nun mit HTML und CSS erstellt und wollte fragen ob das HTML und CSS so richtig ist, ...
technisch ja, aber trotzdem nicht unbedingt günstig oder elegant.
<div id="container">
<div id="inhalt">
<form id="form1" name="form1" method="post" action="">
Wozu ist div#inhalt nötig? Es fällt strukturell mit dem form-Element zusammen, daher könntest du diesen div-Container auch entsorgen und die Formatierungen direkt auf form anwenden.
Und braucht das form-Element einen Namen? Nicht wirklich, oder?
> ~~~html
<fieldset>
> <div class="textfeld">
> <label for="name">Ihr Name</label>
> <input type="text" name="name" id="name" />
> </div>
>
> <div class="textfeld">
> <label for="mail">Ihre eMail</label>
> <input type="email" name="mail" id="mail" />
> </div>
Ich weiß nicht, was du bei dieser Struktur im Sinn hattest und wozu die gruppierenden div-Element gut sein sollen, die jeweils ein input- und ein label-Element zusammenfassen. Gefühlsmäßig würde ich sagen, dass man diese Gruppierung mit fieldset hätte machen sollen, das ja ansonsten in deinem Beispiel nicht sehr sinnvoll eingesetzt wäre: Ein fieldset, das sämtliche form-controls enthält? Nöö ...
<div id="rechts">
Hier kann der Datenschutz veröffentlich werden!
</div>
Dazu haben die Kollegen ja schon genug gesagt - ich hatte denselben Gedanken.
So long,
Martin
--
Der Gast geht solange zum Tresen, bis er bricht.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(