Develop Reference

HTML datalist tag is not working properly

I am trying to make a password generator with HTML, CSS and JS. It allows user to pick their password length from a dropdown input field. However, somehow the datalist tag I have used for it, is not working. It shows the input field but not with the dropdown button. Any help would be nice.
HTML Code
<form action="" class="my-form">
<label for="browser">Password length: </label>
<input list="passList" name="passList" id="passList">
<datalist id="passList">
<option value="8">
<option value="10">
<option value="12">
<option value="14">
<option value="16">
<option value="18">
</datalist>
</form>

OK, I have figured it out, 2 elements cannot have the same id so that is why it is not working.
The input tag and datalist tag have same id so it causes trouble so in order for that to work, I have changed the id of input tag.

Cannot get disabled drop down field values by jQuery serialize method using Angular.js/JavaScript

I need to fetch the selected data from the drop down list which is disabled using jQuery/Angular.js:
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Status :</span>
<select class="form-control" name="status" id="status" ng-model="status" ng-change="removeGSTValue('status');" disabled="disabled" >
<option value="">Select Status</option>
<option value="1">Active</option>
<option value="0">Inavtive</option>
</select>
</div>
One value has already selected and this field is disable one can view it can not change. I have to fetch the pre selected but it's not happening like that using jQuery serialize method. When I am using readonly the drop down value is changing.

You will want to use the readonly attribute and not disabled.
You could do a bunch of workarounds like using a non disabled hidden field to pass a value to jQuery serialize but just use the right HTML attribute and you'll be fine.
Also, you don't need jQuery serialize. Use a prefix to your ng-model like formData.status instead of status. Submit that formData value in your http request or just use JSON.stringify(formData).

Calculate then change form field value onselect

I have a form that has some field values pre-populated from a PHP query. I am trying to change the value of the AMOUNT field by adding $2.00 to the existing value if a selection made in field "os0" contains "XX" anywhere in the selected value. I am having trouble getting the javascript code correct to make this work, i think im using the DOM wrong but not sure. The remote URL is only receiving the value set by the PHP echo on submit, regardless of the option/value selected for field "os0". Any help please.
<form method="post" action="remote-url" name="ppal">
<input type="hidden" name="amount" value="<?=$res[0]?>">
<input type="hidden" name="SKU" value="<?=$res[1]?>">
<select id="os0" name="on0" onChange="setval()">
<option value="Small">Small</option>
<option value="Medium">Medium/option>
<option value="Large">Large</option>
<option value="XL">X-Large</option>
<option value="XXL">XXL</option>
<option value="XXXL">XXXL</option>
<input name="submit" type="submit" value="submit">
</form>
My Javascript:
<script type="text/javascript">
function setval()
{
if (document.forms["ppal"].os0.value.indexOf("XX") > -1) {document.getElementById("amount") = document.getElementById("amount")+2};
}
</script>

There are a couple of problems with the script. First, it is calling document.getElementById("amount"), but there is no element with an ID "amount". You might want to change this:
<input type="hidden" name="amount" value="<?=$res[0]?>">
to this:
<input type="hidden" id="amount" name="amount" value="<?=$res[0]?>">
Second, when the script calls document.getElementById("amount"), it gets a reference to the input element, not the value the user typed into the element. You'll need to use the .value property of the input element to get what the user typed. See http://www.w3schools.com/jsref/prop_text_value.asp for more information about the /value property.
Keep in mind that the value property is a string, not a numeric, so you'll also have to convert using something like parseInt() before doing arithmetic.

Controlling <input> box sizes in a Bootstrap inline form

I have a bootstrap v3 inline form:
<div id="searchsection" hidden>
<form id="searchform" class="form-inline" role="form">
<label>Find:</label>
<select id="field" class="form-control">
<optgroup label="Strings">
<option value="authors" selected="selected">Authors</option>
<option value="title">Title</option>
<option value="pub">Publication Name</option>
<option value="keywords">Keywords</option>
<option value="physloc">Physical Location</option>
<option value="comment">Comment</option>
</optgroup>
<optgroup label="Dates">
<option value="datepub">Publication Date</option>
<option value="dateread">Date Read</option>
</optgroup>
</select>
<input type="text" id="narrowon1" class="form-control"/>
<label for="narrowon2" class="form-control"></label>
<input type="text" id="narrowon2" class="form-control" placeholder="YYYYMM" hidden/>
<input type="button" id="narrower" name="narrower" value="Narrow" class="form-control btn btn-primary"/>
<input type="button" id="widener" name="widener" value="Widen" class="form-control btn btn-primary"/>
</form>
</div> <!-- end of searchsection -->
I would like to reduce the width of the boxes narrowon1 and narrowon2 when the optgroup is Dates so that they would only hold six digits each; I am thinking of setting size="6". However, when I simply add those attributes in jQuery via a statement such as
$('#narrowon1').attr('size',"6");
they don't affect the rendered output. I expect the Bootstrap classes are overriding my additions.
What is a "Bootstrap-friendly" way to alter the sizes of these input boxes?

The maxlength attribute will not be affected by any CSS applied to the <input>. How are you applying it in javascript as you can't limit the character length with CSS?
I think you might be mistaking the maxlength attribute with the actual width of the <input>. Here is a some info on the attribute: Maxlength Attribute
View the log and make sure your <input> looks like this:
<input maxlength="6" name="someInput" />
Edit:
Place a class of your own on the input and place new styles on the <input>. Make sure your local CSS file loads after the bootstrap CSS. Than you can easily override it.
If you can't create a new CSS file, try $('input').css('width', '200px'); with jQuery

You'll need to wrap each input field inside a div with the class of col-sm-2
you can change the number with which ever you like.

You can customise Bootstrap styles by overriding them with your own CSS.
See the Customizing section on the Bootstrap website for information on how it's done:
http://getbootstrap.com/getting-started/#customizing

JavaScript - Form validation loop through specific fields

I'm wondering, what would be a short/good way of performing form validation in JavaScript by looping through all input-text as well as <select>, however, the condition on the select is that out of the 2 selects, ONLY one needs to be selected.
<form id="daform">
<input type="text" value="" name="name" id="name" />
<input type="text" value="" name="last" id="last" />
<select id="choice1" name="choice1">
<option>Bye</option>
<option>Hello</option>
</select>
<select id="choice2" name="choice2">
<option>Bye</option>
<option>Hello</option>
</select>
<input type="submit" />
</form>

Look into,document.getElementsByTagName().

You really should use some javascript toolkit for help with this, but if not this might help:
validateSelectChoices = function(){
return document.getElementById('choice1').selectedIndex || document.getElementById('choice2').selectedIndex;
}
This will check to see if one of the select boxes has the 'hello' value selected (keep in mind that dropdowns will always default to the first option in the list, in your case 'bye'.

Have you tried the jQuery validation plugin?
You can see a demo here.