Form input values using jQuery

Question

The following is a snippet of my form

<span style="font-weight: bold;" id="program_name_1">Basics</span>

<form accept-charset="UTF-8" action="/programs/1" class="edit_program" data-remote="true" id="edit_program_1" method="post">
    <input id="program_name" name="program[name]" size="30" type="text" value="Basics" />
</form>

Here is the jquery I'm trying to use

function set_updated_program_values(id)
{
  $('#program_name_' + id).html($('#edit_program_' + id + ' input:#program_name').val());
  alert('new name is ' + $('#edit_program_' + id + ' input:#program_name').val());
}

The span tag isn't being updated, and the alert says it is undefined. Am I doing something wrong here?

Francois Deschenes · Accepted Answer · 2011-07-18 06:20:18Z

2

The problem is the way you're referring to your input. You can use input:#program_name. You should just use #program_name.

Example:

$('#edit_program_' + id + ' #program_name').val()

answered Jul 18, 2011 at 6:20

Francois Deschenes

25.1k4 gold badges67 silver badges61 bronze badges

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

1 Comment

Jhorra Over a year ago

You're right, I could have sworn I was doing it like that on another application.

Mathieu Rodic · Accepted Answer · 2011-07-18 06:34:42Z

You can't have the same IDs for different elements of your HTML code.
Have you linked the set_updated_program_values function to an event? If not, it can't be triggered by itself...

Try this HTML code...

<span style="font-weight: bold;" id="program_name_1">Basics</span>

<form accept-charset="UTF-8" action="/programs/1" class="edit_program" data-remote="true" id="edit_program_1" method="post">
    <input name="program[name]" size="30" type="text" value="Basics" />
</form>

...with this JavaScript:

$(document).ready(function(){

    var changeText = function(){
        var id = this.parentNode.id.split('_')[2];
        var value = this.value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
        $('#program_name_' + id).html(value);
    };

    $('form.edit_program input:text').change(changeText).keyup(changeText);

});

See http://jsfiddle.net/creaweb/BgtBv/ (working example online)

Collectives™ on Stack Overflow

Form input values using jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related