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.

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

Is there a default way of adding edit button to each of the input text fields in a bootstrap form

I am creating a data update form using bootstrap, in which I already have the data and user has option to edit any of the fields and save it. Since I don't want the user to accidentally change the fields, I've put the input fields in disabled state initially, with an edit button associated with each of the text input fields.
Following is the HTML I'm using.
<form role="form">
<div class="form-group">
<label for="name">Name</label>
<div class="input-group">
<input type="text" class="form-control" id="name"
value="Skipper" readonly>
<div class="input-group-addon">
<span class="glyphicon glyphicon-pencil" onclick=editName()></span>
</div>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Now to make the pencil icon for the text field to work I had to write a javascript
function editName() {
document.getElementById('name').readOnly=false;
};
The problem is I am having at least 15-20 fields in my form and writing a javascript function for each of the fields doesn't look right. Also there are some more features that i am looking to enhance the user experience, like hiding the pencil icon when input field is enabled. Can you guys suggest a default or inbuilt way of handling this kind of forms.

Example 1:
You could also just create an "Edit" button that a use could click in order to make the content editable. Here is the following HTML for this:
HTML
<div class='row text-center'>
<a class="btn btn-danger editBtn">Edit Off</a>
</div>
<form role="form">
<div class="form-group">
<label for="name">Name</label>
<div class="input-group">
<input type="text" class="form-control editField" value="Skipper" readonly>
<input type="text" class="form-control editField" value="McAwesome-Sauce" readonly>
<input type="text" class="form-control editField" value="Tester" readonly>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
jQuery
$(document).ready(function () {
$('.editBtn').click(function () {
if ($('.editField').is('[readonly]')) { //checks if it is already on readonly mode
$('.editField').prop('readonly', false);//turns the readonly off
$('.editBtn').html('Edit On'); //Changes the text of the button
$('.editBtn').css("background", "green"); //changes the background of the button
$('.editBtn').css("border", "green"); //changes the border of the button
} else { //else we do other things
$('.editField').prop('readonly', true);
$('.editBtn').html('Edit Off');
$('.editBtn').css("background", "red");
}
});
});
This will allow you to toggle all fields for edit. It will also give you the ability to still customize the content as much as you would like. Take a look at my fiddle below to learn more.
Demo JSFiddle
Example 2:
This example would include a bit more visual design with it. It has the idea of Example 1 but it also includes changing the glyphicons. Take a look at the following:
jQuery
$(document).ready(function () {
$('.editBtn').click(function () {
if ($('.editField').is('[readonly]')) { //checks if it is already on readonly mode
$('.editField').prop('readonly', false); //turns the readonly off
$('.editBtn').html('Edit On'); //Changes the text of the button
$('.editBtn').css("background", "green"); //changes the background of the button
$('.editBtn').css("border", "green"); //changes the border of the button
$('.editMode').toggleClass('hide'); //hide one glyphicon
$('.nonEditMode').addClass('hide'); //show another glyphicon
} else { //else we do other things
$('.editField').prop('readonly', true);
$('.editBtn').html('Edit Off');
$('.editBtn').css("background", "red");
$('.editMode').toggleClass('hide');
$('.nonEditMode').removeClass('hide');
}
});
});
HTML - Portion
<label for="name">Name</label>
<div class="input-group margin-bottom-10">
<input type="text" class="form-control editField" value="Skipper" readonly />
<div class="input-group-addon">
<span class="glyphicon glyphicon-pencil hide editMode"></span>
<span class="glyphicon glyphicon-ok nonEditMode"></span>
</div>
</div>
<label for="name">Position</label>
<div class="input-group">
<input type="text" class="form-control editField" value="Being Awesome" readonly />
<div class="input-group-addon">
<span class="glyphicon glyphicon-pencil hide editMode"></span>
<span class="glyphicon glyphicon-ok nonEditMode"></span>
</div>
</div>
Demo JSFiddle
Example 3:
This example will use jQuery to target input of the specific area and toggle the readonly effect. Here is the jQuery to do so:
jQuery
$(document).ready(function () {
$('span').click( function() {
if($(this).parents().siblings('input').is('[readonly]')){
$(this).parents().siblings('input').prop('readonly', false); //turns the readonly off
}else{
$(this).parents().siblings('input').prop('readonly', true); //turns the readonly off
}
});
});
Demo JSFiddle
Example 4:
This might be more of what you are looking for. I did not alter any of your HTML, I only added the hide class to your span items. You can see it in the example fiddle below. Here is the jQuery that is included in this:
jQuery
$(document).ready(function () {
$('.glyphicon-ok').toggleClass('hide');
$('span').click(function () {
if ($(this).parents().siblings('input').is('[readonly]')) {
$(this).parents().siblings('input').prop('readonly', false); //turns the readonly off
$(this).toggleClass('hide'); //hide one glyphicon
$(this).siblings('.glyphicon-pencil').toggleClass('hide');
} else {
$(this).toggleClass('hide'); //hide one glyphicon
$(this).siblings('.glyphicon-ok').toggleClass('hide');
$(this).parents().siblings('input').prop('readonly', true); //turns the readonly off
}
});
});
It starts off by toggling one of the glyphicons to not be hidden, then for every mouse click on the span, the readonly is taken off.
Demo JSFiddle

Why don't you pass a parameter to your javascript function, to determine in it, which input to enable? Then you would need the function only once. For example a number with enumerates your inputs, and that is at the end of the name of the inputs.
Something like
<input type="text" class="form-control" id="name1" value="Skipper" readonly>
<div class="input-group-addon">
<span class="glyphicon glyphicon-pencil" onclick=editName('1')></span>
</div>
<input type="text" class="form-control" id="name2" value="Skipper" readonly>
<div class="input-group-addon">
<span class="glyphicon glyphicon-pencil" onclick=editName('2')></span>
</div>
And then
function editName(number) {
document.getElementById('name' + number).readOnly=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