jQuary フォーム色々操作メモ

<h2>フォーム</h2>
<form id="form01">
<input type="text" name="name">
</form>

<script>
    $(function(){       
              
        $("#form01 [name='name']").blur(function(){
                $(this).after('<p>aaaaa</p>');
            });
    });
</script>

ーカスアウト時に文字を追加、これだと追加されてしまう。
なので、フォーカス時に有れば消すという処理を入れる。

<form id="form02">
<input type="text" name="name"><p></p>
</form>

<script>
$(function(){ 

$("#form02 [name='name']").blur(function(){
$(this).next("p").text('aaaaa'); 
});
});
</script>

これはテキスト入力の次に空のＰタグを入れている。フォーカス時に次のＰタグの内容を.textで書き換えている。
ただ、これだと次にＰタグがあるのが前提になる。そこで、次の要素がＰか確認するなど処理を入れる。

<form id="form03">
 <input type="text" name="name">
</form>


<script>
$(function(){ 
 
 $("#form03 [name='name']").blur(function(){
 if(!$(this).next("p").length){
 $(this).after('<p>追加されたＰタグの中身</p>'); 
 }
 });
});
 </script
>

(this).next(“p”).lengthで、有るか確認してなければ、afterで追加

 <p id="click_re">クリックで消してみる</p>
 <script>
 $(function(){       
 
 $("#click_re").click(function(){
 $("#form03 [name='name']").next("p").remove();

     });
});
 </script>