Thêm/Xóa Textbox với JQuery

white.smut · 24 Tháng ba 2014

Demo: http://2mit.org/demo/add-textbox/
Code:

Mã:

<html>
<head>
<title>jQuery add / remove textbox example</title>
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 
<style type="text/css">
    div{
        padding:8px;
    }
</style>
</head>
<body>
<h1>jQuery add / remove textbox example</h1>
<script type="text/javascript">
 
$(document).ready(function(){
 
    var counter = 2;
 
    $("#addButton").click(function () {
 
    if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
    } 
 
    var newTextBoxDiv = $(document.createElement('div'))
        .attr("id", 'TextBoxDiv' + counter);
 
    newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
          '<input type="text" name="textbox' + counter +
          '" id="textbox' + counter + '" value="" >');
 
    newTextBoxDiv.appendTo("#TextBoxesGroup");
    counter++;
    });
 
    $("#removeButton").click(function () {
    if(counter==1){
          alert("No more textbox to remove");
          return false;
      } 
 
    counter--;
 
        $("#TextBoxDiv" + counter).remove();
 
    });
 
    $("#getButtonValue").click(function () {
 
    var msg = '';
    for(i=1; i<counter; i++){
        msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
    }
          alert(msg);
    });
  });
</script>
</head><body>
 
<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
        <label>Textbox #1 : </label><input type='textbox' id='textbox1' >
    </div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</body>
</html>

Tải jquery-1.3.2.min.js: tại đây

Hoặc bạn có thể tải bộ code bên dưới:

Đăng nhập hoặc Đăng ký

DIỄN ĐÀN 2MIT.ORG SẼ CHUYỂN SANG CHẾ ĐỘ READ-ONLY

Thêm/Xóa Textbox với JQuery

white.smut

Các file đính kèm:

2mit.org - add-textbox.rar

Chia sẻ trang này

Tìm kiếm hữu ích

Thêm/Xóa Textbox với JQuery

white.smut

Các file đính kèm:

2mit.org - add-textbox.rar

Chia sẻ trang này