im trying to clone elements when I click the button. So far, I don't know, what the problem is about my code. I think it looks kinda right, could you please look over, and tell/describe me the problem? I mean, I read a lot of documentation about clonenode, and I just do the same. And when I look over my code, it does make sense to me, but it doest want to work... D:
The button should clone the whole field(inputCar)
Here is my fiddle https://jsfiddle.net/7k1sb7w0/
This is the html code:
<button id="buttonBtn">Clone Field</button>
<div id="inputCar">
<div class="column">
<label class="heading">Invite Persons</label>
</div>
<div class="medium-6 column">
<label for="ext-name">Name</label>
<input id="ext-name" type="text">
<input type="checkbox">
<label for="check7"></label>
<label>BMW</label>
<input type="checkbox" checked="true">
<label for="check8"></label>
<label>Ford</label>
</div>
<div class="medium-6 column">
<label for="ext-mail">E-Mail</label>
<input id="e-mail" type="email">
<datalist id="members"></datalist>
<button class="deletePerson">delete</button>
<label class="delete_btn">delete Field</label>
</div>
<br>
</div>
and this is my jsfile:
var clickBtn = document.querySelector('#buttonBtn');
var field = document.querySelector('#inputCar');
var i = 0;
clickBtn.addEventlistener('click', function(e) {
var cloneField = field.cloneNode(true);
cloneField.id = "inputCar" + i++;
field.parentNode.appentChild(cloneField);
}
Thank you in advance,
mark
Related
I'm working with a form (made with Bootstrap 4) and localStorage. I'm using it so i can use the form input values on another page. It works fine with the inputs, but in this form i also have checkboxes and i can't find how to do the following : i'd like to check which checkboxes are checked. For those that are checked, i'd like to add the checkbox label text in the localStorage to use it on my other page. How can i achieve this?
My html looks like this :
<form role="form" id="form" data-toggle="validator">
<div class="form-row">
<div class="form-group col-md-12">
<label for="inputAdresse">Adresse *</label>
<input type="text" class="form-control places-autocomplete" name="inputAdresse" id="inputAdresse"
required="required" placeholder="" value="" autocomplete=" address-line1" />
</div>
</div>
<div class="form-row form-checks">
<div class="form-group col-md-12 col-sm-6">
<div class="custom-control custom-checkbox mb-2">
<input type="checkbox" class="custom-control-input" id="checkAscenseur" name="check" value="Ascenseur">
<label class="custom-control-label" for="checkAscenseur">Ascenseur</label>
</div>
<div class="custom-control custom-checkbox mb-2">
<input type="checkbox" class="custom-control-input" id="checkCave" name="check" value="Cave">
<label class="custom-control-label" for="checkCave">Cave</label>
</div>
<div class="custom-control custom-checkbox mb-2">
<input type="checkbox" class="custom-control-input" id="checkParking" name="check" value="Parking">
<label class="custom-control-label" for="checkParking">Parking</label>
</div>
</div>
</div>
<button class="nextBtn pull-right" type="submit" id="btn-submit">Submit</button>
</form>
For the input, i use the following javascript :
document.getElementById("form").addEventListener("submit", callme);
function callme(event) {
event.preventDefault();
let inputAdresse = document.getElementById('inputAdresse');
localStorage.setItem('inputAdresse', inputAdresse.value);
window.location.href = "thank-you.html";
};
Here is the working DEMO of how to do what you need.
You need to use the checked property for checkboxes:
document.getElementById("form").addEventListener("submit", callme);
function callme(event) {
event.preventDefault();
let inputAdresse = document.getElementById('inputAdresse');
localStorage.setItem('inputAdresse', inputAdresse.value);
let checkAscenseur = document.getElementById('checkAscenseur');
localStorage.setItem('checkAscenseur', checkAscenseur.checked);
let checkCave = document.getElementById('checkCave');
localStorage.setItem('checkCave', checkCave.checked);
let checkParking = document.getElementById('checkParking');
localStorage.setItem('checkParking', checkParking.checked);
window.location.href = "thank-you.html";
};
UPD new code that saves data values instead of true/false: DEMO.
You could also do it the following way (pretty much the same, but a bit more compact):
document.getElementById("form").addEventListener("submit", callme);
function callme(event) {
event.preventDefault();
let inputAdresse = document.getElementById('inputAdresse');
localStorage.setItem('inputAdresse', inputAdresse.value);
new Array(...document.getElementById('form').getElementsByClassName('custom-control-input')).forEach(cb => {
localStorage.setItem(cb.id, cb.checked);
}
window.location.href = "thank-you.html";
}
I convert the HTMLCollection I get from the .getElementsByClassName(...) function to an array, which I can iterate over using .forEach(). If you want to store the values by their ids, this works fine :P
I have a script that is supposed to copy once set of form fields to another when a radio button is checked. It works on Safari, firefox (mac) but not on FF (PC) or IE.
function checkFirstDirAddrs() {
var i;
//checking which radio button selected
for ( i = 0; i < FirstCorpDirAddOption.length; i++) {
if (FirstCorpDirAddOption[i].checked == true) {
switch(i)
{
case 0:
document.getElementById("First_Corp_Director_Address1").value = document.getElementById("Corp_Address1").value;
document.getElementById("First_Corp_Director_Address2").value = document.getElementById("Corp_Address2").value;
document.getElementById("First_Corp_Director_City").value = document.getElementById("Corp_City").value;
document.getElementById("First_Corp_Director_Postal").value = document.getElementById("Corp_Postal").value;
break
case 1:
document.getElementById("First_Corp_Director_Address1").value = '';
document.getElementById("First_Corp_Director_Address2").value = '';
document.getElementById("First_Corp_Director_City").value = '';
document.getElementById("First_Corp_Director_Postal").value = '';
break
}
}
}
}
The html....
<div class="form-group">
<div class="col-sm-10"><strong>*Director Address</strong></div>
<div class="col-sm-6">
<div class="radio">
<label>
<input name="FirstCorpDirAddOption" id="FirstCorpDirAddOption" type="radio" value="Same as Corporate Address" onClick="checkFirstDirAddrs();">
Same as Corporate Address<br>
</label>
<label>
<input name="FirstCorpDirAddOption" id="FirstCorpDirAddOption" type="radio" value="Other" onClick="checkFirstDirAddrs();">
Other <em>(provided below)</em>
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="First_Corp_Director_Address1" class="col-sm-2 control-label">*Address:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="First_Corp_Director_Address1" name="First_Corp_Director_Address1" maxlength="80">
</div>
</div>
<div class="form-group">
<label for="First_Corp_Director_Address2" class="col-sm-2 control-label">Address 2:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="First_Corp_Director_Address2" name="First_Corp_Director_Address2" maxlength="80">
</div>
</div>
<div class="form-group">
<label for="First_Corp_Director_City" class="col-sm-2 control-label">*City:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="First_Corp_Director_City" name="First_Corp_Director_City" maxlength="50">
</div>
</div>
<div class="form-group">
<label for="First_Corp_Director_Postal" class="col-sm-2 control-label">*Postal/Zip:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="First_Corp_Director_Postal" id="First_Corp_Director_Postal" maxlength="7">
<span class="help-block">(enter NA if not from Canada/USA)</span>
</div>
</div>
If anyone can shed some more light on the issue that would be great. It works fine on most Mac based browsers I tested on and throws no errors in the Console of dev tools.
As I know there is no standard for treating same ids in one document via global variable.
It's good to know about reference between ids and global variable they initialize. But God please, do not use it. You can use any selector or create different ids instead of trying to get ids with 'FirstCorpDirAddOption'. Just like this, for example:
document.querySelectorAll('.radio input')
Just check what you get via global variable:
Here is Chrome
Here is FF
They are different. Thus you can't use same code for them.
You need to get rid of the duplicate IDs as they are causing you trouble.
You have 3 options if you get rid of the duplicate IDs to still have a 'hook' that JavaScript can use to access the elements.
Option 1: access the elements by name
Option 2: access the elements by a new CSS class name
Option 3: access the elements by some other "loosely defined" method
For simplicity I'm going to recommend #1, but #2 is just as good.
<div class="radio">
<label>
<input type="radio" name="FirstCorpDirAddOption" value="Same as Corporate Address" onclick="checkFirstDirAddrs();"/>
Same as Corporate Address
</label>
<br/>
<label>
<input type="radio" name="FirstCorpDirAddOption" value="Other" onclick="checkFirstDirAddrs();"/>
Other <em>(provided below)</em>
</label>
</div>
Now the JavaScript to access the input(s):
function checkFirstDirAddrs(){
var i;
//checking which radio button selected
var firstCorpDirOptions = document.querySelectorAll('input[name="FirstCorpDirAddOption"]');
for(i=0;i<firstCorpDirOptions.length;i++){
if(firstCorpDirOptions[i].checked == true){
//...
I am a beginner and i have a problem in creating a review form using angular js. I've got the input value in an empty array. but i don't know were to push that fetched content so that it will be displayed in the web page(inside the blockquote).please give a simple and understandable answer
HTML
<section class="container" ng-controller="storeController as store">
<div class="row">
<div class="col-md-12" style="margin-top:100px;" ng-controller="ReviewController as reviewCtrl">
<div class="review_form">
<blockquote>
<h3>{{reviewCtrl.review.name}}</h3>
<p>{{reviewCtrl.review.age}}</p>
<p>{{reviewCtrl.review.mail}}</p>
</blockquote>
</div>
<form class="col-md-4 form-group" ng-submit="reviewCtrl.addreview()">
<input type="text" id="name" class="form-control" placeholder="name" ng-model="reviewCtrl.review.name"><br>
<input type="text" id="age" class="form-control" placeholder="age" ng-model="reviewCtrl.review.age"><br>
<input type="mail" id="mail" class="form-control" placeholder="mail" ng-model="reviewCtrl.review.mail"><br>
<input type="submit" class="btn-block btn btn-success" value="Submit Review">
</form>
</div>
</div>
</section>
JavaScript
(function(){
var app=angular.module('store',[]);
app.controller('storeController',function(){
this.product=gem;
});
app.controller('ReviewController',function(){
}
this.review={};
this.addreview=function($scope){
push(this.review);
this.review={};
};
});
var gem=[
{name:'Dodecaheadron',price:2.9,desc:[{comment:'this product is good !'}],avail:true,stock:false},
{name:'Octaheadron',price:2,desc:[{comment:'this product is good !'}],avail:false,stock:true},
{name:'Tetraheadron',price:3.25,desc:[{comment:'this product is good !'}],avail:true,stock:false},
{name:'Pentaheadron',price:4,desc:[{comment:'this product is good !'}],avail:true,stock:false} ];
})();
You have a lot of errors in your JavaScript:
app.controller('ReviewController',function(){
} // Guess you need to change to this });
Solution:
app.controller('ReviewController',function(){
});
Final Script:
(function(){
var app=angular.module('store',[]);
app.controller('storeController',function(){
this.product=gem;
});
app.controller('ReviewController',function(){
});
this.review={};
this.addreview=function($scope){
push(this.review);
this.review={};
};
})();
var gem=[
{name:'Dodecaheadron',price:2.9,desc:[
{comment:'this product is good !'}],avail:true,stock:false},
{name:'Octaheadron',price:2,desc:[
{comment:'this product is good !'}],avail:false,stock:true},
{name:'Tetraheadron',price:3.25,desc:[
{comment:'this product is good !'}],avail:true,stock:false},
{name:'Pentaheadron',price:4,desc:[
{comment:'this product is good !'}],avail:true,stock:false}
];
I've got a little problem. I want to set to dirty a single input, I mean, because when I give a value automatically it stays in pristine class, doesn't change, and doesn't save the new value.
If I edit it, it works and change the class. I want to cancel that pristine class.
If anyone know please let me know.
<form class="form-horizontal" ng-repeat="studiant in studiants" name="form" id="form">
<input type="hidden" name="id" value="{{studiant.studiant_id}}" class="form-control" disabled>
<div class="form-group">
<label for="school" class="col-md-2 control-label">School</label>
<div class="col-md-1">
<input type="text" id="school" name="school" class="form-control" ng-init="studiant.school=studiant.studiant_school" ng-model="studiant.school">
</div>
</div>
<div class="form-group">
<label for="name" class="col-md-2 control-label">Student's Name</label>
<div class="col-md-10">
<input type="text" id="name" name="name" class="form-control" ng-init="studiant.name=studiant.studiant_name" ng-model="studiant.name">
</div>
</div>
</form>
And the script:
document.getElementbyId('name').value = "anything";
Or, if I doing wrong and I have to change the value with ng-model or something, please help me.
http://plnkr.co/edit/bVoljJqiK3CLB2xqZ6Zm?p=preview
You can see a working example there.
Make sure you have the name attr set for the form and the input.
HTML Example:
<button id="dirty-button" ng-click="addText(); myForm.myText.$setDirty()">Make Dirty</button>
<hr>
<form name="myForm">
<input name="myText" id="myTextInput" type="text" ng-model="myText" required>
</form>
<br/>
<span ng-show="myForm.myText.$dirty">it's dirty now</span>
A simple function:
$scope.addText = function() {
$scope.myText = "now I'm dirty";
}
$scope.$on('$viewContentLoaded'){
$scope.form.fieldName.$dirty = true;
}
When your view is loaded then angular calls viewContentLoaded event is called. After that you can set the field dirty. And also if you want to call some method ,that should be executed after the content is loaded than you should call that method inside this $scope.$on('$viewContentLoaded'){..}
This should do the job
angular.element(document.querySelector('form')).scope().formname.fieldname.$setDirty()
I have put together what I thought would be a very simple example of how I could fire off a function from a checkbox being checked in angular and have that function check to see the new value of the checkbox and accordingly display or not display a message. It works, but only after I have checked and unchecked the box at least once. For this reason I figured I simply would need to default the checkbox value to false and that would take care of the problem but it didn't. Can anyone help me tweak this to get it working and if so, maybe explain why my thinking is flawed, what do I not understand about the $scopes state. BTW it is also flipped, meaning that when I check the box the message goes away and when I uncheck it it says it's checked.
I am doing these exercises to get a better idea how angular works and I know deep down this is a javascript issue, but I still don't have it figured out. Any help is appreciated
app.js
var formApp = angular
.module('formApp', [])
.controller('formController', function($scope) {
$scope.formData = {};
$scope.redCheckFunction = function() {
if ($scope.formData.favoriteColors.red == true){
$scope.redMessage = "red is checked";
} else {
$scope.redMessage = "";
}
};
});
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
<div>
<h2>Angular Checkboxes</h2>
<form>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name"
ng-model="formData.name">
<label>Description</label>
<input type="text" class="form-control" name="description"
ng-model="formData.description">
</div>
<!-- MULTIPLE CHECKBOXES -->
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors"
ng-model="formData.favoriteColors.red"
ng-init="favoriteColors.red.disabled=false"
ng-click="redCheckFunction()"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors"
ng-model="formData.favoriteColors.blue"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors"
ng-model="formData.favoriteColors.green"> Green
</label>
</div>
<button type="submit" class="btn btn-danger btn-lg">Send Away!</button>
<h2>{{redMessage}}</h2>
</form>
<h2>Sample Form Object</h2>
<pre>
{{ formData }}
</pre>
</div>
</body>
</html>
I created a pen to make things easier:
Checkbox Pen
ng-click is fired before the model is updated:
Note that ngClick events will occur before the model is updated.
You need to use the ng-change directive:
Evaluate the given expression when the user changes the input.
http://codepen.io/anon/pen/azaJob
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red" ng-init="formData.favoriteColors.red.disabled=false" ng-change="redCheckFunction()"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
</label>
</div>
When you enter the function redCheckFunction the value is already updated.