jquery在同一頁面中顯示動態生成的文本框值，而不使用更改功能

顯示基於用戶請求的文本框數量：如果我們在文本框中鍵入4，則會在同一行中生成4個文本框。

2.如果我們按下然後刪除4盒應該被刪除。在同一個頁面jquery在同一頁面中顯示動態生成的文本框值，而不使用更改功能

4.store這些記錄在數據庫

3.顯示動態生成的文本框的值

我做編碼選項1。可誰能幫助我對其他3個選項。

我的代碼是：

<html> 
<head> 
    <title> Add/Remove Records</title> 
    <script type="text/javascript" src="jQuery-2.1.3.min.js"></script> 
    <style type="text/css"> 
     div { padding:8px; } 
    </style> 
</head> 
<body> 

    <table border="2" style= "background-color: lightblue;" > 
     <thead> 
      <h1 font style="color:blue">Add/Remove Records</h1> 
     </thead> 
     <thead> 
      <tr> <th>Approval_No:</th> 
       <td><input type="text" value=""/><br/></td> 
      </tr> 
      <tr> 
       <th>No. of Entries:</th> 
       <td><input type="text" name="mytext[]" id="mytext1"><br/></td><br/> 

      </tr><tr> 
      <td> <button class="add_field_button">Add More Fields</button></td> 
      <td><button class="submit_button">Submit</button></td></tr> 
     </thead> 
    </table> 
    <div class="input_fields_wrap"> 
    </div> 
</body> 
</html> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     var max_fields = 20; /*maximum input boxes allowed*/ 
     var wrapper = $(".input_fields_wrap"); /*Fields wrapper*/ 
     var add_button = $(".add_field_button"); /*Add button ID*/ 
     var sb = $(".submit_button"); 

     var x = 1; /*initlal text box count*/ 
     $(add_button).click(function(e){ /*on add input button click*/ 
      e.preventDefault(); 
      if(x < max_fields){ /*max input box allowed*/ 
       x++; 
       var a = parseInt(document.getElementById("mytext1").value); 
       var b = document.getElementById("wrapper"); 


       $(wrapper).append('<div style="clear:both"></div>'); 
       for (i = 0; i < a; i++) { 
        var input = document.createElement("input"); 
        $(wrapper).append('<input type="text" name="mytext[]" id="mytext"/>'); 
        /*add input box*/ 
       } 
       $(wrapper).append('<a href="javascript:void(0)" class="remove_field">Remove</a><div style="clear:both"></div>'); 
      } 
     }); 

     $(wrapper).on("click",".remove_field", function(e){ /*user click on remove text*/ 
      e.preventDefault(); $(this).parent('div').remove(); x--; 
     }) 
     $(sb).click(function(e) { 
      var message = document.getElementById("mytext1").value; 
      dm.innerHTML= message; 
     }); 

    }); 
</script> 
</head>

來源

2016-11-16 Tamil

您採取mytext的[]這些值的每個重複同樣的，並將它推到一個數組，你可以從陣列

來源

2016-11-16 10:09:27

集團採取價值使用div創建文本框並生成一個ID ..設置
刪除按鈕有一個引用屬性（數據組）給輸入一個類，以方便訪問
獲取數據作爲對象。（你可以將你的願望）

這裏的thejavascript：

$(document).ready(function() { 
    var max_fields = 20; /*maximum input boxes allowed*/ 
    var wrapper = $(".input_fields_wrap"); /*Fields wrapper*/ 
    var add_button = $(".add_field_button"); /*Add button ID*/ 
    var sb = $(".submit_button"); 

    var x = 1; /*initlal text box count*/ 
    $(add_button).click(function(e) { /*on add input button click*/ 
    e.preventDefault(); 
    if (x < max_fields) { /*max input box allowed*/ 
     x++; 
     var a = parseInt(document.getElementById("mytext1").value); 
     var b = document.getElementById("wrapper"); 

     /**Group the textboxes..**/ 
     var htmlElements = []; 
     htmlElements.push('<div id="group_' + x + '">'); 
     htmlElements.push('<div style="clear:both"></div>'); 

     for (i = 0; i < a; i++) { 
     var input = document.createElement("input"); 
     htmlElements.push('<input type="text" name="mytext[]" class="more-fields" id="mytext_' + i + '"/>'); 
     /*add input box*/ 
     } 
     htmlElements.push('<a href="javascript:void(0)" class="remove_field" data-group="group_' + x + '">Remove</a>'); 
     htmlElements.push('<div style="clear:both"></div>'); 
     htmlElements.push('</div>'); /**End the textbox grouping..**/ 
     $(wrapper).append(htmlElements.join("")); /**End the textbox grouping..**/ 
    } 
    }); 
    $(wrapper).on("click", ".remove_field", function(e) { /*user click on remove text*/ 
    e.preventDefault(); 
    var group_id = $(this).data("group"); 
    $("#" + group_id).remove(); 
    x--; 
    }); 
    $(sb).click(function(e) { 
    var data = {}; 
    $(".more-fields").each(function(){ 
      data[(this.attr("id"))] = $(this).val(); 
    }); 

    //You now have the data as json.. (data) 

    var message = document.getElementById("mytext1").value; 
    //dm.innerHTML = message; 
    }); 
});

見工作小提琴：https://jsfiddle.net/popsyjunior/dzfmvgt1/

乾杯.. !!

來源

2016-11-16 14:22:32 Popsyjunior

非常感謝您的幫助..現在刪除按鈕正常工作.. – Tamil

如何將文本框的值存儲到數據庫並顯示在html頁面中存儲的值.. – Tamil

值中的json格式「數據」變量。你可以遍歷並獲取值。另外，如果答案滿足你的問題，你應該把它標記爲正確答案。 – Popsyjunior

jquery在同一頁面中顯示動態生成的文本框值，而不使用更改功能

回答

相關問題