Develop Reference

How to Replace All __prefix__ Placeholder Strings within Django Formsets empty_form Elements Using Only Javascript?

Django formsets have an empty_form attribute.
empty_form
BaseFormSet provides an additional attribute empty_form
which returns a form instance with a prefix of __prefix__ for easier
use in dynamic forms with JavaScript.
The Django documentation doesn't actually say how to replace the __prefix__ with Javascript. Several online examples show how to do it with jQuery, but I specifically want to do it with Javascript - no jQuery.
Here is the resulting HTML from my {{ formset.empty_form }}:
<div id="prerequisiteEmptyForm">
<input type="text" name="prerequisites-__prefix__-text" maxlength="100" id="id-prerequisites-__prefix__-text">
<label for="id-prerequisites-__prefix__-DELETE">Delete:</label>
<input type="checkbox" name="prerequisites-__prefix__-DELETE" id="id-prerequisites-__prefix__-DELETE">
<input type="hidden" name="prerequisites-__prefix__-id" id="id-prerequisites-__prefix__-id">
<input type="hidden" name="prerequisites-__prefix__-content" value="21" id="id-prerequisites-__prefix__-content">
</div>
Everywhere it shows __prefix__, I want to replace it with a number... let's say 321.
Correct solution:
<div id="prerequisiteEmptyForm">
<input type="text" name="prerequisites-321-text" maxlength="100" id="id-prerequisites-321-text">
<label for="id-prerequisites-321-DELETE">Delete:</label>
<input type="checkbox" name="prerequisites-321-DELETE" id="id-prerequisites-321-DELETE">
<input type="hidden" name="prerequisites-321-id" id="id-prerequisites-321-id">
<input type="hidden" name="prerequisites-321-content" value="21" id="id-prerequisites-321-content">
</div>
So my question becomes
Using Javascript only, how do I replace a constant value ("__prefix__") with something else ("321") across several elements (inputs and labels) within multiple attributes (name, id)? Specifically, I want to do it cleanly for repeatability. I don't want a highly custom solution to this specific problem. It needs to be a general approach... since this is replacing a constant, surely Javascript has a clean way to do this? I'm still learning Javascript and trying to not be so dependent on jQuery.

I used this concept:
const emptyForm = document.querySelector('#prerequisiteEmptyForm');
clone = emptyForm.cloneNode(deep=true);
clone.innerHTML = clone.innerHTML.replace(/__prefix__/g, '321');

String sent from controller gets separated when being processed to HTML

I am trying to send validation rules as string from the controller to input element. The string is sent correctly but it is not rendered correctly (you can see on the snippet below that it separates "Field is required" to "Field" is="" required="").
This is what I get after HTML is rendered:
<input type="text" class="form-control valid" id="Code" name="Code"
value="INDiamnana"
data-rule-required="true"
data-msg-required="Field" is="" required=""
aria-required="true">
In the controller I build the string in a way similiar to this:
stringBuilder.Append("data-rule-required=true");
stringBuilder.AppendLine();
stringBuilder.Append("data-msg-required=Field is required" );
And I specify in my razor:
<input type="text" class="form-control valid"
id="..." name="..."
value="..."
#Model.ValidationRules />
#Model.ValidationRules is a string of the format
"data-rule-required=true data-msg-required=Field is required"
Does anyone know how to explicitly say that I want my string non-separable?
Or maybe I am doing it all wrong and I should send the string in different way ?

The problem is because the HTML attribute value has spaces, which is invalid. The first word, Field, is interpreted as the value, whereas is and required are interpreted as other attributes. Hence ="" is added after them by the browser.
To solve this you need to wrap the attribute values in double quotes:
stringBuilder.Append("data-rule-required=\"true\"");
stringBuilder.Append("data-msg-required=\"Field is required\"");
Also note that your use of AppendLine() in the stringBuilder is redundant. HTML doesn't care about whitespace. All it does is make your code more verbose.

Angular JS - Instead of sum values are getting concatenated

