Question

根据用户request.ex显示文本框的数量：如果我们在文本框中键入4，则会在同一行中生成4个文本框。

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

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

4.将这些记录存储在数据库中

我完成了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>

Answer 1

你可以通过获取mytext []的每个值重复相同的内容并将其推入数组中，然后从数组中获取值

Answer 2

将使用div创建的文本框分组并生成ID ..设置
删除按钮，为referenc（data-group）提供一个属性输入一个类以便于访问
将数据作为对象获取。（您可以根据需要进行转换）

这是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/

干杯.. !!

jquery在不使用alter函数的情况下在同一页面中显示动态生成的文本框值

2 个答案: