I have a form and with several fields with the same name, I need to get this data in Django view and write to the database. For now, I am just trying to get the HTML data and render in the view but only the last value of the HTML form is displayed.
View
def agenda_padrao(request):
inicio = request.POST['inicio']
fim = request.POST['fim']
idempresa = request.POST['id']
if request.POST:
for i in inicio:
print(i)
return render(request, 'core/agenda.html')
agenda.html
<form method="POST" action="/agenda/padrao/">{% csrf_token %}
<div class="modal-body">
<div class="row ">
<h3>Horários</h3><br/>
<a class="btn btn-success" href="javascript:void(0)" id="addInput">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</a>
</div>
<div id="dynamicDiv">
<div class="row col-12">
<input type="time" class="form-control form-control" id="inicio" name="inicio[]" style="width: 150px; margin-right: 10px;">
<input type="time" class="form-control form-control" id="fim" name="fim" style="width: 150px;">
<input type="hidden" name="id" value="{{ user.id_empresa }}">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
<button type="submit" class="btn btn-primary">Confirmar Horário Padrão</button>
</div>
</form>
Javascript adding the fields
$(function () {
var scntDiv = $('#dynamicDiv');
$(document).on('click', '#addInput', function () {
$('<p>'+
'<input type="time" class="form-control form-control" id="inicio" name="inicio" style="width: 150px; margin-right: 10px;">'+
'<input type="time" class="form-control form-control" id="fim" name="fim" style="width: 150px; margin-right: 10px;">' +
'<a class="btn btn-danger" href="javascript:void(0)" id="remInput">' +
'<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>' +
'</a><br/>'+
'</p>').appendTo(scntDiv);
return false;
});
$(document).on('click', '#remInput', function () {
$(this).parents('p').remove();
});
});
You can get a list of values of inputs in views:
inicio = request.POST.getlist('inicio[]')
Related
I'm updating some content on a website running Bootstrap 2.0.4 (I know it's dated but don't have the time to update it yet!).
I'm trying to prepend a button on to an input element. When the button is clicked I'm adding another button dynamically below it using jquery, I need this also to have the button prepended.
I've created a fiddle, would appreciate any help.
HTML
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
JQUERY
$(document).ready(function() {
$(".add-more").click(function() {
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
Check updated snippet below....
$(".add-more").click(function() {
var html = $(".copy-fields").html();
$(".after-add-more").before(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
I am working with dynamic form.
I want to pass javascript value to append row. Here how can I pass uid value to appended row. I tried <?php echo $uid = "<script>document.write(uid)</script>"; ?> in append row.
Bbut it is not working.
Here is my code
default row
<div class="form-group row">
<?php $uid = '1';?>
<label for="name" class="col-sm-1 form-control-label">Item</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="" id="inputc" value="<?php echo $uid;?>">
</div>
<div class="box-tools">
<a href="javascript:void(0);" class="btn btn-info btn-sm" id="btnAddMoreSpecification" data-original-title="Add More">
<i class="fa fa-plus"></i>
</a>
</div>
</div>
<div id="divSpecificatiion">
</div>
Append row
<script type="text/template" id="temSpecification">
<div class="form-group row" style="padding-top:10px;">
<?php $uid =''; ?>
<label for="name" class="col-sm-1 form-control-label">Item</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="" id="inputc" value="<?php echo $uid;?>">
</div>
<div class="box-tools">
<a href="javascript:void(0);" class="btn btn-danger btn-sm btnRemoveMoreSpecification" data-original-title="Add More">
<i class="fa fa-times"></i>
</a>
</div>
</div>
</script>
$(document).ready(function (event) {
uid=1;uvd=2;$('#btnAddMoreSpecification').click(function ()
{$('#divSpecificatiion').append($('#temSpecification').html());uid++;uvd++; });
$(document).on('click', '.btnRemoveMoreSpecification', function () {
$(this).parent('div').parent('div').remove();
});
});
Output should be like this
Use something like this:
$(document).ready(function(event) {
uid = 1;
uvd = 2;
$('#btnAddMoreSpecification').click(function() {
uid++;
var templateHtml = $('#temSpecification').html();//save the html in a variable
var temp = $(templateHtml).find('input[type="text"]').val(uid).end();//find the input and append the new uid
$('#divSpecificatiion').append(temp);//append the new html to the div
});
$(document).on('click', '.btnRemoveMoreSpecification', function() {
$(this).parent('div').parent('div').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row">
<?php $uid = '1';?>
<label for="name" class="col-sm-1 form-control-label">Item</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="" id="inputc" value="<?php echo $uid;?>">
</div>
<div class="box-tools">
<a href="javascript:void(0);" class="btn btn-info btn-sm" id="btnAddMoreSpecification" data-original-title="Add More">Add more
<i class="fa fa-plus"></i>
</a>
</div>
</div>
<div id="divSpecificatiion">
</div>
<script type="text/template" id="temSpecification">
<div class="form-group row" style="padding-top:10px;">
<?php $uid =''; ?>
<label for="name" class="col-sm-1 form-control-label">Item</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="" id="inputc" value="">
</div>
<div class="box-tools">
<a href="javascript:void(0);" class="btn btn-danger btn-sm btnRemoveMoreSpecification" data-original-title="Add More">
<i class="fa fa-times"></i>
</a>
</div>
</div>
</script>
i'd like to know how i can get the values from a dynamic input in Spring, a method that get the values, can someone explain me how to do that ?
This is my html and javascript input.
JSP
<div class="form-group">
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" id="telefone" class="form-control" placeholder="Numero de telefone...">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button">
<i class="glyphicon glyphicon-plus"></i> Adicionar
</button>
</div>
</div>
<!-- Copy Fields -->
<div class="copy hide">
<div class="control-group input-group" style="margin-top: 10px">
<input type="text" name="addmore[]" id="telefone" class="form-control" placeholder="Numero de telefone...">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button">
<i class="glyphicon glyphicon-remove"></i> Remover
</button>
</div>
</div>
</div>
JAVA SCRIPT
$(document).ready(function() {
$(".add-more").click(function() {
var html = $(".copy").html();
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
Thanks.
I'm creating a form where the user is allowed to add the options manually to the multiple select box. I've provided a preview field(for showing the preview) and a default value field(to select the default values if the user needs). There is a field for the user to enter the options. Once the user clicks the Add button after entering an option, it will be displayed in div provided. Each option can also be edited.
When the option is Added, that option will be added to the default value field as dropdown and to the preview field as dropdown. This is done simultaneouly, whenever an option is added.
When the option is edited, (according to my logic) the option in the div should be edited and the option in the default value and preview option should be edited as well. This is how I tried:
<div class="modal fade" id="MultiSelect_Modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog" style="min-width: 75% !important;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="FieldType">Multi Select</h4>
</div>
<div class="modal-body form-horizontal">
<div class="row">
<div class="col-sm-6">
<div class="form-group required">
<label for="MultiSelect_Label" class="col-sm-4 control-label">Label Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="MultiSelect_Label" name="MultiSelect_Label" value=''>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="MultiSelect_DefaultValues" class="col-sm-4 control-label">Default Value</label>
<div class="col-sm-6">
<select id="MultiSelect_DefaultValues" name="MultiSelect_DefaultValues[]" class="form-control" multiple="multiple" style="width: 160px;">
<option value="0">---Select---</option>
</select>
</div>
</div>
</div>
</div>
<div class="row" id="manualEntryDiv">
<div class="col-sm-6">
<div class="form-group required">
<label for="MultiSelect_Options" class="col-sm-4 control-label">Options</label>
<div class="col-sm-6">
<div class="input-group">
<input type="text" class="form-control" id="MultiSelect_Options" name="MultiSelect_Options" value=''>
<span class="input-group-btn">
<input type="button" class="btn btn-primary" id="MultiSelect_optionAdd" name="MultiSelect_optionAdd">
</span>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="result" id="MultiSelect_mydiv"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group" style="margin-left: -20px;">
<label for="MultiSelect_Description" class="col-sm-4 control-label">Description</label>
<div class="col-sm-6">
<textarea type="text" class="form-control" id="MultiSelect_Description" name="MultiSelect_Description" row='3'></textarea>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group required">
<label for="MultiSelect_Status" class="col-sm-4 control-label">Status</label>
<div class="col-sm-6">
<select class="form-control" name="MultiSelect_Status" id="MultiSelect_Status">
<option value="1">Active</option>
<option value="0">In-Active</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="MultiSelect_Preview" id="MultiSelect_PreviewID" class="col-sm-4 control-label">Preview</label>
<div class="col-sm-6">
<select id="MultiSelect_Preview" name="MultiSelect_Preview[]" class="form-control" multiple="multiple" style="width: 160px;">
<option value="0">---Select---</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer clearfix">
<button type="button" class="btn btn-default" onclick="clearcontrols();" data-dismiss="modal">Close</button>
<input type="submit" id="MultiSelect_Save" name="MultiSelect_Save" value="Save" class="btn btn-primary">
</div>
</div>
</div>
</div>
$("#MultiSelect_optionAdd").click(function(){
if($("#MultiSelect_Options").val() == ""){
MyNotif.Show("Please enter an option","warning");
} else {
if($("#MultiSelect_optionAdd").val() == "Add"){
var optionvalue = $("#MultiSelect_Options").val();
$("#MultiSelect_mydiv").append("<span id='span" + a + "' class='editbutton'>" + optionvalue + "    <a href='javascript:void(0)' ><i class='fa fa-close btn btn-danger btn-xs btn-remove btn-icon remove' id='remove" + a + "' style='display: none;'></i></a><a href='javascript:void(0)'><i class='fa fa-pencil btn btn-warning btn-xs btn-edit btn-icon edit' id='edit" + a + "' style='display: none; margin-right:10px;'></i></a></span><br/>");
$("#MultiSelect_Preview").append('<option value="value-'+ optionvalue +'" id="options'+ a +'">' + optionvalue + '</option>');
$("#MultiSelect_DefaultValues").append('<option value="value-'+ optionvalue +'" id="defaultOptions'+ a +'">' + optionvalue + '</option>');
a = a + 1;
$("#MultiSelect_Options").val("");
} else if ($("#MultiSelect_optionAdd").val() == "Update") {
$("#"+spanid).text($("#MultiSelect_Options").val()).append("    <a href='javascript:void(0)' ><i class='fa fa-close btn btn-danger btn-xs btn-remove btn-icon remove' id='" + removebuttonid + "' style='display: none;'></i></a><a href='javascript:void(0)'><i class='fa fa-pencil btn btn-warning btn-xs btn-edit btn-icon edit' id='" + editbuttonid + "' style='display: none; margin-right:10px;'></i></a>");
$("#MultiSelect_optionAdd").val("Add");
$("#"+optionsid).text($("#MultiSelect_Options").val());
$("#"+defaultOptionsid).text($("#MultiSelect_Options").val());
$("#"+defaultOptionsid).val("value-"+$("#MultiSelect_Options").val());
$("#MultiSelect_Options").val("");
}
$('.remove').click(function(){
removebuttonid = $(this).attr("id");
spanid = removebuttonid.replace('remove', 'span');
optionsid = removebuttonid.replace('remove', 'options');
defaultOptionsid = removebuttonid.replace('remove', 'defaultOptions');
$("#"+spanid).next("br").remove();
$("#"+spanid).remove();
$("#"+optionsid).remove();
$("#"+defaultOptionsid).remove();
});
$(".edit").click(function(){
addButtonValue = "Update"
$("#MultiSelect_optionAdd").val(addButtonValue);
editbuttonid = $(this).attr("id");
spanid = editbuttonid.replace('edit', 'span');
optionsid = editbuttonid.replace('edit', 'options');
defaultOptionsid = editbuttonid.replace('edit', 'defaultOptions');
removebuttonid = editbuttonid.replace('edit', 'remove');
var value = ($("#"+spanid).text()).trim();
$("#MultiSelect_Options").val(value);
});
}
});
Here, whenever I add an option, that option gets added to the div, default value and preview fields. Whatever I add as an option, it gets added.
But, the problem is, when I edit the option I provide, the option inside the div gets changed. But, the option in the default value and preview displays the same text which was provided previously. But, when I inspect the element, I can see the edited text as well as edited value. But, the previously provided option is only shown. The edited text is not shown.
I don't know what's wrong with the above code. What should I change in this?
I am unable create multiple text field dynamically using JavaScript and jQuery. My code is below:
<div class="col-md-3">
<div class="form-group">
<label for="ques">No of questions</label>
<input name="no_of_question" id="ques" class="form-control" placeholder="no of question" type="text">
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label>Questions</label>
<input type="button" style="line-height:13px; margin-right:2px;" class="btn btn-success btn-sm" name="plus" id="plus" value="+" onClick="addQuestionField();">
<input type="button" style="line-height:13px; margin-right:2px;" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" onClick="deleteQuestionField();">
</div>
<div class="text-left" id="intro-add" style="display:none">
<input type="button" name="" class="btn btn-sm btn-info" value="Add">
</div>
</div>
</div>
<div id="container">
<div class="form-group" style="margin-top:5px;display:block" id="introBox0" >
<div>
<input type="text" style="width: 77.5%;float:left; margin-bottom:5px; margin-right:5px;" class="form-control inptbox0" id="scaleans00" name="labelname" placeholder="Answer" value="">
<input type="button" style="line-height:13px; margin-right:2px; margin-top:5px; float:left;" class="btn btn-danger btn-sm" name="labelminus" id="labelminus" value="-">
<div class="text-left" id="intro-add" style="display:block">
<input type="button" name="" class="btn btn-sm btn-info" value="Add" onclick="addMore(0,0)">
</div>
</div>
</div>
<hr>
</div>
Here user will create multiple question section and each question section user has to create multiple field using add button and will delete using minus button . Each question field should unique id.Suppose in section one there are 3 input field then its ids should be like this scaleans00,scaleans01,scaleans02... and for section two these should be scaleans10,scaleans11,scaleans12... and so on.
Here is my JavaScript code:
<script>
function addQuestionField() {
var get = $("#ques").val();
for (var i = 1; i < get; i++) {
$('#container').append('<div class="form-group dyn" style="margin-top:5px;display:block" id="introBox'+i+'"><div><input type="text" style="width: 77.5%;float:left; margin-bottom:5px; margin-right:5px;" class="form-control inptbox'+i+'" id="scaleans'+i+'0" name="labelname" placeholder="Answer" value=""><input type="button" style="line-height:13px; margin-right:2px; margin-top:5px; float:left;" class="btn btn-danger btn-sm" name="labelminus" id="labelminus" value="-"><div class="text-left" id="intro-add" style="display:block"><input type="button" name="" class="btn btn-sm btn-info" value="Add" onclick="addMore('+i+',0)"></div></div></div><hr>');
}
}
function deleteQuestionField() {
var textareas = $('#container .dyn');
if (textareas.length !== 0) {
textareas.last().remove();
$('#ques').val(textareas.length - 1);
}
}
function addMore(parent,child){
var mainDiv='#introBox'+parent;
$(mainDiv).append('<div><input type="text" style="width: 77.5%;float:left; margin-bottom:5px; margin-right:5px;" class="form-control inptbox'+parent+'" id="scaleans" name="labelname" placeholder="Answer" value="">'+'<input type="button" style="line-height:13px; margin-right:2px; margin-top:5px; float:left;" class="btn btn-danger btn-sm" name="labelminus" id="labelminus" value="-"></div>');
repopulate(parent);
}
function repopulate(k){
var mainId='.inptbox'+k;
var j=0;
$(mainId).each(function(i, e) {
if(i==0){
$(this).attr('id', 'scaleans' + i+j);
$(this).next().attr('onClick', function(old, n) {
return 'removeThis(' + i + ','+j+')';
})
$(this).next().attr('id', function(old, n) {
return 'labelminus' + i+j;
});
}else{
$(this).attr('id', 'scaleans' + i+(j+1));
$(this).next().attr('onClick', function(old, n) {
return 'removeThis(' + i + ','+(j+1)+')';
})
$(this).next().attr('id', function(old, n) {
return 'labelminus' + i+(j+1);
});
}
})
}
function removeThis(r,t) {
$("#scaleans" + r+t).remove();
$("#labelminus" + r+t).remove();
repopulate();
}
</script>
Here I can not create as per my requirement. Here is my full code.
I will be explaining to you what is going on with the current code you have put in Plunker
function addQuestionField() {
var get = $("#ques").val();
for (var i = 1; i < get; i++) {
In Your method addQuestionFiled(), the value retrieved into get variable is not truthy, if you are not entering any value into the
number of questions
textfield. Hence the html will not get appended
Fill in the number of question as 2, and then click add it will keeping on appending the html to container div as the 'var get' will have the value 2 and 'var i' is less than 'var get'