JQuery 问题 - 将值附加到隐藏输入字段？

Question

我有三个表单字段：姓名、名字和姓氏。名称字段被隐藏，我试图在按键时将值设置为名字+姓氏。我还尝试对其进行格式化，使字符全部小写，并将空格转换为破折号。

所以：

<input type="text" name="firstname" value="John John" />
<input type="text" name="lastname" value="Doe" />
<input type="hidden" name="name" value="john-john-doe" />

我一直在尝试使用以下代码，但它不起作用......

            $('input[name=field_firstname[0][value]]').keyup(function() {
                    var firstname = $('input[name=field_firstname[0][value]]').val();
                    var lastname = $('input[name=field_lastname[0][value]]').val();
                    $('input[name=name]').val(firstname.replace(/\s/g, "-").toLowerCase()+lastname.replace(/\s/g, "-").toLowerCase());
            });

            $('input[name=field_lastname[0][value]]').keyup(function() {
                    var firstname = $('input[name=field_firstname[0][value]]').val();
                    var lastname = $('input[name=field_lastname[0][value]]').val();
                    $('input[name=name]').val(firstname.replace(/\s/g, "-").toLowerCase()+lastname.replace(/\s/g, "-").toLowerCase());
            });

Answer 1

也许我缺少一些上下文，但我认为您不能使用这样的属性选择器。要获取名字字段，您可以输入：input[name='firstname']。

你还会做同样的事情两次，这总是一个需要额外考虑的好理由。例如，您可以一次完成两个 keyup：

$("input[name='firstname'], input[name='lastname']").keyup(...);

不过，您可以通过使用 ID 使事情变得更容易。例如，采用以下 HTML：

<input type="text" name="firstname" id="firstname" value="John John" />
<input type="text" name="lastname" id="lastname" value="Doe" />
<input type="hidden" name="name" id="sanitized_name" value="john-john-doe" />

您可以使用以下代码片段：

$('#firstname, #lastname').keyup(function() {
  var fullname = $('#firstname').val() + ' ' + $('#lastname').val();
  $('#sanitized_name').val(fullname.replace(/\s/g, '-').toLowerCase());
});

Answer 2

省略 [0][value] ，如下所示：

$('input[name=field_firstname]') // removed [0][value]

不完全确定为什么将其放在那里。

另外，您可能希望使用 .blur() 而不是 .keyup()，这样可以节省大量冗余重复。更好的是，将字段连接到 .submit() 上，因为无论如何，这就是您关心它的时候。想一想，“Jhon Doe”意味着使用 .keyup() 以及 jQuery 进程来完成它时的 16 次查找和 8 次串联。

附录

现在已经看到过几次了，人们将无效/有问题的字符放入 id 属性中，例如 [0][value]，这对 jQuery 来说是无效的，因为它会将其识别为css 表达式而不是 id 的一部分。 document.getElementById( "bla[0]" ); 似乎确实有效，但是如果您确实必须（或者懒得修复它），您可以执行以下操作：

$( document.getElementById( "bla[0][value]" ) ) //etc