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?

How can I combine 60 similar jquery functions into a single function?

I have a page which is essentially a giant checklist. If you hit the button to edit a checklist item, a modal pops up. On this modal, is a radio to select if problems were detected or not during the check. If yes is selected, a hidden div is displayed so that more information can be inserted before submitting.
Here is an example modal, currently, there are 60 on the page.
<!-- modal window for submiting check-->
<div id="edit3" class="text-left g-max-width-800 g-bg-white g-overflow-y-auto g-pa-20" style="display: none;">
<button type="button" class="close" onclick="Custombox.modal.close();"><i class="hs-icon hs-icon-close"></i></button>
<h4 class="g-mb-20">Update Record for Empirix->SIP:500 Baseline</h4>
<form action="actions.php" method="POST">
<!-- Checkbox -->
<div class="g-mb-15">
<label class="form-check-inline u-check g-pl-25 ml-0 g-mr-25">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue3" type="radio" value="0" checked="">
<div class="u-check-icon-radio-v4 g-absolute-centered--y g-left-0 g-width-18 g-height-18">
<i class="g-absolute-centered d-block g-width-10 g-height-10 g-bg-primary--checked"></i>
</div>
No Issues
</label>
<label class="form-check-inline u-check g-pl-25 ml-0 g-mr-25">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue3" type="radio" value="1">
<div class="u-check-icon-radio-v4 g-absolute-centered--y g-left-0 g-width-18 g-height-18">
<i class="g-absolute-centered d-block g-width-10 g-height-10 g-bg-primary--checked"></i>
</div>
Issue Found
</label>
</div>
<input type="hidden" name="action" value="subcheck">
<input type="hidden" name="id" value="3">
<div id="ifYes3" class="g-mb-15 desc3" style="display:none">
<div class="form-group g-mb-20">
<label class="g-mb-10" for="inputGroup1_1">INC Ticket</label>
<input id="inputGroup1_1" class="form-control form-control-md rounded-0" type="text" placeholder="INC Ticket #" name="inc_tick">
</div>
<div class="form-group g-mb-20">
<label class="g-mb-10" for="inputGroup2_1">Brief Description</label>
<textarea id="inputGroup2_1" class="form-control form-control-md g-resize-none rounded-0" rows="3" name="problem" placeholder="If you found an issue, please provide a short overview."></textarea>
</div>
</div>
<div align="right">
<button type="submit" class="btn u-btn-primary g-mr-20 g-mb-1">Submit</button>
</div>
</form>
</div>
<!-- End modal window -->
Then, I have this ajax code to perform the refresh, you'll notice I have a jq toggle for each of the 60 div's in here.
var interval = 10000; //number of mili seconds between each call
var refresh = function() {
$.ajax({
url: "ops_controller.php",
cache: false,
success: function(html) {
$("[name=issue1]").click(function(){
$('.desc1').toggle();
$("#ifYes1-"+$(this).val()).show('slow');
});
<!-- Cut out 58 similar functions -->
$("[name=issue59]").click(function(){
$('.desc59').toggle();
$("#ifYes59-"+$(this).val()).show('slow');
});
$("[name=issue60]").click(function(){
$('.desc60').toggle();
$("#ifYes60-"+$(this).val()).show('slow');
});
$('#table-refresh').html(html);
setTimeout(function() {
refresh();
}, interval);
}
});
};
refresh();
I then have the same code (60 jq functions) in another function
$( document ).ajaxStop(function() {
$.HSCore.components.HSModalWindow.init('[data-modal-target]');
$.HSCore.components.HSPopup.init('.js-fancybox', {
btnTpl: {
smallBtn: '<button data-fancybox-close class="btn g-pos-abs g-top-25 g-right-30 g-line-height-1 g-bg-transparent g-font-size-16 g-color-gray-light-v3 g-brd-none p-0" title=""><i class="hs-admin-close"></i></button>'
}
});
$('[data-toggle="tooltip-show"]').tooltip('show');
$("[name=issue1]").click(function(){
$('.desc1').toggle();
$("#ifYes1-"+$(this).val()).show('slow');
});
<!-- cut out 58 other items -->
$("[name=issue59]").click(function(){
$('.desc59').toggle();
$("#ifYes59-"+$(this).val()).show('slow');
});
$("[name=issue60]").click(function(){
$('.desc60').toggle();
$("#ifYes60-"+$(this).val()).show('slow');
});
});
});
The reason I've done it like this is so that this toggle will work on load and on ajax page refresh every 10 seconds. Im very new to jQuery/AJAX so forgive my ignorance. After two days, this is what I came up with to make it still work after the page refresh.
Surely, there has to be a cleaner method than what I'm doing here.

