When I click the + next to the Input 1 a line gets cloned and next to the first line a - appears, which is precise what I want :-)
But when I press the + next to the Input 2 the - icon appears in next to the line of Input 1.
I can't figure out what I'm doing wrong as when you click + next to Input 2 I want the - next to the first line of Input 2
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span>-</span>');
}).on('click', '.btn-remove', function(e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
.entry {
text-align: left;
margin-bottom: 25px;
margin-top: 25px;
}
.entry input {
height: 50px;
padding: 10px;
}
.entry input:nth-child(2) {
margin-left: 25px;
width: 66%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
<form class="school_form" role="form" autocomplete="off">
<div class="entry input-group">
<input type="text" name="opl_datum" placeholder="Periode Input 1" class='enableOnInput' disabled='disabled'>
<input type="text" name="school" placeholder="Input 1" class='enableOnInput' disabled='disabled'>
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span>+</span>
</button>
</span>
</div>
</form>
</div>
<div class="controls">
<form class="werk_form" role="form" autocomplete="off">
<div class="entry input-group">
<input type="text" name="werk_datum" placeholder="Periode Input 2" class='enableOnInput' disabled='disabled'>
<input type="text" name="werkgever" placeholder="Input 2" class='enableOnInput' disabled='disabled'>
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span>+</span>
</button>
</span>
</div>
</form>
</div>
var controlForm = $('.controls form:first')//here you also select first control even if you are on second controlforms
so replace this with
var controlForm = $(this).closest('.controls').find('form:first')//which is also select closest one
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $(this).closest('.controls').find('form:first'),//you have to select colsest controls
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span>-</span>');
}).on('click', '.btn-remove', function(e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
.entry {
text-align: left;
margin-bottom: 25px;
margin-top: 25px;
}
.entry input {
height: 50px;
padding: 10px;
}
.entry input:nth-child(2) {
margin-left: 25px;
width: 66%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
<form class="school_form" role="form" autocomplete="off">
<div class="entry input-group">
<input type="text" name="opl_datum" placeholder="Periode Input 1" class='enableOnInput' disabled='disabled'>
<input type="text" name="school" placeholder="Input 1" class='enableOnInput' disabled='disabled'>
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span>+</span>
</button>
</span>
</div>
</form>
</div>
<div class="controls">
<form class="werk_form" role="form" autocomplete="off">
<div class="entry input-group">
<input type="text" name="werk_datum" placeholder="Periode Input 2" class='enableOnInput' disabled='disabled'>
<input type="text" name="werkgever" placeholder="Input 2" class='enableOnInput' disabled='disabled'>
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span>+</span>
</button>
</span>
</div>
</form>
</div>
Related
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[]')
I write a method that called in change event of text input.
When i click on + and - buttons change event dont called but when i change value of input manually change event called.
What is problem?
js
$("#wraper-frequency input[type=text]").change(function (e) {
alert("frequency change");
});
html
<div id="wraper-frequency">
<input id="frequency" class="form-control" type="number" value="0" min="0" max="50" step="1" style="display: none;">
<div class="input-group ">
<div class="input-group-prepend">
<button style="min-width: 2.5rem" class="btn btn-decrement btn-outline-secondary" type="button"><strong>-</strong></button>
</div>
<input type="text" style="text-align: center" class="form-control " placeholder="">
<div class="input-group-append">
<button style="min-width: 2.5rem" class="btn btn-increment btn-outline-secondary" type="button"><strong>+</strong></button>
</div>
</div>
<label style="top: 7px; position: relative; margin-right: 5px;">Hz</label>
You didn't bind the event to any of the buttons. You can trigger the change event of the input element on button click like the following way:
$("#wraper-frequency input[type=text]").change(function (e) {
alert("frequency change");
});
$("button").click(function(){
$("#wraper-frequency input[type=text]").trigger('change')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wraper-frequency">
<input id="output-pressure" disabled001="" class="form-control" type="number" value="0.0" data-decimals="1" min="0" max="50" step="0.1" style="display: none;">
<div class="input-group ">
<div class="input-group-prepend">
<button style="min-width: 2.5rem" class="btn btn-decrement btn-outline-secondary" type="button"><strong>-</strong></button>
</div>
<input type="text" style="text-align: center" class="form-control " placeholder="">
<div class="input-group-append">
<button style="min-width: 2.5rem" class="btn btn-increment btn-outline-secondary" type="button"><strong>+</strong></button>
</div>
</div>
<label style="top: 7px; position: relative; margin-right: 5px;">Bar</label>
As I mentioned in the comments to the original post:
You do not have an input[type=text] field with Id wrapper-frequency.
Also in the text field type, there were spaces. Remove spaces.
If you want the event to be triggered on button click as well, trigger the event manually.
Lastly, a selector combining Id and input[type=text] is not doing any good. Id is anyway unique. If you mean wrapper-frequency and input[ type=text] both selection use comma in between.
Here is the modified code that works:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#wrapper-frequency, input[type=text]").change(function (e) {
alert("frequency change");
});
});
</script>
<div id="wraper-output-pressure">
<input id="output-pressure" disabled001="" class="form-control" type="number" value="0.0" data-decimals="1" min="0"
max="50" step="0.1" style="display: none;">
<div class="input-group ">
<div class="input-group-prepend">
<button style="min-width: 2.5rem" class="btn btn-decrement btn-outline-secondary"
type="button"><strong>-</strong></button>
</div>
<input type="text" style="text-align: center" class="form-control " placeholder="">
<div class="input-group-append">
<button style="min-width: 2.5rem" class="btn btn-increment btn-outline-secondary"
type="button"><strong>+</strong></button>
</div>
</div>
<label style="top: 7px; position: relative; margin-right: 5px;">Bar</label>
You are trying to attach an event listener to an element that doesn't exist in your example.
In your example you are targeting #wraper-frequency. I only see the id's #wraper-output-pressure and #output-pressure in your HTML.
I'm struggling while trying to locate 2 buttons on the left of an input field.
I already tried several suggestions on the internet but I couldn't make it the way I want.
<div class="col-xs-6" >
<div class="row">
<div class="col-xs-12">
<div class="pull-right">
<div class="search" style="height: 18px" ng-if="vm.showSearch()">
<form style="margin:0px" name="filter_actions" novalidate>
<div>
<input id="freeTextSearch" type="text" class="form-control input-sm" autofocus ng-change="vm.filterTable(Search)" ng-model="Search"
style="text-indent: 5px;" minlength="1" ng-model-options="{debounce:100}" id="Search" name="Search" placeholder="Search fields">
<a ng-show="Search" ng-click="localSearch = ''; vm.filterTable(localSearch)"><i style="vertical-align: middle; top:4px; right:35px; position: absolute" class="glyphicon glyphicon-remove"></i></a>
</div>
</form>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
<label class="btn btn-default" role="button" ng-click="vm.popUp()"><i class="fa fa-expand" style="color:darkgreen;"></i></label>
</div>
</div>
</div>
</div>
</div>
This is how it looks like :
Keep in mind, that label is an inline element similar to span, so you need to set its css to display: inline-block to behave like a div
once you have done this, the easiest way to have them in the same line is to use display:flex and flex-wrap: nowrap on the parent div.
here is my favorite flex-cheat-sheet
I have simplified your example and you can see how this works clicking below on Run code snippet.
.pull-right {
display: flex;
flex-wrap: nowrap;
}
.pull-right input{ border: 1px solid green;}
.pull-right label{ border: 1px solid red; display: inline-block;}
<div class="pull-right">
<div class="search" style="height: 18px" ng-if="vm.showSearch()">
<form style="margin:0px" name="filter_actions" novalidate>
<div>
<input id="freeTextSearch" type="text"
class="form-control input-sm" autofocus ng-change="vm.filterTable(Search)"
ng-model="Search"
style="text-indent: 5px;" minlength="1"
ng-model-options="{debounce:100}" id="Search" name="Search" placeholder="Search fields">
<a ng-show="Search"
ng-click="localSearch = ''; vm.filterTable(localSearch)">
<i style="vertical-align: middle; top:4px; right:35px; position: absolute"
class="glyphicon glyphicon-remove"> </i></a>
</div>
</form>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
<label class="btn btn-default" role="button" ng-click="vm.popUp()"><i class="fa fa-expand" style="color:darkgreen;">your icons</i></label>
</div>
</div>
I am using this steps plugin/code on my site:
https://bootsnipp.com/fullscreen/RlOe3
What i want, is that when i am on the second or third tab, i want to show a back button to the previous div/step.
If i add the button with class="backBtn", how can i go back with the javascript?
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
Below you have a working example. I used the code from the link you provided. What I did was the following:
added two back buttons => <button class="btn btn-primary backBtn btn-lg pull-left" type="button" >Back</button>
looked how the next function is implemented and reverse the behavior
I also disable the next step when you press back, as it should be. If you also want to clear the values, in can be easily done, but that's your homework.
Cheers!
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn'),
allBackBtn = $('.backBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
allBackBtn.click(function() {
var curStep = $(this).closest(".setup-content");
var curStepBtn = curStep.attr("id");
var currStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().children("a");
var prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");
prevStepWizard.trigger('click');
currStepWizard.attr("disabled", "disabled");
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
body {
margin-top:40px;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 50%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="stepwizard col-md-offset-3">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
1
<p>Step 1</p>
</div>
<div class="stepwizard-step">
2
<p>Step 2</p>
</div>
<div class="stepwizard-step">
3
<p>Step 3</p>
</div>
</div>
</div>
<form role="form" action="" method="post">
<div class="row setup-content" id="step-1">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" class="form-control" placeholder="Enter Last Name" />
</div>
<div class="form-group">
<label class="control-label">Email</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Email" />
</div>
<div class="form-group">
<label class="control-label">Address</label>
<textarea required="required" class="form-control" placeholder="Enter your address" ></textarea>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary backBtn btn-lg pull-left" type="button" >Back</button>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-primary backBtn btn-lg pull-left" type="button" >Back</button>
<button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
I'm trying to achieve the condition click event on each class element. This is my code.
//Edit input field
$('.js-edit, .js-save').each(function(index) {
$(this).on("click", function() {
var $form = $(this).closest('form');
$form.toggleClass('is-readonly is-editing');
var isReadonly = $form.hasClass('is-readonly');
$form.find('input').prop('disabled', isReadonly);
});
});
form.is-readonly .btn-save {
display: none;
}
form.is-readonly input[disabled],
form.is-readonly textarea[disabled] {
cursor: text;
background-color: #fff;
border-color: transparent;
outline-color: transparent;
box-shadow: none;
}
form.is-editing .btn-edit {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="is-readonly" action="" method="post">
<input type="text" class="form-control is-disabled" value="40" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
<input type="text" class="form-control is-disabled" value="38" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
</form>
I have two input fields, at the moment click event making both field editable, i want it work separately for each field.
I hope you guys understand my question.
Thanks in advance.
Is this what you want to achieve?
I wrapped each field and its corresponding buttons in a div and changed the script a bit to match the new HTML.
//Edit input field
$('.js-edit, .js-save').each(function(index) {
$(this).on("click", function() {
var $group = $(this).closest('.group');
$group.toggleClass('is-readonly is-editing');
var isReadonly = $group.hasClass('is-readonly');
$group.find('input').prop('disabled', isReadonly);
});
});
.group.is-readonly .btn-save {
display: none;
}
.group.is-readonly input[disabled],
.group.is-readonly textarea[disabled] {
cursor: text;
background-color: #fff;
border-color: transparent;
outline-color: transparent;
box-shadow: none;
}
.group.is-editing .btn-edit {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div class="group is-readonly">
<input type="text" class="form-control is-disabled" value="40" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
</div>
<div class="group is-readonly">
<input type="text" class="form-control is-disabled" value="38" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
</div>
</form>
Simple attach the events separately:
$(document).on('click', '.js-edit', function(){
console.log('Coming from Edit Button')
});
$(document).on('click', '.js-save', function(){
console.log('Coming from SaveButton')
});
You set class for form element and it's wrong. you should set class for input parent (like container class)
$('.js-edit, .js-save').on("click", function() {
var $form = $(this).closest('form');
var container = $(this).closest('.container');
container.toggleClass('is-readonly is-editing');
container.find('input').prop('disabled', $form.hasClass('is-readonly'));
});
.container.is-readonly .btn-save {
display: none;
}
.container.is-editing .btn-edit {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div class="container is-readonly">
<input type="text" class="form-control is-disabled" value="40" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
</div>
<div class="container is-readonly">
<input type="text" class="form-control is-disabled" value="38" disabled>
<button type="button" class="btn-edit js-edit">Edit</button>
<button type="button" class="btn-save js-save">Save</button>
</div>
</form>