1
Reply

Dynamically textbox jquery

B Info

B Info

Jun 28 2015 3:05 AM
436
Hello, Please can someone give me a solution to display images, here is the same code the access path of the images is just
 
<div class="form-group ">
<label for="input_1" class="control-label col-lg-2">Reponse</label>
<div class="col-lg-6">
<div id="button_pro">
<div class='space' id='input_1'>
<input id="input_1" type="text" name="Reponse" class='left txt' />
<img class="add right" src="~/Content/themes/base/minified/images/add.png" />
</div>
</div>
</div>
</div>


<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button class="btn btn-danger" type="submit">Enregistrer</button>
<a class="btn btn-default" href="@Url.Action("Index","Question")">Annuler</a>
</div>
</div>
</form>
</div>
</div>
</section>
</div>
</div>

<style>
<font-face {
font-family: Lobster;
src: url('Lobster.otf');
}

body {
width: 1500px;
margin: 90px auto;
}

.space {
margin-bottom: 10px;
}

.txt {
width: 550px;
border: 0.5px solid #ccc;
height: 35px;
border-radius: 5px;
font-family: Lobster;
font-size: 20px;
color: grey;
}

p {
font-family: Lobster;
font-size: 35px;
text-align: center;
}

.but {
width: 250px;
background: #00BB64;
border: 1px solid #00BB64;
height: 65px;
border-radius: 3px;
color: white;
margin-top: 10px;
}
</style>


<script type="text/javascript" src="@Url.Content("~/Assets/Backend/plugins/jquery-multi-select/js/jquery-1.9.1.min.js")"</script>
<script type="text/javascript">
</script>


<script>
$('document').ready(function () {
var id = 2, txt_box;
$('#button_pro').on('click', '.add', function () {
$(this).remove();
txt_box = '<div class="space" id="input_' + id + '" ><input type="text" name="Reponse" class="left txt"/><img src="~/Assets/Backend/img/images/remove.png" class="remove"/><img class="add right" src="~/Assets/Backend/img/images/add.png" /></div>';
$("#button_pro").append(txt_box);
id++;
});

$('#button_pro').on('click', '.remove', function () {
var parent = $(this).parent().prev().attr("id");
var parent_im = $(this).parent().attr("id");
$("#" + parent_im).slideUp('medium', function () {
$("#" + parent_im).remove();
if ($('.add').length < 1) {
$("#" + parent).append('<img src="~/Assets/Backend/img/images/add.png" class="add right"/> ');
}
});
});


});
</script>

Answers (1)