I'm new to AngularJS, just created a simple form in order to understand. I tried multiplying 2 input values, I'm good here, but when I use same code to sum those 2 input values it is getting concatenated instead of sum.
My code:
<div ng-app ng-init="fval = 1;sval = 2">
<div>
First Value:
</div>
<div>
<input type="text" ng-model="fval" />
</div>
<br />
<div>
Second Value:
</div>
<div>
<input type="text" ng-model="sval" />
</div>
<br />
<div>
<label id="lblResult">{{fval * sval}}</label>
</div>
Here I have given hardcoded values for my inputs, initially we will get result as 6. Also when we change the inputs we will get correct result for multiplying 2 values.
I changed my code for addtion as below:
<label id="lblResult">{{fval + sval}}</label>
After running the application I got the correct value as 3, but when I change my input values I'm getting concatenated values.
Like if I change my text box values, for firstTextBox = 12 & secondTextBox = 3, then I'm getting result value as '123'.
Hence, I'm landing with correct value when I run the application first time, but changing inputs on client side is concatenating.
Sorry for my English, since it is not my first language. Can anyone please help me where I'm going wrong.

Try Changing
<input type="text" ng-model="fval" />
To
<input type="number" ng-model="fval" />

That happens because the type of the ng-model is declared as text.
<input type="text" ng-model="fval" />
<input type="text" ng-model="sval" />
So when you add them using {{fval + sval}} you get a string since the sum of two string is the result of concationation of these two strings.
In order for them to work as expected you should replace them like below:
<input type="number" ng-model="fval" />
<input type="number" ng-model="sval" />
Hope this saves your time.

This is just a JavaScript thing. Your numbers are strings, and + is the concatenation operator. One way to solve this:
parseInt(fval) + parseInt(sval)
Edit: This is not allowed within Angular expressions (see below). Answer is valid for use in 'normal' JS code though.

Input value not passing to URL

I have a total of two input values. Only one value passes to the url of the next page, but both should. What's causing this?
JSFiddle: http://jsfiddle.net/p8dCC/
HTML:
<!--form action="device" onSubmit=" get_search(); return false;" id="search-form-4" method="get" target="_top"-->
<div class="fix">Brand</div>
<input class="inputs" type="text" id="search_id" name="q3" placeholder="Send this" required="required" />
<br/><br/>
<div class="fix">Model</div>
<input class="inputs" type="text" id="search_id" name="q4" placeholder="And send this one too" required="required" />
<br/><br/>
<input id="search-button" class="" type="submit" value="continue" data-target="http://www.google.com/?item-description" />
<!--/form-->

You have two elements with the same id in html. So when you do this $('#search_id').val() only one of them will get evaluated and not both. Ids are supposed to be unique

After testing your code in a test page, I found that both inputs were in fact being passed through the URL.
You have commented out the form tags which I'm not sure if you did just for purposes on here.
kjs is correct as well, though using the same id would only effect the HTML. Using get as the method would bypass this issue as it would be passed the unique "name" attribute.

A form tag is required if you expect the html submission mechanism to work correctly on its own.
In the Javascript you posted though, you are treating document.location as an html element, wrapping it with jquery, then trying to use jquery's attr method on it. This won't work. Just access "location.href" directly without using jquery.
Additionally, as pointed out by another answer, your ids should all be unique.

Angular only putting attribute of ng-minlength if parsed value is not nil

I want to only set my attribute of ng-minlength when the value I parse from data.Validation['minlength'] is not nil.
First I attempted using ng-switch; I had no problem doing this when handling ng-show=true/false. However I was unable to get it working when it was beyond just the value but also the whole declaration of ng-minlength="...". Second attempt was using ng-if but again I was unable to get it working in the "middle" of the input.
Below is some code that works - I want the whole ng-minlength="data.Validation['minlength']" to only be set if the value is not nil.
<input type="text" name="foo" ng-model="item.foo"
ng-minlength="data.Validation['minlength']" required/>

I discovered a simpler approach in another question of mine.
Solution by Karaxuna here.
<input type="text" name="foo" ng-minlength="myvar || 0" required/>

You can try ng-switch-on
<span ng-switch on="data.Validation>
<input ng-switch-when="null" type="text" name="foo" ng-model="item.foo" ng-minlength="data.Validation['minlength']" required/>
<input ng-switch-default type="text" name="foo" ng-model="item.foo" required/>
</span>
It will create input depending on data.Validation values
However I am not sure if it will work with NULL values. It is still a good way forward.