Set one of button parameters to a textarea's value

[Mr.M]

Hi everyone.

I'm having a very seriouse problem where I have a textbox and I want a button and I want to take whatever a user type in this textbox/textarea and set it to the data-name which is a button's parameter. Here is the codes.

Textarea: <input type="text" id="dCell" value="Cellphone Number" maxlength="10" onkeypress="checkmax(this)" name="CellphoneNumber2" id="cCell" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Cellphone Number';}" required>

Button:<button id="cCart" class="btn btn-danger my-cart-btn my-cart-b" data-id="16" data-name="testbutton" data-summary="summary 16" data-price="50" data-quantity="1" data-image="images/of15.png">Buy Airtime</button>

The code I tried:

function checkmax(element){
                        if(element.value.length == 9){
                            //var idNumber = $('#dCell').val();
                            $(function() {
                                $('dCell').change(function() {
                                    $('#cCart').data('data-name', this.value);
                                });
                            });
                        }else{

                        }
                    }

I can't seem to make this work. I want to assign whatever the user typed to the button on the 'data-name' so it will change from testbutton to whatever the user typed. How can I get that working?

[gentlemedia]

Line 6 should be:

$('#cCart').data('name', this.value);

EDIT:
And line 5 should be:

$('#dCell').change(function() {

[Mr.M]

But my code is the same as what you posted except that you had 'name' and I have 'data-name' which is where I want to apply the changes.

[Mr.M]

Ow I've spotted what you are talking about, I missed the # I've just did as you said but still the 'data-name=testbutton' is not updated. its just writes 'testbutton' to the cart

[gentlemedia]

Did you also changed $('#cCart').data('data-name', this.value); to $('#cCart').data('name', this.value);? Because you don't inlcude data- in it unles you use .attr() instead of .data()

[Mr.M]

Yes I did, I even tried using the attr () but still.

[prashant_14]

I have 'data-name' which is where I want to apply the changes.

[gentlemedia]

This will do it

function checkmax(el) {

    if(el.value.length == 9) {

        $(function() {
            $('#dCell').change(function() {
                var dCell = $(this).val();
                $('#cCart').data('name', dCell)
            });
        });

    } else {

    }

}

See here: https://codepen.io/gentlemedia/pen/ZvMgBJ