входные значения формы с помощью JQuery

Question

Ниже приведен фрагмент кода моей формы

<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> 

Вот это JQuery Я пытаюсь использовать

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()); 
} 

Пролет Тег не обновляется, и предупреждение сообщает, что оно не определено. Я здесь что-то не так?

Answer 1

Проблема в том, как вы обращаетесь к своему input. Вы можете использовать input:#program_name. Вы должны просто использовать #program_name.

Пример:

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

Answer 2

1. Вы не можете иметь один и тот же IDs для различных элементов вашего HTML-кода.

2. Вы связали функцию с событием? Если нет, то он не может быть запущен сам по себе ...

Попробуйте этот HTML код ...

<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> 

... с этим 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); 

}); 

См http://jsfiddle.net/creaweb/BgtBv/ (рабочий пример онлайн)