添加选择列表文本框并单击按钮上的删除按钮

时间:2017-01-18 15:26:03

标签: jquery ajax symfony

我想在点击按钮时添加选择列表,文本框和删除按钮,并从我添加的每个选择列表和文本框中获取值并存储在我创建的隐藏字段(如数据)中,更改选择或者在文本框中输入的值我希望数据存储在隐藏字段中。

<div class="form-group col-sm-6">
   <input type="hidden" id="locdata" value="{{ locdata|json_encode() }}">
   <input id="btnAdd" type="button" value="Add" />
   <br />
   <br />
   <div id="TextBoxContainer">
   <!--Textboxes will be added here -->
   </div>
   <br />
   <input id="btnGet" type="button" value="Get Values" />
</div>

<script type="text/javascript">
    $(function () {
        $("#btnAdd").bind("click", function () {
            var div = $("<div />");
            div.html(GetDynamicTextBox(""));
            $("#TextBoxContainer").append(div);
            $("select.locdata").select2();
        });
        $("#btnGet").bind("click", function () {
            var values = "";
            $("input[name=Budget]").each(function () {
                values += $(this).val() + "\n";
            });
            alert(values);
        });
        $("#location_1").on("click", function(){
            console.log('hii');
            var values = "";
            var e = document.getElementsByClassName("locdata");
            var strUser = e.options[e.selectedIndex].val();
            $("input[name=Location]").each(function () {
                values += $(this).val() + "\n";
            });
            console.log(strUser);
            console.log(values);
        });
        $("body").on("click", ".remove", function () {
            $(this).closest("div").remove();
        });
    });
    function locdata(value){
        var locdata = jQuery.parseJSON($("#locdata").val());
        locdata.toString();
        var str = "<select class='locdata' id='location_1'>";
        for(var prop in locdata) {
            str+="<option value='"+locdata[prop].value+"'>"+locdata[prop].label+"</option>";
        }
        str+='</select><input name = "Budget" type="text"  value = "'+ value +'" />&nbsp;<a type="button" value="Remove" class="remove fa fa-minus-circle" ></a>';
        return str;
    }
    function GetDynamicTextBox(value) {
        return locdata(value);
    }
</script>

This is what i have done but cant get the data plz help

0 个答案:

没有答案