You can use a generic function in combination with event delegation¹ - see example below:
// [name^=issue] will target elements whose [name] attributes begins with "issue"
$(document).on("click", "[name^=issue]", function() {
var issueNo = this.name.replace("issue", "");
$(".desc" + issueNo).toggle();
$("#ifYes" + issueNo + "-" + $(this).val()).show("slow");
})
¹ https://learn.jquery.com/events/event-delegation/

You could set a data attribute in the HTML for each of the items you are wrapping - essentially you need a way to get the current ID for each then build up your jquery selector from that.
<div class="myrow" data-rowID="1">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue1" type="radio" value="1">
</div>
<div class="myrow" data-rowID="2">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue2" type="radio" value="1">
</div>
<div class="myrow" data-rowID="3">
<input class="g-hidden-xs-up g-pos-abs g-top-0 g-left-0" name="issue3" type="radio" value="1">
</div>
$(".myrow input[type=radio]").click(function(){
// ok what number is this row?
var myRowID = $(this).attr('data-rowID');
$('.desc'+ myRowID ).toggle();
$("#ifYes" + myRowID + "-"+$(this).val()).show('slow');
});
Something like that.

Changing a modal windows title through angularjs

I'm practicing angularjs by creating a simple inventory app. I have a button to add a new product to the list of products, and I have an edit button for the existing products.
Both buttons bring up the same modal windows, and I have it set so that the title of the modal says "New Product" when I click on "Add New Product" button, and "Edit Product" when I click to edit an existing product.
The issue I'm having is when I click to add a new product the title displays correctly; however, as soon as I start typing the new code for the new product, the title changes automatically to "Edit Product".
Below is the code I'm using for this, and the entire code can be found here http://codepen.io/andresq820/pen/LWGKXW
The modal windows is not coming up in codepen.io; however, I'm writing logging "edit" to the console when the edit button is clicked, and "new" when the new product is clicked.
HTML CODE
<div class="modal fade" id="editItemModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{title(item.code)}}</h4>
</div>
<div class="modal-body">
<form name="myEditForm" ng-submit="editProduct(item)">
<div class="form-group">
<label for="code">Code:</label>
<input type="text" size="5" maxlength="5" class="form-control" name="code" id="code"
ng-model="item.code" ng-disabled="false">
</div>
<div class="form-group">
<label for="description">Description:</label>
<input type="text" class="form-control" id="description" ng-model="item.description" required>
<span ng-show="myEditForm.description.$touched && myEditForm.description.$invalid">The description is required.</span>
</div>
<div class="form-group">
<label for="amount">Amount:</label>
<input type="number" min="0" max="99999" size="5" maxlength="5" class="form-control" name="amount" id="amount"
ng-model="item.amount" integer>
</div>
<div class="form-group">
<label for="radio">Type:</label>
<div class="radio">
<label><input type="radio" name="optradio" ng-model="item.type" value="in">In</label>
<label><input type="radio" name="optradio" ng-model="item.type" value="out">Out</label>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" ng-click="close()" value="Close" />
<input type="submit" class="btn btn-primary pull-right" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
ANGULARJS CODE
$scope.title = function(code){
console.log(code);
if (typeof code == 'undefined'){
console.log('new');
return 'New Product';
}
console.log('edit');
return 'Edit Product';
};

Change your function with below code. It will check if the code is already exist in your $scope.items or not. It will return as new if item not exited.
$scope.title = function(code){
var title = 'New Product';
angular.forEach($scope.items, function(value, key) {
var arr = Object.values(value);
if(arr.indexOf(code) !== -1 ) {
title = 'Edit Product';
}
});
console.log(title);
return title;
};

The input box for Code is bound to item.code value. As soon as you start typing anything in there, item.code is no longer undefined. And as per your condition in the method call for function, it returns Edit title when code is not undefined.

In your view you get your title through the title() function and what that function returns is based on the current code. As soon as you change anything in your model, Angular will detect a change and will go through ALL your two-way bindings and see if they need to be changed.
So in your case the following happens:
You enter a code
Angular detects a change
Angular will check all your bindings to see if they changed (ngBinding or the more common {{}})
The title() function gets called to see if it has changed, the title function has changed indeed, there is now a code so it will return the new title.
So how do you fix it? Easy!
instead of a two-way binding ({{}}) you can use a one-time binding ({{::}}). A one-time binding gets set once and then Angular 'forgets' about it, it simply won't care about any changes that happens to it any more.
In your case:
{{title(item.code)}}
to
{{::title(item.code)}}

cloning elements with eventlistener

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

Javascript: .reset is causing page to refresh

HTML
<form class="controls" id="Filters">
<fieldset>
<div id="sample-showcase" class="noUi-target noUi-ltr noUi-horizontal noUi-background"></div>
<div id="rangespan-container">
<span id="min-value-span" class="range-spans"></span>
<input type="hidden" class="min-value-span">
<span class="range-spans">g</span>
<span id="max" class="range-spans"> - </span>
<span id="max-value-span" class="range-spans"></span>
<input type="hidden" class="min-value-span">
<span class="range-spans">g</span>
</div>
<div class="range-button checkbox">
<input type="checkbox" class="rangecheck"/></div>
</fieldset>
<fieldset>
<h3 class="sidetitle">Filter</h3>
<div class="breakfast-filter checkbox">
<input type="checkbox" class="checkbox1" value=".category-breakfast"/>
<label>Breakfast</label></div>
<div class="lunch-filter checkbox">
<input type="checkbox" class="checkbox2" value=".category-lunch"/>
<label>Lunch</label></div>
<div class="dinner-filter checkbox">
<input type="checkbox" class="checkbox3" value=".category-dinner"/>
<label>Dinner</label></div>
<div class="snacks-filter checkbox">
<input type="checkbox" class="checkbox4" value=".category-snacks"/>
<label>Snacks</label></div>
</fieldset>
<fieldset>
<h3 class="sidetitle">Sort</h3>
<div class="sort" data-sort="protein:asc">Low to High</div>
<div class="sort" data-sort="protein:desc">High to Low</div>
<div class="sort" data-sort="random">Random</div>
</fieldset>
<button id="Reset">Clear Filters</button>
</form>
Snippet of JS
bindHandlers: function(){
var self = this;
self.$filters.on('change', function(){
self.parseFilters();
});
self.$reset.on('click', function(){
self.$filters[0].reset();
self.parseFilters();
});
}
self.$reset = jQuery('#Reset'); it is defined higher in the code. Not sure if this is enough info.
Here is the link to the full code: Click Here
If you go to the home page click on some filters then try resetting. You should see it work like it's suppose to then take you to domain.com/?
Not sure why
Help please

button elements are submit buttons by default. You have to set type="button" if you to make them "dummy" buttons, i.e. they don't have a any default behavior:
type="button": The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
<button type="button" id="Reset">Clear Filters</button>
Of course you could also set it to type="reset" and let the browser take care of resetting the form elements for you:
type="reset": The button resets all the controls to their initial values.
Then you could simplify your event handler to:
self.$reset.on('click', function(){
self.parseFilters();
});
It's not a huge change, but if the browser already offers this feature, why not make use of it?

Because you are using a button within the form and it is not prevented its default behavior.
Hence after resetting the form, the form is getting submitted.
You either have to return false after the function or preventDefault(). Try this.
self.$reset.on('click', function(e){
e.preventDefault();
self.$filters[0].reset();
self.parseFilters();
});
Or you need to set the type="button" for the button tag to make sure they are of type button and not submit.
<button id="Reset" type="button">Clear Filters</button>