We Keep Coding

name attribute self references id

In short, is there some self reference code to set the name attribute equal to the id?
for example,
<input name="this.id" id="input1">
In long, using .serialize() requires use of the name attribute. Hypothetically, there is a form that contains many inputs without name attributes. I'm aware of,
how I could (read, "should") add name attributes that match the id's to each input,
creating a separate function to serialize the form using id attribute,
similar solution like in this question,
the steps taken to submit a form.
However, in some research on SO, I was led to believe that if a person were to use,
<input name="id[]" id="input1">
when serialized, the name would have the id appended to it. In my tests this method produces id%5B%5D (url encoded string of id[]). Using anything available, is there a short hand way to set the name attribute so that it references the id attribute on each input?

There is nothing in HTML that will do the reference so you will need to set it manually. The best solution, set it when you build the form. Or set it when you reference the elements
console.log($("input").attr("name", function (){ return this.name || this.id }).serialize())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="foo1" value="1" />
<input id="foo2" value="2" />
<input id="foo3" value="3" />
<input id="foo4" value="4" />
or just write your own method
$.fn.serializeId = function() {
return $(this).map(function(){
return this.id + "=" + encodeURIComponent($(this).val())
}).get().join("&");
}
console.log($("input").serializeId())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="foo1" value="1" />
<input id="foo2" value="2" />
<input id="foo3" value="3" />
<input id="foo4" value="4" />

How to write the expression to disable an input text after entered a particular string

Now I have something like this:
<input type="text" ng-model="cell.location">
What I want is while you put 'ABC' in this field, this field will become disabled status, I know I can put a boolean param to control it via its controller.
However what I expect is something like this:
<input type="text" ng-disabled="{{cell.location = 'ABC'}}" ng-model="cell.location">
Which is clearer and simpler, unfortunately this approach doesn't work as expected, it will assign 'ABC' to this field rather than disable it. is that possible to implement in this kind of way?
Thanks.

Use this with ==:
<input type="text" ng-disabled="cell.location == 'ABC'" ng-model="cell.location" />
Instead of:
<input type="text" ng-disabled="{{cell.location = 'ABC'}}" ng-model="cell.location">
Angular doc

Use this without {{}}:
<input type="text" ng-disabled="cell.location == 'ABC'" ng-model="cell.location" />
Instead of:
<input type="text" ng-disabled="{{cell.location = 'ABC'}}" ng-model="cell.location">

how to get text associated in a html input tag of type checkbox

I have my element like below
<input type="checkbox" id="Countries" value="Ind">India</input>
How to get output as "India"?
Below returns only Ind
document.getElementById("Countries").value;

There is a way to get the value when you don't care about semantically correctness.
alert(document.getElementById('Countries').nextSibling.nodeValue);
<input type="checkbox" id="Countries" value="Ind">India</input>
For completeness:
You shoult do an input type like this as mentioned in the Form W3
<label for="Countrie">India</label>
<input type="checkbox" id="Countrie" />
or
<input type="checkbox" id="Countrie" />
<label for="Countrie">India</label>
or
<label>
<input type="checkbox" name="Countrie" />
India
</label>
also mentioned in THIS POST
and then use javaScript to get a coresponding label value.

I don't think that you can because that isn't valid HTML code.
An input tag is empty, meaning that it can only contain attributes. Therefore, there is no </input> to close it.
There are ways to store data in it though.
As of HTML 5, there is a data- attribute that you can put on any element. You could do something like this:
<input type="checkbox" id="Countries" value="Ind" data-something="India" />
// Inside JS
document.querySelector("#Countries").dataset.something
Another alternative would be to wrap a p or a span around the text after it.
<input type="checkbox" id="Countries" value="Ind" />
<p id="CountriesText">You can get this value easily enough</p>

This is not possible because your html is wrong.
input is a self closing tag, so it should be like this.
<input type="checkbox" id="Countries" value="Ind" />
So there is no other value you could extract with javascript then the value.
Or you should use a data-attribute with India as a value.
HTML
<input type="checkbox" data-country="India" id="Countries" value="Ind" />
JS
var checkbox = document.querySelector('#Countries'); // or document.getElementById("Countries");
alert(checkbox.dataset.country);
See this fiddle http://jsfiddle.net/zwx43m59/

<input value={{:abc}} /> does not seem to work properly in jsviews if the value of 'abc' has whitespace

I'm using jsviews to render the following template
recoList = [{title:"Apple"},{title:"Two Apples"}];
<script id="sampleTmpl" type="text/x-jsrender">
{{for recoList}}
<input type="text" value={{:title}} />
{{/for}}
</script>
Whenever the value of title has a whitespace in it, like "Two Apples", then input box is rendered as
<input type="text" value="Two" />
The word after the whitespace is simply spliced off!
How can i give the full string to the value?

Adding a data-link instead of value={{:title}} solves the problem for now.
Like so :
<input type="text" data-link="title" />
However, i still don't know why value={{:title}} splices the string after whitespace.

The reason is simple. You are missing the quotes:
<input type="text" value={{:title}} />
should be:
<input type="text" value="{{:title}}" />
JsRender simply replaces the tag by the value, so:
<input type="text" value=Two Apples />
should be:
<input type="text" value="Two Apples" />
You says quotes don't work, but the above should certainly work. Using data-link="title" will add the quotes, but also adds data binding, so you get two-way binding to the title field...

When using array to name input fields in HTML -- how to count array length?

Let's say I have some html that looks like this:
<input type="text" name="myInputs[]">
<br>
<input type="text" name="myInputs[]">
<br>
<input type="text" name="myInputs[]">
<br>
I want to use the length of the myInputs array inside some JavaScript code. How do I extract the length of this array? myInputs.length doesn't seem to work

console.log(document.formName.elements["myInputs[]"].length);

document.querySelectorAll("[name='myInputs[]']").length
You can also call querySelectorAll on the form element itself