Develop Reference

How can i get {{form}} value with javascript?

there is a piece of my html code:
<!-- STEP 1: class .active is switching steps -->
<div data-step="1" class="">
<h3>Załóż fundację:</h3>
<div class="form-group form-group--inline">
<label> Nazwa <input type="text" name="name" id="name" /> </label>
<label> Opis <input type="text" name="description" id="description" /> </label>
</div>
<div class="form-group form-group--buttons">
<button type="button" class="btn next-step">Dalej</button>
</div>
</div>
<!-- STEP 2 -->
<div data-step="2">
<h3>Podaj typ fundacji</h3>
<div class="form-group form-group">
{{form1}}
</div>
<div class="form-group form-group--buttons">
<button type="button" class="btn prev-step">Wstecz</button>
<button type="button" class="btn next-step">Dalej</button>
</div>
</div>
In the step1, i am able to get the values from inputs by id, like:
var name = document.getElementById('name').value;
How can i do such a thing with the {{form1}}, it is kind of select field:
class AddFundationTypeForm(forms.Form):
type = forms.ChoiceField(choices=type_of_organization)
type_of_organization is a a dict, with 3 key-value pairs.

you can do this with any form field by adding prefix id_
so for your type field:
var type = document.getElementById('id_type').value;
django by default makes id for each field by using 'id_'+ your_field_name
and you want to obtain whole form then you should do this in your template.html
Template
<form id="myForm" action="" method="post">
{{form1}}
</form>
and then in javascript:
var form = document.getElementById('myForm')

