Changing the textarea field, HTML, JS, jQuery

I have 7 buttons (different partner buttons with different images(logos)).

<a class="button button-type-1 fancybox_js" href="#buttonX">
<a class="button button-type-2 button-gray fancybox_js" href="#buttonX">
<a class="button button-type-2 button-orange fancybox_js" href="#buttonX">

As you see, they all have different to open a modal window with textarea

<div class="hidden" id="buttonX">
    <div class="login-form">
        <div class="login-form-inner">
            <textarea id="button1" name="something"></textarea>

Inside of this textarea have to be the code of this button wich was pressed

<a class="button button-type-1 fancybox_js" href="#buttonX"> if pressed this button

But i need to change the value of textarea depending wich button was clicked. If i click <a class="button button-type-2 button-orange fancybox_js" href="#buttonX"> button, in the modal window i need to have a textarea with the code of this button. Can anybody help me with this? Thank you!

Answers 1

  • You can get the code of the button using jQuery's clone() and html() method.

    I've added a class("myCBtn") to all your buttons and then cloning the button in <div>. After that you just need to take the HTML of created DIV to get the code of your button.

    HTML of your buttons.

    <td width="50%"><a class="button myCBtn button-type-1 button-blue-round fancybox_js" href="#buttonX"><span>?????? ? ??????1</span></a><br>
    
    <a class="button myCBtn button-type-1 fancybox_js" id="button_1" href="#buttonX"><span>?????? ? ??????4</span></a><br>
    
    <a class="button myCBtn button-type-2 button-gray fancybox_js" href="#buttonX"><span>?????? ? ??????2</span></a><br>
    
    <a class="button myCBtn button-type-2 button-orange fancybox_js" href="#buttonX"><span>?????? ? ??????3</span></a><br></td>
    

    Change following code

    <div class="myCBtn" id="myCBtn">
        <textarea id="myCBtn" name="ButtonCode"></textarea>
    </div>
    

    to

    <div class="popupDivClass" id="popupDivId">
        <textarea id="buttonCodeTA" name="ButtonCode"></textarea>
    </div>
    

    Also remove below line.

    document.getElementById('myCBtn').value = buttoncode;
    

    And update the click function to following:

    $('.myCBtn').click(function(e){
                var thisbutton=$(this).clone();
            var newDiv=$('<div>').append(thisbutton);
            var buttoncode=$(newDiv).html();
            // perform next operations here using buttoncode.
            $("#buttonCodeTA").val(buttoncode);
        });
    

    Updated jsFiddle : https://jsfiddle.net/7o6p8nso/1/


Related Articles