Search code examples
javascriptajaxsweetalertsweetalert2

Sweetalert2: How to get textarea into ajax request


sorry but after a hour of trying and searching i couldnt find a solution. I am trying to get the textarea input of a sweetalert into a ajax request.

The var text is always undefined.

Like this:

jQuery(document).ready(function(){
if(window.location !== "turnier-bearbeiten/*"){
            jQuery( "#loeschen" ).click(function() {                     
                        const { value: text } = Swal.fire({
                                        title: 'Achtung!',
                                        text: 'Bist du sicher, dass du das Turnier absagen möchtest? Es gibt kein zurück!',
                                        input: 'textarea',
                                        inputPlaceholder: 'Bitte begründe deine Absage. Alle Teilnehmer erhalten entsprechend diese Nachricht.',
                                        icon: 'warning',
                                        showCancelButton: true,
                                        cancelButtonText: 'Abbrechen',
                                        confirmButtonText: 'Turnier absagen!'
                        }).then((result) => {
                            alert (text);
                            if (text != null) {
                                        var url_string = window.location.href;
                                        var url = new URL(url_string);
                                        var turnier_id = url.searchParams.get("data_id");
                                        jQuery.ajax({
                                                type: "POST",
                                                dataType: "json",
                                                url: "../custom_scripts/turnier_loeschen.php",
                                                data: { turnier_id: turnier_id, nachricht:text },
                                                success: function(response){    
                                                            if (response.redirect) {

Solution

  • With preConfirm i got it to work successfully somehow:

    jQuery( "#turnier-loeschen" ).click(function() {                     
            const { value: text } = Swal.fire({
                title: 'Achtung!',
                text: 'Bist du sicher, dass du das Turnier absagen möchtest? Es gibt kein zurück!',
                input: 'textarea',
                inputPlaceholder: 'Bitte begründe deine Absage. Alle Teilnehmer erhalten entsprechend diese Nachricht.',
                icon: 'warning',
                showCancelButton: true,
                cancelButtonText: 'Abbrechen',
                confirmButtonText: 'Turnier absagen!',  
                preConfirm: () => {
                    var id = document.getElementsByClassName("swal2-textarea");
                    var value = id[0].value;
                    if (value.length != 0) {
                        //alert (id[0].value); mache nichts
                    } else { Swal.showValidationMessage('Du musst eine Begründung angeben, damit du das Turnier absagen kannst!') }
                }
            }).then((result) => {
                //alert (result.value);
                if (result.value != null) {
                    var url_string = window.location.href;
                    var url = new URL(url_string);
                    var turnier_id = url.searchParams.get("data_id");
                    var text = result.value;
                    jQuery.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "../scripts/loeschen.php",
                        data: { turnier_id: turnier_id, nachricht:text },
    

    and so on...