Thanks, however, i've added new field to my form:
class AddFundationForm(forms.Form):
type = forms.ChoiceField(choices=type_of_organization)
categories = forms.MultipleChoiceField(choices=category_choices, widget=forms.CheckboxSelectMultiple)
JS:
var type = document.getElementById('id_type').value; (that works)
var category = document.getElementById('id_categories').value; (it doesn't)
Could you tell me what's the difference between defining two variables above?

Adding a new component instance in Vue via a button click returning error

Just to preface this whole thing-- I'm not even sure that the way I'm going about this is the most correct way to do it. Basically, I need to add an instance of a Vue component when the user clicks a button, expanding. I used this discussion in the vue.js forum to help. Unfortunately, triggering this insert function via a button click is not working. Console is showing an "addNewStop is not defined at HTMLButtonElement.onclick" error.
The HTML in my template:
<div id="newCont"></div>
<button type="button" class="btn-primary" id="addStop" onclick="addNewStop()">Add Stop</button>
The script I'm calling:
import Stops from '#/components/Stops'
const ComponentCtor = Vue.extend(Stops)
const componentInstance = new ComponentCtor({})
function addNewStop() {
componentInstance.$mount('#newCont')
}
I will freely admit that I wasn't sure how to go about doing this in the first place, and have found surprisingly little information about how to insert new component instances. If there are other, better options I should be exploring beyond this, please let me know!
Edit:
Stops is actually a template containing form inputs, allowing the user to specify a delivery stop along a truck route. Here is its template:
<template>
<div class="stops">
<h4>Delivery</h4>
<div class="form-group">
<label for="shipName">Shipper Name</label>
<vue-simple-suggest
:list="simpleSuggestionList"
:filter-by-query="true" id="shipName" placeholder="Start typing a name" autocomplete="autofill-myself"></vue-simple-suggest>
</div>
<div class="form-group">
<label for="locationPickup">Location</label>
<vue-simple-suggest
:list="simpleSuggestionList"
:filter-by-query="true" id="locationPickup" placeholder="Start typing an address" autocomplete="custom-addresses"></vue-simple-suggest>
</div>
<div class="form-group row">
<label>Date</label>
<flat-pickr
:config="dateConfig"
class="form-control"
placeholder="Select date"
name="date" id="date1"></flat-pickr>
</div>
<div class="row">
<div class="form-group col left">
<label>Time</label>
<flat-pickr
:config="timeConfig"
class="form-control"
placeholder="Select time"
name="time1" id="time1"></flat-pickr>
</div>
<div class="form-group col right">
<label v-show="pickupChecked">Time 2</label>
<flat-pickr
:config="timeConfig"
class="form-control"
placeholder="Select time"
name="time2" v-show="pickupChecked" id="time2"></flat-pickr>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" v-model="pickupChecked" id="apptCheck1" >
<label class="form-check-label" for="apptCheck1">
Time range?
</label>
</div>
<div class="form-group row">
<label for="userAboutMe">Location notes:</label>
<textarea class="form-control" id="userAboutMe" rows="3" placeholder="Is there any information about the location that the driver should know?"></textarea>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Save location notes for this place?
</label>
</div>
</div>
</div>
</template>

In most cases, trying to manipulate the DOM directly (e.g. by adding a component) is a sign that you're not using Vue.js as it was intended. Vue is data-driven, which means that your code should simply update the data, leaving the DOM manipulation to Vue itself. Your question doesn't provide enough details for a specific solution, but there are a couple of general approaches that might work.
If you have a number of Stop components in the DOM, and clicking on the button simply adds another, then use v-for to render the stops from data, and have the button click handler simply add another entry in the data array.
<template>
<form>
<fieldset v-for="(stop, index) in stops" :key="index">
<stop v-bind="whatever"/>
</fieldset>
<button #click="onClick">Add one</button>
</form>
</template>
<script>
export default {
data() {
return {
stops: []
};
},
methods: {
onClick() {
this.stops.push(/* whatever */)'
}
},
components {
Stop
}
};
</script>

Input fields (type="number") loose their two-way 'BIND' property of angularjs once their content is changed.

My problem is pretty simple but elusive in nature. When you will load the index.php, (as localhost using xampp) you will be presented with a simple form. Now there are multiple elements on this form, and it's still a work in progress, so the possibility of multiple bugs is plausible. However, there's this one bug that's really annoying.
THE PROBLEM:
On changing the Due Date element, the content of the following input
boxes changes due to the fact that they're bind with it. Now it won't
matter how many times you change the due date, because every time the
value in the fields will change accordingly, Thanks to angularjs.
The BUG creeps in when you change the value of an input field. Say
originally it was 27 and then you changed it to , idk say 10.* NOW
IF YOU CHANGE THE DUE DATE, THE ALTERED INPUT FIELD REMAINS THE SAME
* I.E. WITH VALUE 10, WHEREAS I WANT IT TO CHANGE NEVERTHELESS.
Moreover, if one of you guys is the apotheosis of angularjs coders,
and he got some tips for me, I would just like to say..... "I APPRECIATE
THAT".
index.php
<!-- addService.html -->
<?php
$version = time();
?>
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap and our custon css files) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- JS (load angular, ui-router and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="ctrl-add-service.js"></script>
<script src="services.js"></script>
</head>
<body>
<div ng-app="mainApp" ng-controller="ctrl-add-service">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<h1 align="center">SERVICE FORM</h1>
<form role="form" ng-submit="createService()">
<div>
<label>Service Name</label>
<input type="text" class="form-control" placeholder="Enter service name here" ng-pattern="/^[a-zA-Z0-9_]*$/" required>
</div>
<div class="row">
<div class="col-md-6">
<label>Due Date</label>
<input type="date" class="form-control" ng-model='dueDate' ng-change="setFields()" required>
</div>
<div class="col-md-6">
<label>Task Date</label>
<input type="date" class="form-control" required>
</div>
</div>
<div style="margin-top: 20px;margin-bottom: 20px;" align="center">
<label>Period</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='12' ng-change="setFields()">Annually</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='6' ng-change="setFields()">Semi-Annually</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='4' ng-change="setFields()">Quarterly</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='1' ng-change="setFields()">Monthly</label>
</div>
<div align="center">
<div>
<div style="display:inline-block;"><label>Jan</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[0]' ng-required='!fields[0]'></div>
<div style="display:inline-block;"><label>Feb</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[1]' ng-required='!fields[1]'></div>
<div style="display:inline-block;"><label>Mar</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[2]' ng-required='!fields[2]'></div>
<div style="display:inline-block;"><label>Apr</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[3]' ng-required='!fields[3]'></div>
</div>
<div style="display:inline-block;"><label>May</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[4]' ng-required='!fields[4]'></div>
<div style="display:inline-block;"><label>Jun</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[5]' ng-required='!fields[5]'></div>
<div style="display:inline-block;"><label>Jul</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[6]' ng-required='!fields[6]'></div>
<div style="display:inline-block;"><label>Aug</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[7]' ng-required='!fields[7]'></div>
<div>
<div style="display:inline-block;"><label>Sep</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[8]' ng-required='!fields[8]'></div>
<div style="display:inline-block;"><label>Oct</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[9]' ng-required='!fields[9]'></div>
<div style="display:inline-block;"><label>Nov</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[10]' ng-required='!fields[10]'></div>
<div style="display:inline-block;"><label>Dec</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[11]' ng-required='!fields[11]'></div>
</div>
</div>
<div align="center" style="margin-top: 20px;">
<button type="submit" class="btn btn-primary">Create</button>
<button type="reset" class="btn btn-danger">Reset</button>
</div>
</form>
</div>
<div class="col-md-2"></div>
</div>
</div>
</body>
</html>
ctrl-add-service.js (controller)
// ctrl-add-service.js Controller for the add service option in the nav bar of the home screen.
var mainApp = angular.module("mainApp",[]);
mainApp.controller('ctrl-add-service',function($scope, DueDateService){
$scope.value ='1';
$scope.setFields = function() {
$scope.date = DueDateService.date($scope.dueDate);
$scope.fields = DueDateService.fields( DueDateService.month($scope.dueDate), $scope.value); // first parameter passes month in int, second parameter passes period value in int.
};
});
services.js (services for the app)
// services.js services.js of the account direcotry of the project. It is used by the mainApp.
//DueDateService
mainApp.service('DueDateService', function(){
this.month = function(date) {
var temp = new Date(date);
month = temp.getMonth();
console.log(month+1+" is the month");
return (month+1);
};
this.date = function(date) {
var temp = new Date(date);
date = temp.getDate();
console.log(date+" is the date");
return (date);
};
this.fields = function(month,period) {
var lap = parseInt(period); // possible values of lap can be [12,6,4,1]
var iteration = 12/lap; // possible values of iteration can be [1,2,3,12]
var selectedFields = [true,true,true,true,true,true,true,true,true,true,true,true];
for (var i=1; i<=iteration; i++) {
if(month>12) {
month = month - 12;
}
selectedFields[month-1]= false;
month = month + lap;
}
return selectedFields;
};
});

I think you need to change the ng-value to ng-model and create an Array of your dates, like this:
ng-model='dates[0]'
ng-model='dates[1]'
ng-model='dates[2]'
...
And your controller would be like this:
var date = DueDateService.date($scope.dueDate);
$scope.dates = Array(12).fill(date);
See at this plunker: https://plnkr.co/edit/p8O14Y80hCWyNmxnYxbF

In following lines why are you taking ng-value, As far as I think you will have to take ng-model="date" And this will work fine.
see the ng-value usages
https://docs.angularjs.org/api/ng/directive/ngValue
<div style="display:inline-block;"><label>Jan</label><input type="number" class="form-control" ng-value='date' ng-model="date" ng-disabled='fields[0]' ng-required='!fields[0]'></div>

comment system using angular js

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}
];

