JQuery質問 - 非表示の入力フィールドに値を追加しますか？

Question

私は名前、名、姓という3つのフォームフィールドを持っています。名前フィールドが非表示になっており、キー押下時にfirstname + lastnameに値を設定しようとしています。また、文字をすべて小文字にし、空白をダッシュ​​に変換するように書式を設定しようとしています。

ので：私は次のコードを使用しようとしてきたが、それは働いていない...

  $('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

私はいくつかのコンテキストを欠落しているんだけど、私はあなたを考えていませんそのような属性セレクタを使用できます。 firstnameフィールドを取得するには、input[name='firstname']とします。

また、同じことを2回実行しています。これは、常にいくつか余分な考えを与える良い理由です。たとえば、あなたが一発で両方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" /> 

次のコードsnippitを使用したい：

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

Answer 2

省略[0][value]

<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]') // removed [0][value] 

なぜそれをあなたがそこに置くのかは完全にはわかりません。

また、.keyup()の代わりに.blur()を使用して、冗長な繰り返しをたくさん保存することもできます。とにかく気にしているので、それは.submit()にあるフィールドを連結してください。それについて考えてみましょう。 "Jhon Doe"は、.keyup()とjQueryプロセスを併用すると、16個のルックアップと8個の連結を意味します。それはIDの一部ではなく、その後、CSSの表現としてそれを認識するようになりました。この数回を見て

補遺

は、人々が[0][value]のようなid属性内の無効/問題のある文字を入れて、これはjQueryのに無効です。 document.getElementById("bla[0]");、あなたが次の操作を行うことができますあなたは本当にする必要があります（またはそれを修正するのが面倒です）ので、もししかし動作するようには思えん：

はおそらく

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