onclick() auf Submit Button Grafik anzeigen, solange es lädt.

aJunkie · 3 Juni 2010

Du bist ein Schatz. Danke für deine Geduld. Jetzt ist es für mich auch logisch.

Für Nachfolger mit selben Interessen:

HTML:

<form action="" method="post" enctype="multipart/form-data" onSubmit="document.getElementById('gif').style.display = 'block';"> // *

/* Hier die Felder */

<input type="submit" value="Abschicken" onsubmit="this.disabled = 'disabled';">
<br>
<img id="gif" src="/img/loading.gif" width="128" height="15" alt="Formular l&auml;dt" style="display:none;"> // display:none; = Die Grafik vorerst nicht zeigen. *Bei Abschicken/Submitten, wird display auf block gesetzt und die Grafik sichtbar.
</form>

Danke nochmal. =)

bacci · 21 Juni 2012

Das gleiche Problem ...

aJunkie schrieb:

Du bist ein Schatz. Danke für deine Geduld. Jetzt ist es für mich auch logisch.

Für Nachfolger mit selben Interessen:

HTML:

<form action="" method="post" enctype="multipart/form-data" onSubmit="document.getElementById('gif').style.display = 'block';"> // *

/* Hier die Felder */

<input type="submit" value="Abschicken" onsubmit="this.disabled = 'disabled';">
<br>
<img id="gif" src="/img/loading.gif" width="128" height="15" alt="Formular l&auml;dt" style="display:none;"> // display:none; = Die Grafik vorerst nicht zeigen. *Bei Abschicken/Submitten, wird display auf block gesetzt und die Grafik sichtbar.
</form>

Danke nochmal. =)

Habe in etwas das gleiche Problem, nur mache ich anscheinend irgendetwas falsch, da es bei mir nicht klappt.

Es wird keine Fehlermeldung ausgegeben und die Seite läuft, nur das eben die ladegrafik nicht angezeigt wird.

Hier mal mein gekürtzter code:

HTML:

<form action="<?php echo ListbingoHelper::lbroute('index.php?option='.$option.'&task=ads.save&Itemid='.$listitemid); ?>" method="post" id="adSubmitForm" name="adSubmitForm" class="form-validate" enctype="multipart/form-data" onSubmit="document.getElementById('gif').style.display = 'block';">

.....

 <div class="gb_button_wrapper">
<!-- Submit Grafik -->
<img id="gif" src="http://www.html.de/images/loading.gif" alt="Anzeige wird Veröffentlicht" style="display:none;"> <br>
<!-- // display:none; = Die Grafik vorerst nicht zeigen. *Bei Abschicken/Submitten, wird display auf block gesetzt und die Grafik sichtbar. -->
<!-- ende Submit Grafik -->  
  <button id="adSubmitBtn" class="gbButton validate" type="submit"><?php echo JText::_('SAVE_LBAD'); ?></button>
  <?php
  $cancellink = ListbingoHelper::lbroute("index.php?option=$option&task=categories&cancel=1&Itemid=$listitemid");
  ?>
  <button type ="button" onclick="location.href='<?php echo $cancellink;?>';" class="gbButton"><?php echo JText::_('CANCEL');?></button>
 </div>
 <input type="hidden" name="edit" value="<?php echo $this->edit; ?>" onsubmit="this.disabled = 'disabled';" />
 <input type="hidden" name="option" value="<?php echo $option?>" onsubmit="this.disabled = 'disabled';" /> 
 <input type="hidden" name="Itemid" value="<?php echo $listitemid; ?>" onsubmit="this.disabled = 'disabled';" /> 
 <input type="hidden" name="task" value="ads.save" onsubmit="this.disabled = 'disabled';" /> 
 <?php echo JHTML::_( 'form.token' ); ?>
</form>

Es wird nichteinmal der Button disabled und die Grafik erscheint auch nicht, wenn ich zum Testen aber das style="display:none;" rausnehme, ist der Ladebalken da ...

wo liegt mein Fehler, oder was muss ich machen das es funktioniert ...
:cry:

vielen Dank im voraus für eure hilfe und Mühe ...

lG.bacci

threadi · 21 Juni 2012

Bitte zeig den erzeugten HTML-Code, nicht den PHP-Code.

bacci · 22 Juni 2012

threadi schrieb:
Bitte zeig den erzeugten HTML-Code, nicht den PHP-Code.

zuerst erstmal ein DANKE !!!

Wenn ich dich richtig verstanden habe, möchtest du sozusagen den Quelltext der geöffneten Seite sehen ...

dann hier die form action zeile aus dem Quelltext der Seite:

HTML:

<form action="/index.php?option=com_listbingo&amp;task=ads.save&amp;Itemid=139" method="post" id="adSubmitForm" name="adSubmitForm" class="form-validate" enctype="multipart/form-data" onSubmit="document.getElementById('gif').style.display = 'block';">

und die Zeile die mit den buttons zu tun haben ...

HTML:

 <div class="gb_button_wrapper">
<!-- Submit Grafik -->
<img id="gif" src="/images/loading.gif" alt="Anzeige wird Ver�ntlicht" style="display:none;"> <br>
<!-- // display:none; = Die Grafik vorerst nicht zeigen. *Bei Abschicken/Submitten, wird display auf block gesetzt und die Grafik sichtbar. -->
<!-- ende Submit Grafik -->  
  <button id="adSubmitBtn" class="gbButton validate" type="submit" onsubmit="this.disabled = 'disabled';">Kleinanzeige jetzt buchen/speichern</button>
    <button type ="button" onclick="location.href='/index.php?option=com_listbingo&amp;task=categories&amp;cancel=1&amp;Itemid=139';" class="gbButton">Abbrechen</button>
 </div>
 <input type="hidden" name="edit" value="1" />
 <input type="hidden" name="option" value="com_listbingo" /> 
 <input type="hidden" name="Itemid" value="139" /> 
 <input type="hidden" name="task" value="ads.save"/> 
 <input type="hidden" name="6608363e220d857e96b2191685139723" value="1" /></form>
</div>

da der Button nicht einmal gesperrt wurde, hatte ich inzwischen versucht das onsubmit direkt am button einzubinden, aber es wird auch dort nicht beachtet.

Vielen Dank für ere Mühe ... und liebe Grüße... Bacci

threadi · 23 Juni 2012

Ja, das hast Du richtig erkennt. Allerdings kann ich in dem Quellcode kein Problem erkennen. Was sagt denn die JavaScript-Konsole, wenn Du das Formular abschickst?

bacci · 23 Juni 2012

hmm ... zeigt garnichts an ...es werden weder in den Entwicklertools noch im Firebug irgenden ein Fehler in der Konsole angezeigt :shock:

Da ja nicht einmal der Button ausgegraut wird, ist auch die frage ob das onsubmit="this.disabled = 'disabled';" dort:

HTML:

<button id="adSubmitBtn" class="gbButton validate" type="submit" onsubmit="this.disabled = 'disabled';">Kleinanzeige jetzt buchen/speichern</button>

überhaupt richtig ist ....

habe auch schon mal mit onclick versucht, aber klappt genausowenig ...

HTML:

  <button id="adSubmitBtn" class="gbButton validate" type="submit" onclick="this.disabled='disabled';"><?php echo JText::_('SAVE_LBAD'); ?></button>

gibt es evtl. noch eine andere Möglichkeit, oder muss ich das onclick oder onsubmit noch irgendwo als script angeben ??

Danke und ein schönes WE .... bacci

threadi · 23 Juni 2012

Auf das onsubmit des buttons habe ich bisher gar nicht geachtet. Und ja, es ist falsch an der Stelle. Wenn Du die Buttons deaktivieren willst, dann mach es über das onsubmit des Formulars.

HTML:

<form action="#" onsubmit="document.getElementById('adSubmitBtn').disabled='disabled';">

bacci · 23 Juni 2012

threadi schrieb:
Auf das onsubmit des buttons habe ich bisher gar nicht geachtet. Und ja, es ist falsch an der Stelle. Wenn Du die Buttons deaktivieren willst, dann mach es über das onsubmit des Formulars.