Jquery add data-rel attribute to all input fields and remove name attribute

I need to somehow have data-rel value to input field and remove name from same input field on specific class.
The code i had done so far is working to remove name from that specific field. but i can't add data-rel to that same field.
Here is the code.
$('.vf-sortable-holder').each(function() {
var empty_sortable = $(this).closest('.option').find('.empty-sortable').find('input');
var sortable_name = empty_sortable.attr('name');
input.attr('data-rel', sortable_name);
empty_sortable.removeAttr('name');
});
So html look like this
<div class="option">
<div class="vf-sortable-holder">
<div class="empty-sortable hidden">
<input type="text" name="example">
</div>
</div>
</div>
<div class="option">
<div class="vf-sortable-holder">
<div class="empty-sortable hidden">
<input type="text" name="example">
</div>
</div>
</div>
So my js code works to remove name attribute but i actually need to change name with data-rel either to remove name from html with js code and add data-rel or somehow to rename name to data-rel in the end i need it to look like this:
<div class="option">
<div class="vf-sortable-holder">
<div class="empty-sortable hidden">
<input type="text" data-rel="example">
</div>
</div>
</div>
<div class="option">
<div class="vf-sortable-holder">
<div class="empty-sortable hidden">
<input type="text" data-rel="example">
</div>
</div>
</div>

Is this what you are looking for?
$('.vf-sortable-holder').each(function() {
var empty_sortable = $(this).find('input');
var sortable_name = empty_sortable.attr('name');
empty_sortable.attr('data-rel', sortable_name).removeAttr('name');;
});
Also remove the '.' from your vf-sortable class name in the HTML.

Selecting .vf-sortable-holder, then the parent .option, then the .empty-sortable and finally the input, all inside loops, seems like jumping through a lot of hoops ?
$('.option .vf-sortable-holder .empty-sortable input').attr('data-rel', function() {
return this.name;
}).prop('name','');

Remove the . in the class name(.vf-sortable-holder)
<div class="option">
<div class="vf-sortable-holder">
<input type="text" name="example" />
</div>
</div>
<div class="option">
<div class="vf-sortable-holder">
<input type="text" name="example2" />
</div>
</div>
then
jQuery(function () {
$('.vf-sortable-holder input').attr('data-rel', function () {
var name = this.name;
$(this).removeAttr('name');
return name;
})
})
Demo: Fiddle