JavaScript Button nach Klick anklickbar machen

[Pfandfinder]

ich habe mit PHP eine Loop-Schleife mit Daten aus einer Datenbank. bei jedem Eintrag wird ein Button mit ausgegeben. dieser soll anfangs immer das attribut disabled haben damit man ihn nicht versehentlich klickt. wenn man ihn anklickt soll das attribut "verschwinden". ich habe es so probiert, aber es ändert sich nichts. Wieso ?

https://jsfiddle.net/soay2tp9/3/

data-loopnr kommt normalerweise aus PHP.

 

[madmax2010]

du hast eine variable loop genannt, aber ich sehe da keine schleife

HTML:
<input type="button" id="button" value="Click Me" />

JS:

var onClick = function() {
    alert('Hi');
};

$('#button').click(onClick);

 

[tollertyp]

Also du willst, wenn man einen nicht klickbaren Button klickt ... klingt irgendwie suspekt... also du verbietest das Klicken, willst aber auf ein Event reagieren?

@madmax2010:
Vielleicht weil der Loop im PHP ist?

 

[Pfandfinder]

ja man soll quasi 2x drauf klicken bis was passiert...

 

[tollertyp]

Also das Bedienkonzept ist etwas merkwürdig... also sicher, dass eine Art Bestätigungsdialog nicht sinnvoller wäre?

Ansonsten: Wenn der Button deaktiviert ist, kann man ihn nicht klicken. Du musst den deaktivierten Zustand quasi simulieren über CSS...

 

[abcddcba]

ja man soll quasi 2x drauf klicken bis was passiert...

das ist aber nicht intuitiv wenn er beim ersten mal disabled ist, oder? Warum machst du ihn nicht ganz normal enabled und machst nur beim 2. Click was auch immer du dann vorhast? Zu viel Aufwand dann eine Variable zum Zaehlen zu nutzen?

 

[Hancock]

Disabled Elemente erkennen keinen click.

Wie wäre es mit nicht disabled und beim 1. Klick kommt ein "Wirklich?"

Sonst hier die Stackoverflow-Diskussion: javascript - How to trigger a click event on disabled elements - Stack Overflow

 

[Pfandfinder]

Wie wäre es mit nicht disabled und beim 1. Klick kommt ein "Wirklich?"

das wäre auch gut. dass man das form dann erst absendet, wenn man das 2. mal drauf klickt. wie mache ich das ?

Ergänzung (22. Dezember 2020)

Hiermit mache ich es mit einer ID die ich angebe, aber wie setze ich das auf die loop-id ?

außerdem sendet er die form direkt beim 1. Klick, obwohl standardmäßig type="button" ist. der klick wird irgendwie erst nach dem Script gewertet, wenn er schon auf "submit" steht.

jQuery('.deletebutton').on('click', function(){
    var button=$('#1');
    button.html('Sicher?');
  document.getElementById(1).type = "submit";
});

<form action="action.php" method="POST">
    <button type="button" name="send" id="1" class="deletebutton" data-loopnr=".'.$row['id'].'" value="'.$row['liste'].'">klick</button>
</form>

 

[Hancock]

Wenn der beim Ändern auf type="submit" direkt abgesendet wird, musst du halt es erst beim zweiten Mal setzen.

Probier mal

jQuery(function() {
  jQuery('.deletebutton').on('click', function() {
      if(this.innerHTML=="Wirklich?"){
        this.type="submit";
    }
    this.innerHTML="Wirklich?";
  });
});

 

[Pfandfinder]

danke das geht.

ich würde aber gerne da ein font-awesome icon rein packen, dann funktioniert das bei deiner if-Abfrage aber nicht. wie kann ich das fixen ? kann ich ein str.includes einbauen ? damit ändert er den Text jetzt gar nicht mehr:

if (this.innerHTML(0, 4) == "Wirk") {

 

[netzgestaltung]

Hi,
ich würde den form submit statt dem click Event vorschlagen da Formulare auch anderweitig abgeschickt werden können (accessibility) sowie eine zusätzliche Variable anstatt das innerHtml auf einen String zu prüfen:

;(function($){
  var submit_index = 0,
      $form = $('.delete-form'),
      $button = $('.deletebutton');

  $form.on('submit', function(event){
    submit_index++;

    if ( submit_index < 2 ) {
      $button.html('Sicher?');
      event.preventDefault();
    }
  });
})(jQuery);

<form action="action.php" method="POST" class="delete-form">
  <button type="submit" name="send" id="1" class="deletebutton" data-loopnr=".'.$row['id'].'" value="'.$row['liste'].'">klick</button>
</form>

nochmal alternativ ohne jQuery:

;(function(){
  var submit_index = 0,
      $form = document.querySelectorAll('.delete-form'),
      $button = document.querySelectorAll('.deletebutton');

  $form.addEventListener('submit', function(event){
    submit_index++;

    if ( submit_index < 2 ) {
      $button.innerHTML = 'Wirklich?';
      event.preventDefault();
    }
  });
})();

Wenn es mehr als ein so ein formular auf der seite gibt würde ich alle forms auf einmal auswählen und den event handler in einer foreach schleife registrieren (für alle forms).

 

[RalphS]

Oder noch anders: einen Eventhandler bauen für onsubmit und ein Promise einbauen.
Dann kann man mit .then und .fail einen logischen Prozeßablauf festlegen. Und wenn man dort noch einen jquery-ui Dialog reinschiebt, dann ist das Ganze mehr oder weniger vollständig (jQ Dialoge sind frei konfigurierbar, einschließlich "Wollen Sie das?" - "Na gut" / "Na nee" oder sowas).

In etwa so (im Beispiel hat der Submit-Button die ID fsubmit):

$(function() {
    $("#fsubmit") // ID des Submitbuttons
        .on({
            click: function(theForm)
            {
                var $DialogState = $.Deferred();
                theForm.preventDefault();
                
                // Anker für den Dialog. Darauf achten, daß die ID eindeutig und bekannt ist
                
                var $cfgDiag = $('<div/>', {
                    id:"confirmDialog"
                })
                    .css({display:"none"})
                
                    .dialog({
                        modal: true, // keine Hintergrundaktivität erlauben
                        title: "Dialog Test Titel",
                        buttons: [{
                            click: function() {
                                // Positive Bestätigung
                                $DialogState.resolve();
                                // Dialog mit Bestätigung schließen
                                closeDialog(this);
                            },
                            text: "Maa",
                            icon:"ui-icon-heart"
                        }, {
                            click: function() {
                                // Negative Bestätigung
                                $DialogState.reject();
                                // Dialog mit Bestätigung schließen
                                closeDialog(this);
                            },
                            text: "Nöhes",
                            icon:"ui-icon-cancel"
    }]
                    })
                    .appendTo('body');
                
                // Die gestellte Fragestellung (Abschicken, ja nein?)  auflösen
                
                $DialogState
                    .then(function() {
                        // Hierhin die SUBMIT-Logik. Das eigentliche .submit() nicht vergessen
                        alert("wird abschicken");
                    })
                    .fail(function() {
                        // Hierhin (bei Bedarf) die Abbruchlogik.
                        alert("wird nicht abschicken");
                    });
            }});
});


function closeDialog(dlg)
{
    // Dialog schließen und DOM aufräumen
    $(dlg).dialog("close");
    $("#confirmDialog").remove();
}

Ich hab's versucht möglichst übersichtlich zu halten, aber das ist bei jQ immer ein bissel fragwürdig. Hoffe es wird trotzdem in etwa klar, was da passiert.

Gibts mehrere solcher zu "schützender" Buttons, reicht es, wenn man den Selektor variabel gestaltet. Erfordert natürlich ein bissel Refactoring in Richtung function initConfirmDialog(selector) den man dann mit dem richtigren Selektor von $(function(){}) aus aufrufen kann. Wenn man will kann man das natürlich auch weiter aufbohren, ein jQ plainobject mitgeben und damit die Dialoge noch ein bißchen anpassen.

Erfordert außer jQuery auch jQuery-UI. Getestet jeweils in der aktuellen Version.