0

次のスクリプトを使用して、画像入力フィールドを Web ページに追加しています。すべて正常に動作していますが、検証を行いたい場合はどうすればよいでしょうか。フィールドのいずれかが空の場合、フォームを送信したくありません。コードつまり関数を試しましたvalidate()が、最初の入力フィールド、つまりhtmlの入力フィールドのみをチェックします。Jquery を使用して実行時に追加された入力フィールドでは機能しません。

<script type="text/javascript">
    function validate () {
            var file = document.getElementById('file').value;
            if(file==""){
                alert("None of the Image Fields can be empty!!");
            return false;
            }
    }
    $(document).ready(function(){ 

      $('#addproduct').click(function(){                
        $(this).after('<br /><input type="file" name="image_name[]" class="addfile" id="file" /> <input type="text" name="image_caption[]" placeholder="Caption for this image " size="60" /> ');
      });       
    });

    </script>

そして、画像フィールドの削除機能を追加したいと思います。すべての入力フィールドの横にある十字ボタンのように、そのボタンをクリックするとフィールドが削除されます。

<input type="file" name="image_name[]" id="file" required="true"> 
<input type="text" name="image_caption[]" placeholder="Caption for this image "  size="60">
<span id="addproduct"></span>
4

1 に答える 1

0

document.getElementById('file')使用document.getElementsByName('image_name[]')またはjQueryスタイルの代わりに$('[name="image_name[]"]')。これはid、タグのが一意である必要があるためです。そうでない場合は、最初のタグのみを参照できますid。

削除機能には、次のようなものを使用します。

$(document).ready(function(){ 

  $('#addproduct').click(function(){                
    $(this).after('<br /><div><input type="file" name="image_name[]" class="addfile" id="file" /> <input type="text" name="image_caption[]" placeholder="Caption for this image " size="60" /> <input type="button" value="Delete" onclick="deleteRow(this)" /> </div>');
  });       
});

var deleteRow = function(elem) {
    $(elem).parent().remove();
}
于 2013-02-07T15:30:31.460 に答える