Verena: Button während dem Upload

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

  1. 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");

    1. 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

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Lid und Lido.

      1. 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

        1. 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

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen übel und Übeltalferner.

          1. 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

        2. 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

          1. 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

            1. 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

    2. 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

      1. 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

    3. 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

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
      1. 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

        --
         ☻_
        /▌
        / \ Nur selber lernen macht schlau
        http://bikers-lodge.com
  2. 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

    1. @@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'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. "rechts" ist die Abkürzung für "rechtliches"?

        Oder eine politische Bewegung?
        Ich glaube ich helfe nicht mehr :D.

        Gruß
        Verurteilender Vorurteiler
        T-Rex

      2. 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

        1. 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

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Fell und Fellatio.

    2. 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

      --
      Ich spreche Spaghetticode - fließend.
    3. 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:(