Swiper.js: cannot get textarea value in loop mode

Question

I cannot get the value of an textarea in a looped swiper of Swiper.js.

Here's what I did.

I defined a swiper with a single slide and put a textarea in it. (id="aaa", one and only textarea)
I defined a function "getValue()" that shows the value of the textarea. (using getElementById(), console.log())

function getValue(id){ var element = document.getElementById(id); var value = element.value; console.log(value); }
I enabled the loop mode of the swiper.

// Swiper Setting var swiper = new Swiper('.swiper-container', { allowTouchMove: false, loop: true,
I executed the function with a button, and it returns "" (empty string)
Here's the results of my experiments

When the loop is disabled, the function returns the proper text in the textarea.
When the swiper has multiple slides, the function returns "" only for textareas in the last slide.

Here's the full code that replicates the problem. https://jsfiddle.net/mjn7d385/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>test</title>

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

    <!-- Demo styles -->
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-pagination-bullet {
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            color: #000;
            opacity: 1;
            background: rgba(0, 0, 0, 0.2);
        }

        .swiper-pagination-bullet-active {
            color: #fff;
            background: #007aff;
        }
    </style>

</head>

<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" id="page1">
                <textarea name="aaa" id="aaa" cols="40" rows="5"></textarea>
                <button onclick="getValue('aaa');">Check Values</button>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <script>
        // Swiper Setting
        var swiper = new Swiper('.swiper-container', {
            allowTouchMove: false,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                renderBullet: function (index, className) {
                    return '<span class="' + className + '">' + (index + 1) + '</span>';
                },
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });

        function getValue(id){
            var element = document.getElementById(id);
            var value = element.value;
            console.log(value);
        }
        
    </script>

</body>

</html>

How can I get the value of the textarea in a looped swiper? Please let me know if you have any solutions for this.

Thank you in advance.

Carles Carles · Accepted Answer · 2020-11-30T14:10:39

The problem here is that Id's can't be duplicated in the same document, and this control duplicates the Template Slide and its contents, so "aaa" is declared multiple times. One solution could be this one:

Modify Slide Template to be like this:

<div class="swiper-slide" id="page1">
    <textarea cols="40" rows="5"></textarea>
    <button onclick="getValue(this);">Check Values</button>
</div>

Here, getValue() is called using the Caller object (Button) as argument.

Now, getValue function is modified to this:

function getValue(obj){
    var element = obj.parentElement.getElementsByTagName("textarea")[0];
    var value = element.value;
    console.log(value);
}

In this function, we locate the parent object of the button, which is the DIV, and then we get the first textarea object that contains. That's it!

Have a look to the proposed solution in JSFiddle: https://jsfiddle.net/s0Lw2yeg/1/

I hope this will be useful.

Swiper.js: cannot get textarea value in loop mode

1 Answers