jQuery在同一页中显示动态生成的文本框值，而无需使用更改函数

jquery to display the dynamically generated textbox value in the samepage without using alter function

本文关键字：函数 文本 一页 显示 动态 jQuery      更新时间：2023-09-26
  1. 根据用户请求显示文本框的数量.ex：如果我们在文本框中键入 4，则在同一行中将生成 4 个文本框。

2.如果我们按删除，则应删除该4框。

3.在同一页面中显示动态生成的文本框值

在数据库中 4.store 这些记录

我完成了 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>
  • 对使用div 创建的文本框进行分组并生成一个 id。设置

  • 删除按钮具有引用(数据组(的属性，该属性提供输入类以便于访问

  • 将数据作为对象获取。(您可以随心所欲地转换(

这是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");
      /**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/

干杯。。！！

你通过获取 mytext[] 的每个值并将其推送到数组中来重复相同的操作，您可以从数组中获取值

相关文章：