Jquery text not parsing into variable

Question

I have a code where I want a button's text to be stored in a variable and then set a text field's value to the text. Here's my code for the button onclick event:

$('#MyButton').click(function(){
        var user1 = $(this).attr("value");
        $('#MyTextField').val(user1);
    });

And Here is my button and text field:

<input type="text" class="form-control" id="MyTextField" aria-label="..." placeholder="User to send to">
 <button id="MyButton" class="btn btn-success" value="Go!">GO</button>

But nothing ever happens. Please help, Thanks in advance

EDIT regarding @Drakes

<script type="text/javascript">
var socket = io.connect('http://192.168.2.18:8080');
$(window).load(function(){
    username = "<%= user.local.email %>";
    console.log(username);
    socket.emit('join', username);
    socket.on('userjoino', function(data){
        $('#users').empty();
        $('#puser').empty();
        $.each(data, function(key, value){
            $('#users').append('<div class="alert alert-warning">'+key+'</div>');
            $('#puser').append('<li class="list-group-item" id="whisper" rec="'+key+'"> <button id="whisper" class="btn btn-success MyButton" value="'+ key + '">'+ key + '</button></li>');
        });
        var users = data;
        console.log(users);
    });
    $('form').submit(function(e){
        e.preventDefault();
        var message = $('#msg').val();
        if(message.length <= 0){
            $('#boxf').append('<div class="alert alert-danger">Message cannot be left empty</div>');
            var div = document.getElementById("boxf");
            div.scrollTop = div.scrollHeight;
        }else{
        //var msgob = [nickname + ': ' + message];
        //socket.emit('message', msgob);
        socket.emit('message', message);
        $('#boxf').append('<div class="alert alert-info"> Me: ' + message + '</div>' );
        var div = document.getElementById("boxf");
        div.scrollTop = div.scrollHeight;

        $('#msg').val('');
        }
  });
    socket.on('messages', function(data){
        $("#boxf").append('<div class="alert alert-info" >' + data + "</div>");
        var div = document.getElementById("boxf");
        div.scrollTop = div.scrollHeight;
        //document.getElementById('xyz').play();
    });
    socket.on('disuser', function(data){
        $("#boxf").append('<div class="alert alert-info">Server: ' +data+" has left the chat" + "</div>");
        var div = document.getElementById("boxf");
        div.scrollTop = div.scrollHeight;
    });

    $('#pm').click(function(e){
        var whisp = $('#whisp').val();
        var recipent = $('#recipent').val();
        console.log(recipent);
        socket.emit('whisper', {whisp: whisp, user: recipent});
        $('#whisp').val('');
        $('#recipent').val('');
        return false;
    });
    $('#whiisper').on('click', '.MyButton', function(){
        var user1 = $(this).val();
        $('#recipent').val(user1);
    });
    console.log('hey');
    socket.on('whisper', function(data){
        console.log(data);
        if(data.user === username){
            $('#messes').append('<div class="alert alert-info" >' + data.user + ': ' + data.whisp + "</div>");
        }else{
            console.log('ahaaaaahhh');
        }
    });

});
</script>

That is my script and here is how I have included JQuery:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>

Works here: http://jsfiddle.net/a6e979b4/. Probably you don't have jQuery included in your page? — lshettyl
– lshettyl, Commented Mar 29, 2015 at 9:07
Where is your JS code placed? Be sure it's inside of document.ready — VladL
– VladL, Commented Mar 29, 2015 at 9:08
@SaiAshwin you need to be more specific as to what's not working as in the fiddle, when you click on the button the value Go! gets set to the input! — lshettyl
– lshettyl, Commented Mar 29, 2015 at 9:09
By the way, you have '#whiisper' instead of '#whisper' if that is important — Drakes
– Drakes, Commented Mar 29, 2015 at 9:46

Guffa · Accepted Answer · 2015-03-29 09:24:01Z

2

