How to pass input value to button variable with jQuery

Question

This is the code I am using which doesn't work. I want the value of "data-page" in the "button" to receive the value of the input field when the input field is blurred. The "data-page" is a number. Appreciate your assistance, thanks.

 <input type="text" value="" id="findR" />

 <button id="findRB" data-page="" >Find Record</button>

 <script>
  $(document).ready(function() {

     $( '#findR' ).blur(function() {
     $('#findRB[name=data-page]').val($('#findR').val());
     })

  });
 </script>

$('#findRB[name=data-page]') should just be $('#findRB'). You don't have a name attribute with valuedata-page. — Dave
– Dave, Commented Jun 9, 2015 at 16:33

Shaunak D · Accepted Answer · 2015-06-09 16:43:32Z

1

data-page is a data-* attribute and not name attribute.

$( '#findR' ).blur(function() {
    $('#findRB').data('page',this.value);
})

I would recommend using data(), but you won't see the actual attribute change as the value is stored in the DOM object. If you wish so, use attr()

$( '#findR' ).blur(function() {
    $('#findRB').attr('data-page',this.value);
})

Also, use this.value instead of $( '#findR' ).val() to set the value.

edited Jun 9, 2015 at 16:43

answered Jun 9, 2015 at 16:36

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cymen · Accepted Answer · 2015-06-10 15:09:52Z

0

Here is a working example:

 $(document).ready(function() {

     $( '#findR').blur(function() {
         $('#findRB').attr('data-page', $('#findR').val());
     });

  });

JSFiddle: http://jsfiddle.net/jyq2bm4r/

edited Jun 10, 2015 at 15:09

answered Jun 9, 2015 at 16:35

Cymen

14.5k4 gold badges58 silver badges77 bronze badges

Comments

murnax · Accepted Answer · 2015-06-09 16:35:28Z

0

To set data attribute in element, you can use

$('findRB').attr('data-page', $('#findR').val());

answered Jun 9, 2015 at 16:35

murnax

1,2221 gold badge10 silver badges13 bronze badges

Comments

Dinesh Patra · Accepted Answer · 2015-06-09 16:42:11Z

Hello can you please test this. This is working fine for me::

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
    <input type="text" value="" id="findR" />
    <button id="findRB" data-page="" >Find Record</button>
    <script>
        $(document).ready(function() {
            $( '#findR' ).blur(function() {
                var inputVal = $('#findR').val();
                document.getElementById("findRB").setAttribute("data-page", inputVal);
            })
        });
    </script>
</body>
</html>

Collectives™ on Stack Overflow

How to pass input value to button variable with jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related