HTML:

<form action="#" onsubmit="document.getElementById('adSubmitBtn').disabled='disabled';">

Vielen Dank, leider auch dabei keine reaktion ...

Wenn ich zum testen mal mit mouseover arbeite, wird der Button beim drüberfahren mit der Maus sofort ausgegraut also inaktiv gesetzt, also das hier klappt von der funktion her:

HTML:

<button id="adSubmitBtn" class="gbButton validate" type="submit" onmouseover="this.disabled='disabled';"><?php echo JText::_('SAVE_LBAD'); ?></button>

warum dann bei onclick oder onsubmit nicht ...

threadi · 23 Juni 2012

Ist die verwendete ID vielleicht doppelt im HTML-Code enthalten? Dann kannst auch nichts werden.

Den EventHandler solltest Du wie gesagt nicht an das button-Element hängen sondern an das Formular. Das onmouseover dort funktioniert ist logisch, bringt dir aber nichts.

bacci · 23 Juni 2012

threadi schrieb:
Ist die verwendete ID vielleicht doppelt im HTML-Code enthalten? Dann kannst auch nichts werden.

Nein, hab den ganzen Quelltext durchsucht ...

threadi schrieb:
Den EventHandler solltest Du wie gesagt nicht an das button-Element hängen sondern an das Formular. Das onmouseover dort funktioniert ist logisch, bringt dir aber nichts.

Sorry, das verstehe ich leider nicht, warum ist das logisch das onmouseover geht und onsubmit oder onclick nicht ??

lG.bacci

threadi · 23 Juni 2012

Der onsubmit-EventHandler ist nur in <form>-Elementen zulässig, nicht bei <button>. Siehe:
SELFHTML: JavaScript / Sprachelemente / Event-Handler

onclick sollte bei <button> funktionieren. Bringt dir nur wenig, da es ja um den Versand des Formulars geht welchen man auch per Drücken auf Enter starten kann. Daher ist der Eventhandler onsubmit im <form>-Element richtig und relevant.

bacci · 23 Juni 2012

o.k.

scheint doch ein id problem zu sein, wenn ich die button id ändere und in der zeile anpasse gehts.

HTML:

<form action="<?php echo ListbingoHelper::lbroute('index.php?option='.$option.'&task=ads.save&Itemid='.$listitemid); ?>" method="post" id="adSubmitForm" name="adSubmitForm" class="form-validate" enctype="multipart/form-data" onsubmit="document.getElementById('adsSubmitBtn').disabled='disabled';">

.............

<button id="adsSubmitBtn" class="gbButton validate" type="submit"><?php echo JText::_('SAVE_LBAD'); ?></button>

es gibt für die class=gbButton validate auch eine motools validation.js über welche noch das hier:

HTML:

window.addEvent('domready',function(){
 $('adSubmitBtn').addEvent('click',function(e){
  if(e.preventDefault)
  {
   e.preventDefault();
  }
  else if(e.stop)
  {
   e.stop();
  };
   var lbadform_valid = true; 
   var lbadform = $('adSubmitForm'); 
   if(validateImageType)
   {    
    var tags = document.getElementsByTagName("input");
    for(var i = 0; i < tags.length;i++)
    {   
     if(tags[i] && tags[i].type=="file" && tags[i].name=='images[]' && (tags[i].className=='inputtextbox adimg' || tags[i].className=='inputtextbox adimg required invalid') )
     {
      
      var pattern = '^[a-zA-Z0-9 -_\.]+\.('+acceptimagetypes.toLowerCase()+')$';
      if(!(tags[i].value.toLowerCase().match(pattern)) || tags[i].value == '') {       
       tags[i].className = "inputtextbox adimg required invalid";
       
      }
      else
      {       
       tags[i].className = "inputtextbox";
      }
     }      
    }
   }

aufgerufen wird, vielleicht hängt das damit zusammen ??

threadi · 23 Juni 2012

Kann sein, kann nicht sein. Lass das Script doch einfach mal weg. Mache eine Minimalversion von dem Formular und teste damit.

bacci · 24 Juni 2012

threadi schrieb:
Kann sein, kann nicht sein. Lass das Script doch einfach mal weg. Mache eine Minimalversion von dem Formular und teste damit.

Ich hab jetzt mal das:

HTML:

// $this->addJSI("validation");

rausgenommen, und siehe da ... es geht. Liegt also wirklich daran. Was kann ich machen das es auch ohne das script rauszunehmen funktioniert.
Kann man das irgendwie kombinieren ??

Und, ...ist das syntaxlich gesehen mit der doppelten onsubmit Anweisung so richtig:

HTML:

<form action="<?php echo ListbingoHelper::lbroute('index.php?option='.$option.'&task=ads.save&Itemid='.$listitemid); ?>" method="post" id="adSubmitForm" name="adSubmitForm" class="form-validate" enctype="multipart/form-data" onsubmit="document.getElementById('adSubmitBtn').disabled='disabled'; document.getElementById('subTXT').style.display = 'block';">


.........

<div align='center' id="subTXT" style="display:none;"><?php echo JText::_('Anzeige wird Hochgeladen, dies kann wenn Bilder mit Hochgeladen werden, etwas dauern ! '); ?>
</div>

  <button id="adSubmitBtn" class="gbButton validate" type="submit"><?php echo JText::_('SAVE_LBAD'); ?></button>
  <?php
  $cancellink = ListbingoHelper::lbroute("index.php?option=$option&task=categories&cancel=1&Itemid=$listitemid");
  ?>
  <button type ="button" onclick="location.href='<?php echo $cancellink;?>';" class="gbButton"><?php echo JText::_('CANCEL');?></button>
 </div>
 <input type="hidden" name="edit" value="<?php echo $this->edit; ?>" />
 <input type="hidden" name="option" value="<?php echo $option?>" /> 
 <input type="hidden" name="Itemid" value="<?php echo $listitemid; ?>" /> 
 <input type="hidden" name="task" value="ads.save" /> 
 <?php echo JHTML::_( 'form.token' ); ?>
</form>
</div>

Das mit der Grafik war blöd da diese so anscheinend auch deaktiviert wurde, es kam zwar die Grafik aber diese Bewegte sich nicht. Daher hab ich auf Text umgestellt.
Es funktioniert so jetzt zumindest, jedoch wird das script oben auch gebraucht, wird ja kaum umsonst drin sein.
Es handelt sich dabei um Listbingoo, ein Kleinanzeigenmarkt-addon für Joomla.

Danke und lG. bacci

threadi · 24 Juni 2012

Ich kenne die Funktion addJSI() nicht, weshalb ich auch nicht beurteilen kann, ob man das kombinieren kann. Da es sich scheinbar um jQuery handelt, könntest Du das Setzen des onsubmit-Eventhandlers evtl. auch darüber erreichen statt des direkt im HTML-Code zu schreiben.

bacci · 24 Juni 2012

threadi schrieb:
Ich kenne die Funktion addJSI() nicht, weshalb ich auch nicht beurteilen kann, ob man das kombinieren kann. Da es sich scheinbar um jQuery handelt, könntest Du das Setzen des onsubmit-Eventhandlers evtl. auch darüber erreichen statt des direkt im HTML-Code zu schreiben.

kann ich Dir irgendwas schicken, so das Du Dir das mal ansehen kannst, oder wie müsste das aussehen mit dem onsubmit-Eventhandlers ???

Danke und lG.bacci

onclick() auf Submit Button Grafik anzeigen, solange es lädt.

aJunkie

Mitglied

bacci

Neues Mitglied

threadi

Moderator

bacci

Neues Mitglied

threadi

Moderator

bacci

Neues Mitglied

threadi

Moderator

bacci

Neues Mitglied

threadi

Moderator

bacci

Neues Mitglied

threadi

Moderator

bacci

Neues Mitglied

threadi

Moderator

bacci

Neues Mitglied

threadi

Moderator

bacci

Neues Mitglied

Neueste Beiträge