To handle events for dynamically added elements, you can use event delegation. You would need to bind the event to a containing element that exists from start.

If you have multiple elements, then the id doesn't work to identify them as it has to be unique, you would use a class instead.

To find the input element you would need to traverse the DOM to find the one next to the button.

Example:

$('#ButtonContainer').on('click', '.MyButton', function(){
    var user1 = $(this).val();
    $(this).prev().val(user1);
});

Make sure that the buttons has a class that you can use to recognise them. Example:

<div id="ButtonContainer">
  <input type="text" class="form-control" aria-label="..." placeholder="User to send to">
  <button class="MyButton btn btn-success" value="Go!">GO</button>
  <input type="text" class="form-control" aria-label="..." placeholder="User to send to">
  <button class="MyButton btn btn-success" value="Go!">GO</button>
  <input type="text" class="form-control" aria-label="..." placeholder="User to send to">
  <button class="MyButton btn btn-success" value="Go!">GO</button>
</div>

Demo, using dynamically added elements:

$('#ButtonContainer').on('click', '.MyButton', function(){
    var user1 = $(this).val();
    $(this).prev().val(user1);
});

$('#ButtonContainer').append('<input type="text" class="form-control" aria-label="..." placeholder="User to send to"><button class="MyButton btn btn-success" value="Go!">GO</button>');
$('#ButtonContainer').append('<input type="text" class="form-control" aria-label="..." placeholder="User to send to"><button class="MyButton btn btn-success" value="Go!">GO</button>');
$('#ButtonContainer').append('<input type="text" class="form-control" aria-label="..." placeholder="User to send to"><button class="MyButton btn btn-success" value="Go!">GO</button>');

<div id="ButtonContainer">
</div>

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

answered Mar 29, 2015 at 9:24

Guffa

703k111 gold badges760 silver badges1k bronze badges

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

8 Comments

Sai Ashwin Over a year ago

Strange... It doesn't work on my machine..... But if i paste the exact code you have done... It works!!

Guffa Over a year ago

@SaiAshwin: Verify that the code snippet works on your machine. Check for differences in the code, for example the use of classes.

Sai Ashwin Over a year ago

Do the classes, the aria label and type, placeholder have to be in some sort of order? that is the only way my code is different

Guffa Over a year ago

@SaiAshwin: No, the attribute order doesn't matter. Check that you don't have double class attributes, that one almost got me.

Sai Ashwin Over a year ago

No double class attributes @Guffa

|

Drakes · Accepted Answer · 2015-03-29 09:21:12Z

2

The code you posted is working with this scaffolding. When the "GO" button is clicked, "Go!" appears in the text input. Please make sure jQuery is included, and the MyButton button isn't dynamically created after the page loads.

<html>
<head>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>

<script type='text/javascript'>
$(window).load(function(){
    $('#MyButton').click(function(){
        var user1 = $(this).attr("value");
        $('#MyTextField').val(user1);
    });
}); 

</script>

</head>
<body>
  <input type="text" class="form-control" id="MyTextField" aria-label="..." placeholder="User to send to">
  <button id="MyButton" class="btn btn-success" value="Go!">GO</button>
</body>
</html>

answered Mar 29, 2015 at 9:21

Drakes

23.8k3 gold badges58 silver badges97 bronze badges

8 Comments

Sai Ashwin Over a year ago

I checked everything... It still doesn't work! So srange

Drakes Over a year ago

Could you try this code in an html file on your side to verify that it does what you would like? Then we can explore more trouble spots

Sai Ashwin Over a year ago

strangely, that Works!

Drakes Over a year ago

When and where do you execute the $('#MyButton').click(function() ... code? Could you post that section please?

Drakes Over a year ago

Can you please head over to this fiddle and verify that the Go button is doing what you expect it to do? jsfiddle.net/Drakes/2345j2d9

|

Collectives™ on Stack Overflow

Jquery text not parsing into variable

2 Answers 2

8 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related