I have an app where I want to add extra elements to an item in an array, I have created a fiddle of what I'm trying to achieve.
So the user starts the app, they click next fill in some details of an item and a description, they then should click next and fill in a price for the item(this is where I'm stuck). This example works up to a point, as in whenever I try and implement the price part I seem to be getting it wrong. You'll see once I click next the item is added to the array, however how do add more elements to the current item in the array. In case I've not made sense the logic should be:
Start
Page one (enter name and description)
Page two (enter price)
I understand I could do this all on one page but I don't want to I want knockout to be able to add a price after the name and description page. I would also like to be able to go back and amend the item. Can you anybody help in seeing what I should be doing next?
When I insert the name and description, do I have to also make an empty element in the array for the price? Then once the price is entered somehow insert this into the price element in the array? Not sure how/if this should be implemented.
This is my first knockout app so I be surprised if what I've actually done is correct, any help or pointers gratefully received :)
My code is below:
$(function() {
var main = new stuff();
ko.applyBindings(main, $('#ko')[0]);
});
function Item(data) {
this.itemname = ko.observable(data.itemname);
this.itemdescription = ko.observable(data.itemdescription);
this.itemenabled = ko.observable(data.itemenabled);
}
function stuff() {
var self = this;
self.items = ko.observableArray([]);
self.newItemName = ko.observable();
self.newItemDescription = ko.observable();
self.newItemEnabled = ko.observable();
// Operations
self.addItem = function() {
self.items.push(new Item({
itemname: this.newItemName(),
itemdescription: this.newItemDescription(),
itemenabled: this.newItemEnabled()
}));
};
};
//jquery stuff
$('#start').on('click', function(e) {
$("#page1").show(500);
$('#panel1').css('visibility', 'visible').hide().fadeIn().removeClass('hidden');
$("#start").hide(500);
})
$('#back').on('click', function(e) {
$("#panel1").hide(500);
$("#page1").hide(500);
$("#start").show(500);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="submit" class="btn btn-primary" id="start">Start</button>
<div id="ko">
<div class="panel panel-default hidden" id="panel1">
<div id="page1">
<form data-bind="submit: addItem">
<div class="panel panel-default" style="padding: 15px 0px 0px 0px;" id="panel2">
<div class="container">
<div class="form-group row">
<label for="inputItemName" class="col-lg-3 col-form-label">Enter Item Name</label>
<div class="col-lg-8">
<input type="text" class="form-control form-control-lg" id="inputItemName" data-bind="value: newItemName" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="textareaItemDescription" class="col-lg-3 col-form-label">Enter Item Description</label>
<div class="col-lg-8">
<textarea class="form-control" id="textareaItemDescription" rows="3" data-bind="value: newItemDescription"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-3 col-sm-9">
<label class="custom-control custom-checkbox checkbox-inline no_indent" style="font-weight:bold;">
<input type="checkbox" class="custom-control-input" checked="checked" data-bind="checked: newItemEnabled">
<span class="custom-control-indicator"></span>
<span class="custom-control-description" style="padding-bottom: 2px;">Enabled</span>
</label>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" id="back">Back</button>
<div class="pull-right">
<button type="submit" class="btn btn-primary" id="next1">Next</button>
</div>
</form>
</div>
</div>
<ul data-bind="foreach: items, visible: items().length > 0">
<li>
<input data-bind="value: itemname" style="color: black;" />
</li>
<li>
<input data-bind="value: itemdescription" style="color: black;" />
</li>
<li>
<input type="checkbox" data-bind="checked: itemenabled" />
</li>
</ul>
</div>
Ok, so I have added a new observable to track the page number along with basic functions to increment/decrement the number then I simply add the new item after the price has also been added.
$(function() {
var main = new stuff();
ko.applyBindings(main, $('#ko')[0]);
});
function Item(data) {
this.itemname = ko.observable(data.itemname);
this.itemdescription = ko.observable(data.itemdescription);
this.itemenabled = ko.observable(data.itemenabled);
this.price = ko.observable(data.itemprice);
}
function stuff() {
var self = this;
self.items = ko.observableArray([]);
self.newItemName = ko.observable();
self.newItemDescription = ko.observable();
self.newItemEnabled = ko.observable();
self.newItemPrice = ko.observable();
self.page = ko.observable(1);
// Operations
self.next = function() {
if (self.page() === 2) {
self.addItem();
}
self.page(self.page() + 1)
}
self.back = function() {
if (self.page() == 1) {
$("#panel1").hide(500);
$("#page1").hide(500);
$("#start").show(500);
}
self.page(self.page() - 1);
}
self.addItem = function() {
self.items.push(new Item({
itemname: this.newItemName(),
itemdescription: this.newItemDescription(),
itemenabled: this.newItemEnabled(),
itemprice: this.newItemPrice(),
}));
};
};
//jquery stuff
$('#start').on('click', function(e) {
$("#page1").show(500);
$('#panel1').css('visibility', 'visible').hide().fadeIn().removeClass('hidden');
$("#start").hide(500);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="submit" class="btn btn-primary" id="start">Start</button>
<div id="ko">
<div class="panel panel-default hidden" id="panel1">
<div id="page1">
<form data-bind="submit: next">
<div class="panel panel-default" style="padding: 15px 0px 0px 0px;" id="panel2">
<div class="container" data-bind="if: page() == 1">
<div class="form-group row">
<label for="inputItemName" class="col-lg-3 col-form-label">Enter Item Name</label>
<div class="col-lg-8">
<input type="text" class="form-control form-control-lg" id="inputItemName" data-bind="value: newItemName" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="textareaItemDescription" class="col-lg-3 col-form-label">Enter Item Description</label>
<div class="col-lg-8">
<textarea class="form-control" id="textareaItemDescription" rows="3" data-bind="value: newItemDescription"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-3 col-sm-9">
<label class="custom-control custom-checkbox checkbox-inline no_indent" style="font-weight:bold;">
<input type="checkbox" class="custom-control-input" checked="checked" data-bind="checked: newItemEnabled">
<span class="custom-control-indicator"></span>
<span class="custom-control-description" style="padding-bottom: 2px;">Enabled</span>
</label>
</div>
</div>
</div>
</div>
<div class="container" data-bind="if: page() == 2">
<div class="form-group row">
<label for="inputPrice" class="col-lg-3 col-form-label">Enter Price</label>
<div class="col-lg-8">
<input type="text" class="form-control form-control-lg" id="inputPrice" data-bind="value: newItemPrice" placeholder="">
</div>
</div>
</div>
<button type="button" data-bind="click: back" class="btn btn-primary" id="back">Back</button>
<div class="pull-right">
<button type="submit" class="btn btn-primary" id="next1">Next</button>
</div>
</form>
</div>
</div>
<ul data-bind="foreach: items, visible: items().length > 0">
<li>
<input data-bind="value: itemname" style="color: black;" />
</li>
<li>
<input data-bind="value: itemdescription" style="color: black;" />
</li>
<li>
<label for="price">Price</label>
<input id="price" data-bind="value: price" style="color: black;" />
</li>
<li>
<input type="checkbox" data-bind="checked: itemenabled" />
</li>
</ul>
</div>
Related
i have a dynamic form which lets you add and remove inputs. The issue is what even though it works visually, when submitting the form i wont get the values from inputs created by the JS function. If you need anything else let me know as this is about the last implementation to the website
Any ideas as to why? i leave my code below
The html:
<div class="form-container" id="form-container">
<div class="title-title">
<h3 class="recipe-pretitle">Recipe for</h3>
<form action="/recipes/create" enctype="multipart/form-data" method="POST">
<div>
<label for="title">
<input name="title" type="text" id="title" placeholder="Name of dish">
</label>
</div>
</div>
<div class="description-container">
<label class="description-label" for="description">A brief description of your dish: <br> (max 80char)</label>
<textarea name="description" type="text" id="description" cols="30" rows="5"></textarea>
</div>
<div class="directions-ingredients-container">
<div id="product-directions">
<div class="label-directions"><label for="directions">Cooking steps.</label></div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add step</i>
<i class="fa fa-sm">Remove last step</i>
</div>
<div class="instruction-list-container">
<ol id="instruction-list">
</ol>
</div>
</div>
</div>
<div class="ingredients-container">
<div class="label-ingredients"><label for="Ingredients">Ingredients:</label></div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add Ingredient</i>
<i class="fa fa-sm">Remove last Ingredient</i>
</div>
<div class="ingredient-list-container">
<ol id="ingredient-list">
</ol>
</div>
</div>
</div>
</div>
<div class="imageInputContainer">
<label id="image-label" for="image">Choose an image</label>
<input name="image" type="file" id="image">
</div>
<div>
<button type="submit">Upload</button>
</form>
</div>
</div>
Font end JS
var add_more_fields = document.getElementById("add_more_fields")
var remove_fields = document.getElementById("remove_fields")
var directions_container = document.getElementById('product-directions')
var instruction_list = document.getElementById('instruction-list')
add_more_fields.onclick = function () {
var node = document.createElement("li")
var newField = document.createElement('input')
newField.setAttribute('type', 'text')
newField.setAttribute('name', 'directions[]')
newField.setAttribute('placeholder', 'Add Instruction')
node.appendChild(newField)
instruction_list.appendChild(node)
}
remove_fields.onclick = function () {
var input_tags = instruction_list.getElementsByTagName('li')
if (input_tags.length > 1) {
instruction_list.removeChild(input_tags[(input_tags.length) - 1])
}
}
var add_more_fields_ingredients = document.getElementById("add_more_fields_ingredients")
var remove_fields_ingredients = document.getElementById("remove_fields_ingredients")
var ingredient_list = document.getElementById('ingredient-list')
add_more_fields_ingredients.onclick = function () {
var node = document.createElement("li")
var newField = document.createElement('input')
newField.setAttribute('type', 'text')
newField.setAttribute('name', 'Ingredients[]')
newField.setAttribute('placeholder', 'Add Ingredient')
node.appendChild(newField)
ingredient_list.appendChild(node)
}
remove_fields_ingredients.onclick = function () {
var input_tags = ingredient_list.getElementsByTagName('li')
if (input_tags.length > 1) {
ingredient_list.removeChild(input_tags[(input_tags.length) - 1])
}
}
your HTML is not valid, form element is not properly closed, move closing form tag outside button container, and form opening tag a level up
this should work, and now you probably need to modify styles and rearrange some elements, so you need to see to it that the form and HTML is valid, and adapt styles accordingly:
<div class="form-container" id="form-container">
<form action="/recipes/create" enctype="multipart/form-data" method="POST">
<div class="title-title">
<h3 class="recipe-pretitle">Recipe for</h3>
<div>
<label for="title">
<input name="title" type="text" id="title" placeholder="Name of dish">
</label>
</div>
</div>
<div class="description-container">
<label class="description-label" for="description">A brief description of your dish:
<br> (max 80char)</label>
<textarea name="description" type="text" id="description" cols="30" rows="5"></textarea>
</div>
<div class="directions-ingredients-container">
<div id="product-directions">
<div class="label-directions">
<label for="directions">Cooking steps.</label>
</div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add step</i>
<i class="fa fa-sm">Remove last step</i>
</div>
<div class="instruction-list-container">
<ol id="instruction-list">
</ol>
</div>
</div>
</div>
<div class="ingredients-container">
<div class="label-ingredients">
<label for="Ingredients">Ingredients:</label>
</div>
<div class="controls-ol-container">
<div class="controls">
<i class="fa fa-sm">Add Ingredient</i>
<i class="fa fa-sm">Remove last Ingredient</i>
</div>
<div class="ingredient-list-container">
<ol id="ingredient-list">
</ol>
</div>
</div>
</div>
</div>
<div class="imageInputContainer">
<label id="image-label" for="image">Choose an image</label>
<input name="image" type="file" id="image">
</div>
<div>
<button type="submit">Upload</button>
</div>
</form>
</div>
Good Evening,
I have a problem with the jquery form repeater plugin and bootstrap.
I have this form element witch is part of the repeater form:
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="questionSwitch" name="question_correct[]">
<label class="custom-control-label" for="questionSwitch">Richtige Antwort</label>
</div>
Now is the problem if the repeater repeat this element and I click on the second or third repeated item on the switch the switch on the first item get changed not the one I clicked. Because they all three have the same id.
Does anyone have an idea how to fix this? Its the first time working with the form repeater.
Here is a bit more of the Code
$(function () {
'use strict';
if (!$('#multiple-choice').attr('checked')) {
$('#questions').hide();
}
$('#multiple-choice').on('click', function () {
if (this.checked)
$('#questions').show();
else $('#questions').hide();
});
// form repeater jquery
$('#whitelist-new-question').repeater({
show: function () {
$(this).slideDown();
// Feather Icons
if (feather) {
feather.replace({ width: 14, height: 14 });
}
},
hide: function (deleteElement) {
if (confirm('Möchten Sie diese Antwort wirklich löschen?')) {
$(this).slideUp(deleteElement);
}
}
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.1.2/jquery.repeater.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.min.js"></script>
<div class="card">
<div class="card-body">
<form class="form form-vertical" action="{{ route('whitelist-new-question') }}" method="post"
id="whitelist-new-question">
<div class="row">
#csrf
<div class="col-12">
<div class="form-group">
<label for="question-title">Titel</label>
<input type="text" class="form-control" id="question-title" name="questionTitle"
value="{{ old('questionTitle') }}" />
</div>
</div>
<div class="col-12">
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="question-required"
name="questionRequired" value="1"
{{ old('questionRequired') == '1' ? 'checked' : '' }}>
<label class="custom-control-label" for="question-required">Immer Fragen</label>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="multiple-choice" name="multiChoice"
value="1" {{ old('multiChoice') == '1' ? 'checked' : '' }}>
<label class="custom-control-label" for="multiple-choice">Multiple Choice</label>
</div>
</div>
</div>
<div class="col-12" id="questions">
Antworten
<hr />
<div data-repeater-list="questions">
<div data-repeater-item>
<div class="row d-flex align-items-end">
<div class="col-md-4 col-12">
<div class="form-group">
<label for="question-text">Text</label>
<input type="text" class="form-control" id="question-text"
name="question_text[]" aria-describedby="question-text" />
</div>
</div>
<div class="col-md-2 col-12 mt-auto mb-auto">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="currect-switch"
name="question_correct[]">
<label class="custom-control-label" for="currect-switch">Richtige
Antwort</label>
</div>
</div>
<div class="col-md-2 col-12 mb-50">
<div class="form-group">
<button class="btn btn-outline-danger text-nowrap px-1" data-repeater-delete
type="button">
<i data-feather="x" class="mr-25"></i>
<span>Löschen</span>
</button>
</div>
</div>
</div>
<hr />
</div>
</div>
<div class="row">
<div class="col-12">
<button class="btn btn-icon btn-primary" type="button" data-repeater-create>
<i data-feather="plus" class="mr-25"></i>
<span>Weitere Antwort</span>
</button>
</div>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-success mt-2">Speichern</button>
</div>
</div>
</form></div></div>
Ok i got a fix for that.
in the js script i created a variable number and added this code in the show event of the repeater:
show: function () {
var inputSwitch = $(this).find('.custom-control-input');
var labelSwitch = $(this).find('.custom-control-label');
var id = 'currect-switch-' + number;
inputSwitch.attr("id", id);
labelSwitch.attr("for", id);
$(this).slideDown();
// Feather Icons
if (feather) {
feather.replace({ width: 14, height: 14 });
}
number++;
},
I'm still very new to jQuery, and would need help to how to increment 3 elements in this code.
name, id & for.
The name consist of products[0]category, id consist of checkbox[0], for consist of checkbox[0] which is for labels on the checkbox that id use.
I've tried searching for examples. But all them haven't found any good results that i could learn from unfortunately. So in the codes below, they're not there to increase increment as i have totally no idea what else i can do to increase increment numbering.
$(document).ready(function() {
let $append = $('#append');
// append location's data listing
$append.on('change', '.location', function(){
var value = $(this).val();
$('.location_id').val($('#locations [value="'+value+'"]').data('locationid'));
$('.loc_desc').val($('#locations [value="'+value+'"]').data('locdesc'));
});
// enable checkbox for serialnumbers
$append.on('change','.enable-serial', function(){
let $item = $(this).closest('.product-item');
let $checkbox = $item.find('.enable');
$checkbox.prop('disabled', !this.checked);
});
// ctrl for key in checkbox
$append.on('click', '.keyin-ctrl', function() {
let $container = $(this).closest('.product-item');
let $serial = $container.find('.serial');
$container.find('.display').val(function(i, v) {
return v + $serial.val() + ';\n';
});
$serial.val('').focus();
});
// ctrl for del textarea
$append.on('click', '.undo-ctrl', function() {
let $container = $(this).closest('.product-item');
$container.find('.display').val('');
});
// clone product, increment products[x]var
$('#add_product').on('click', function() {
var itemNo = $('.product-item').length + 1;
var index = $('.product-item').length;
var regex = /^(.+?)(\d+)$/i;
let $product = $append.find('.product-item.template')
.clone()
.show()
.removeClass('template')
.insertAfter('.product-item:last');;
$product.find('span').text('#' + itemNo);
$product.find(':checkbox').prop('checked', false);
$product.find('.enable').prop('disabled', true);
$product.find('input, textarea').val('');
$('#append').append($product);
});
// delete product, but remain original template intact
$('#delete_product').on('click', function(){
var itemNo = $('.product-item').length + 1;
let $product = $append.find('.product-item:last:not(".template")');
$product.remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="shadow border">
<h4>{{ __('Product Details') }}</h4>
<hr>
<form method="post" action="">
<!-- Multiple Product addition -->
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __('Product Setting') }}</label><br/>
<div class="col-sm-5">
<button type="button" id="add_product" class="btn btn-dark">{{ __('Add Product') }} <i class="fas fa-plus-square"></i></button>
<button type="button" id="delete_product" class="btn btn-dark ml-3">{{ __('Delete Last Product') }} <i class="fas fa-minus-square"></i></button>
</div>
</div>
<hr>
<!-- Frist Group -->
<div class="product" id="append">
<!-- Product Details -->
<div class="product-item template">
<span>#1</span>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __('Category') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]category" type="text" placeholder="eg. 333" maxlength="3"required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">{{ __('Code') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]code" type="text" placeholder="eg. 22" maxlength="2" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">{{ __('Partnumber') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]partnumber" type="text" placeholder="eg. NGH92838" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __('Brand') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]brand" type="text" placeholder="eg. Rototype" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">{{ __('Quantities') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]qty" type="number" placeholder="eg. 1" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">{{ __("Location") }}</label>
<div class="col-sm-2">
<input class="form-control location" type="text" name="products[0]loc_name" list="locations" value="">
<input type="hidden" class="location_id" name="products[0]location_id" value="">
<input type="hidden" class="loc_desc" name="products[0]loc_desc" value="">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __("Description") }}</label>
<div class="col-sm-8">
<input class="form-control" name="products[0]description" type="text" placeholder="eg. Spare part for CSD2002">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __('Seial Number(s)') }}</label>
<div class="col-sm-5">
<input class="form-control enable serial" maxlength="25" placeholder="Key in Serial Number and hit button 'Key In'" disabled>
</div>
<div class="col-sm-5">
<button class="btn btn-dark enable keyin-ctrl" type="button" disabled>{{ __('Key In') }}</button>
<button class="btn btn-dark enable undo-ctrl" type="button" disabled>{{ __('Del') }}</button>
<input class="form-check-input ml-4 mt-2 pointer enable-serial" id="checkbox[0]" type="checkbox">
<label class="form-check-label ml-5 pointer" for="checkbox[0]">{{ __('tick to enable serialnumber')}}</label>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"></label>
<div class="col-sm-5">
<textarea class="form-control display" name="products[0]serialnumbers" rows="5" style="resize: none;" placeholder="eg. SGH8484848" readonly></textarea>
</div>
</div>
<hr>
</div>
<!-- append start -->
</div>
<div class="form-group row">
<div class="col-sm-12 ">
#csrf
<button type="submit" class="btn btn-dark float-right ml-4">Next <i class="fas fa-caret-right"></i></button>
<!--<button type="button" class="btn btn-secondary float-right" onclick="history.back()">Previous</button>-->
</div>
</div>
<datalist id="locations">
#foreach($locations as $location)
<option value="{{ $location->loc_name}}" data-locationid="{{ $location->location_id }}" data-locdesc="{{ $location->loc_desc }}"></option>
#endforeach
</datalist>
</form>
</div>
</main>
So how do I actually achieve this to add increment to the NAME, ID and FOR my clones?
From the original template of products[0]variable to products[1]variable, checkbox[0] to checkbox[1]
If you want to increment either an ID, class, etc. you can't use .clone(), like the documentation warns:
Using .clone() has the side-effect of producing elements with
duplicate id attributes, which are supposed to be unique. Where
possible, it is recommended to avoid cloning elements with this
attribute or using class attributes as identifiers instead.
You'll have to do it "manually", following a very simple example below:
$( "#addrow" ).click(function() {
var count = $("#product").children().length;
$("#product").append("<input id='field[" + count + "]' type='text'>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="product">
</div>
<input id="addrow" type="button" value="Add field">
I have created two tabs where the tabs gets navigated by checking radio buttons. One of the two tabs will be active initially but I need to have the corresponding radio button too checked initially.
<div ng-app="myApp">
<div class="account-tab-selector" id="tabs" ng-controller="TabsCtrl">
<ul>
<li class="col-sm-6 text-center" ng-repeat="tab in tabs">
<label for="{{tab.url}}">
<input ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)" type="radio" name="radio" id="{{tab.url}}" ng-model="choice.isSelected" value="true">{{tab.title}}</label>
</li>
</ul>
<div class="clearfix"></div>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
<script type="text/ng-template" id="one.tpl.html">
<div class="customer-reg-form" id="new_customer_form">
<div class="sign-up-fb">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i>
Sign Up With Facebook</a>
</div>
<div class="reg-form">
<div class="or-separator"><span>OR</span></div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="fname">First Name<span>*</span></label>
<div class="input-group">
<input name="firstname" id="fname">
</div>
</div>
<div class="col-sm-6 form-group">
<label for="lname">Last Name<span>*</span></label>
<div class="input-group">
<input name="lastname" id="lname">
</div>
</div>
<div class="col-sm-6 form-group">
<label for="mnumber">Mobile Number<span>*</span></label>
<div class="input-group">
<input name="mobile-number" id="mnumber">
</div>
</div>
<div class="col-sm-6 form-group">
<label for="dlocation">Default Location<span>*</span></label>
<div class="input-group">
<select name="default-location" class="dropstyle">
<option></option>
<option>Kansas</option>
</select>
</div>
</div>
<div class="col-sm-12 form-group">
<label for="email">Email Address<span>*</span></label>
<div class="input-group">
<input name="email" id="email">
</div>
</div>
<div class="col-sm-12 form-group">
<label for="password">Password<span>*</span></label>
<div class="input-group">
<input name="password" id="password">
</div>
</div>
</div>
<div class="agreement">By clicking "Register" below, you are agreeing to our Terms of Service agreement.</div>
</div>
</div>
</script>
<script type="text/ng-template" id="two.tpl.html">
<div class="customer-reg-form" id="existing_customer_form">
<div class="sign-up-fb">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i>
Login With Facebook</a>
</div>
<div class="reg-form">
<div class="or-separator"><span>OR</span></div>
<div class="row">
<div class="col-sm-12">
<label for="mnumber">Email Address<span>*</span></label>
<input id="mnumber">
</div>
<div class="col-sm-12">
<label for="mnumber">Password<span>*</span></label>
<input id="mnumber">
</div>
</div>
<div class="forgot-pwd">Forgot Password?</div>
</div>
</div>
</script>
</div>
var app = angular.module("myApp", []);
app.controller('TabsCtrl', ['$scope', function($scope) {
$scope.tabs = [{
title: 'I am a new customer',
url: 'one.tpl.html',
isSelected: true
}, {
title: 'I have an account',
url: 'two.tpl.html'
}];
$scope.currentTab = 'one.tpl.html';
$scope.onClickTab = function(tab) {
$scope.currentTab = tab.url;
};
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
};
}]);
Jsfiddle here
You have bound your radio button with $scope.choice.isSelected, you can set the value for this in controller or in ng-init it self.
Can you please add below two lines in your controller?
$scope.choice={};
$scope.choice.isSelected = "true";
Or in much better way, you can modify your tag like:
<li class="col-sm-6 text-center" ng-repeat="tab in tabs">
<label for="{{tab.url}}">
<input ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)" type="radio" name="radio" id="{{tab.url}}" ng-model="tab.isRadioChecked" value="true">{{tab.title}}</label>
</li>
And in your controller.
$scope.tabs = [{
title: 'I am a new customer',
url: 'one.tpl.html',
isSelected: true,
isRadioChecked: "true"
}, {
title: 'I have an account',
url: 'two.tpl.html'
}];
You can do this simply by setting the checked attribute for the input. For example:
<input type="radio" checked> This is a radio button
I have the following Checklist and Tasks Structure
Now i want if any one checks a Task i want to make sure the the Checklist also gets checked.
When someone unchecks the checklist all the tasks should get unchecked.
<!-- Checklist -->
<div class="checklist">
<div class="media">
<div class="pull-left checklist-checkbox">
<input class="checklist-input" name="checklist" type="checkbox" value="">
</div>
<div class="media-body task-list">
<h4 class="media-heading">This is a CheckList</h4>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body">Search for entertainers that perform the types of shows that are suitable for your function.</div>
</div>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body"> Book your venue.</div>
</div>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body"> Search for a caterer that is suitable for your function. <span class="label label-default">Lalu - June 23rd, 2014</span></div>
</div>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body"> Hold a training session for all attending staff and brief them on all activities and expectations for the day of the event.</div>
</div>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body"> Appoint an adequate number of staff as greeters to welcome guests and orient them with the event activities and venue.</div>
</div>
<div class="add-task">Add Task</div>
<div class="form-add-task">
<form action="addtask.php" method="post">
<input type="text" class="form-control task-input">
<input class="btn btn-sm btn-default" name="submit-task" type="submit" value="Add Task">
</form>
</div>
</div>
</div>
</div>
<div class="checklist">
<div class="media">
<div class="pull-left checklist-checkbox">
<input class="checklist-input" name="checklist" type="checkbox" value="">
</div>
<div class="media-body task-list">
<h4 class="media-heading">This is a CheckList</h4>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body">Search for entertainers that perform the types of shows that are suitable for your function.</div>
</div>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body"> Book your venue.</div>
</div>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body"> Search for a caterer that is suitable for your function. <span class="label label-default">Lalu - June 23rd, 2014</span></div>
</div>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body"> Hold a training session for all attending staff and brief them on all activities and expectations for the day of the event.</div>
</div>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body"> Appoint an adequate number of staff as greeters to welcome guests and orient them with the event activities and venue.</div>
</div>
<div class="add-task">Add Task</div>
<div class="form-add-task">
<form action="addtask.php" method="post">
<input type="text" class="form-control task-input">
<input class="btn btn-sm btn-default" name="submit-task" type="submit" value="Add Task">
</form>
</div>
</div>
</div>
</div>
<!-- / Checklist -->
jQuery Code:
$('input.checklist-input').on('change',function(){
$(this).parent().siblings('.task-list').find('input.task-input').prop('checked',$(this).prop('checked'));
})
Similar to Caio Vianna, just a different if, and targeting the proper list. Also added the unchecking of checklist if there's no longer any checked tasks. I'm sure you can optimize the selectors though, anyways should be helpful
$('input.task-input').on('change', function () {
if ($(this).prop('checked') === true) {
$(this).closest('div.tasks').parent().prev().find('input.checklist-input').prop('checked', true);
} else {
var checked = $(this).closest('div.task-list').find('input.task-input:checked').length;
if (checked === 0) {
$(this).closest('div.tasks').parent().prev().find('input.checklist-input').prop('checked', false);
}
}
})
I believe you are lacking the function that does the following logic:
Listen to the change event on .task-input
Determine if the length of checked items of grouped .task-input elements exceeds 0
If it exceeds zero, check the group's own .checklist-input
If not, uncheck the group's own .checklist-input
And here is the missing function:
$('input.task-input').on('change', function() {
var tasks = $(this).closest('.task-list').find('input.task-input:checked').length;
$(this).closest('.checklist').find('input.checklist-input').prop('checked',tasks);
});
Proof-of-concept fiddle: http://jsfiddle.net/teddyrised/1cy47tga/1/
Your code will check everything (or not) as the master checklist is toggled (alas, when you check it, it will check everything inside, and vice versa).
You want to test that first so ...
$('input.checklist-input').on('change',function(){
if (!$(this).prop('checked'))
$(this).parent().siblings('.task-list').find('input.task-input').prop('checked',false);
})
That will only UNCHECK, since it only runs if you unchecked the master checklist.
As for the rest
$(input.task-input').on('change',function() {
if ($(this).prop('checked'))
$('input.checklist-input').prop('checked',true);
})
Will check the master checklist only if you checked a sibling
Note: my jquery selector skills are rusty, so I might made some mistake there, but I guess the logic of the thing isclear =p
You should take control in two steps:
For the main level checklist button:
$('body').on('change', '.checklist-input', function () {
var checked = $(this).prop('checked');
$(this).closest('.checklist').find('.task-input:checkbox').prop('checked', checked);
});
For the second level checkboxes:
$('body').on('change', '.task-input:checkbox', function () {
var checkedArray = [];
var $checkboxes = $(this).closest('.checklist').find('.task-input:checkbox');
$checkboxes.each(function () {
var checked = $(this).prop('checked');
if (checked) {
checkedArray.push(checked);
}
});
var totalChecked = false;
if (checkedArray.length == $checkboxes.length) {
totalChecked = true;
}
$(this).closest('.checklist').find('.checklist-input').prop('checked', totalChecked);
});
JSFiddle Demo.