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

未更新span标记，并且警报显示未定义。我在这里做错了吗？

Answer 1

问题在于您指的是input。您可以使用input:#program_name。您应该使用#program_name。

示例：

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

Answer 2

对于HTML代码的不同元素，您不能使用相同的IDs。
您是否已将set_updated_program_values功能与事件相关联？如果没有，它本身不能触发......

试试这个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/（在线工作示例）

使用jQuery表单输入值

2 个答案: