hi,
I have Button and on click of button I am creating new textboxes for value and one for color picker (any number of text box) Using JQuery, and then on click of save button I am getting the list of text box value and color and I storing it on database, this past is working fine,
I my model
public List SignalThresholdValueList { get; set; }
public List SignalThresholdColorList { get; set; }
in view
@Html.TextBoxFor(m => m.SignalThresholdValueList, new { @name = "SignalThresholdValueList", @class = "thresoldText" })
@Html.TextBoxFor(m => m.SignalThresholdColorList, new { @type = "color", @name = "SignalThresholdColorList", @class = "inputColorPicker" })
Here is the jQuery
<pre> //Dynamically create the div
$(document).ready(function () {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
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++; //text box increment
$(wrapper).append('<div style="margin-bottom: 15px; ">' +
'<input class="thresoldText" type="text" name="SignalThresholdValueList"/>' +
'<input style="width:10px; width:20px; margin-left:5px" type="color" name="SignalThresholdColorList">' +//color picker
'<img style="padding-left:5px;" class="remove_field" src="/Images/delete.ico"/>' +
'</div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
//$('input.SignalThresholdValueList').each(function () {
// alert($(this).val());
// textarray.push($(this).val());
//});
});
with this codeI am able to create dynamicaly textboxes and colorpickes,
ans storing on database,
now my problem is on Edit button click I am getting value from the databse for textbox and colorpicker, but I want to create the textboxes and color picker and add button in edit page with same value,
How to do this?
What I have tried:
<pre>
<div class="sgnalContainer">
<div style="width:50%; float:left">
@foreach (var item in Model.SignalThresholdValueList)
{
<div style="padding-top:10px">
<input type="text" value="@item" class="thresoldText" />
</div>
}
</div>
<div style="width:50%; float:left; padding-left: 15px">
@foreach (var item in Model.SignalThresholdColorList)
{
<div style="padding-top:15px;">
<input type="color" value=@(item) class="inputColorPicker" />
</div>
}
</div>
</div>
here I am getting textbox and color picker but i need remove button for all ad last textbox with add button.