We Keep Coding

HTML populate select menu from input without submitting data?

I have created an input form in HTML with a combination of input and select boxes. I would like to populate a select menu on the fly with data from the input boxes - for example:
Employee One: Jim
Employee Two: John
Employee Three: Bob
This would then populate a select menu with the Jim, John and Bob as options.
I am trying to avoid having to submit the input data first as I would really like to have all the input on one page. I submit all the data to a MySQL database, so worst case I could submit it in sections and read it back, but would appreciate any suggestions for doing it on the fly.
Thanks for any help.
Blair

Maybe something like this?
HTML:
<input id="employee_name" type="text" placeholder="Type here the Employee name"/>
<input id="add_employee" type="button" value="add"/>
<select id="employee_list">
</select>
Jquery:
$('#add_employee').click(addEmployee);
function addEmployee(){
var employee_name = $('#employee_name').val();
$('#employee_list').append('<option value='+employee_name+'>'+employee_name+'</option>');
}

ng-pattern to dissallow email, url and telephone numbers

Hi I want to validate a textangular box which will have a lot of text, but I don't want to allow telephone numbers, email ids or any URLs in this text box. I want to show the error message as the email/telephone/url if mentioned in the text box as well and say that is not allowed.
Using ng-Pattern, please tell me what regex to use to allow this.
<div class="form-group">
<div class="col-sm-6 col-md-8">
<label for="inputjobDescription" class="control-label lightfont">Description</label>
<div text-angular ng-model="job.Description" name="description" ng-pattern="/^((([a-z0-9_\.-]+)#([\da-z\.-]+)\.([a-z\.]{2,6}))\n?)*$/" ng-minlength="100" ta-min-text="100" required>
</div>
<p ng-show="jobform.description.$invalid && !jobform.description.$pristine && !jobform.description.$error.pattern" class="help-block">Can you be a bit more elaborate(atleast 100 characters) , please?<br> Don't write your emailID, telephone number or any URL.</p>
</div>
</div>
My current ng-pattern is as follows
ng-pattern="/^((([a-z0-9_\.-]+)#([\da-z\.-]+)\.([a-z\.]{2,6}))\n?)*$/"

This doesn't look like a good spot for a regex. A regex would probably be too complicated here.
I would suggest to use a custom validator here and try it the other way around:
Compare the given text with 3 different regexes:
Is there any phonenumber in it ?
Is there any email in it ?
Is there any hyperlink in it ?
Only if ALL these three (better manageable) expressions FAIL you are ok and return that the expression is valid.
In this case you can use three standard regexes from a casual google search instead of inventing some mindblowing super-regex if you know what i mean.

Auto suggest when write a character in input field using JavaScript

I have an input field. When I click on this input field and write something then it will show all the suggested words that I want.
Like: If I write 'c' then it will show suggested words that i declared 'C#','Code','C++'
HTML:
<input type="text" class="input_field" />
How can I do it using JavaScript? Thank you.

Please refer for the auto complete http://jqueryui.com/autocomplete/

You may try following. It is my favourite at least.
Twitter Typeahead JS

jQuery select all checkboxes of specific type

I would like to have a script that automaticaly selects all checkboxes of specific type.
First type is language so i want with one checked checkbox to select all checkboxes that belongs to the same language group (i.g. English).
I managed to get that far, and created simple jquery script that does the job.
I placed language field from database to a class attribute so i can check all checkboxes that has i. e. English class or German.
$("#engSelect").change(function(){
var status = $(this).is(":checked") ? true : false;
$(".English").prop("checked",status);
});
Working fiddle: http://jsfiddle.net/3xGTr/
Beside language field i also got size field in db, so something can be i.g.:
English Medium, English Small, German Medium or German Small
Therefore beside "select all English" i would like to have "select all small" which at the end could result selecting only those that are English and Small or German and Medium.
Dont know how do it, since im using class already for language, where i can store size field from database.
Thank you for help in advance:)

<input class="English small" type="checkbox"> English<br />
<input class="English big" type="checkbox"> English<br />
<input class="German medium" type="checkbox"> German<br />
$("#engSelect").change(function(){
var status = $(this).is(":checked") ? true : false;
$(".English.small").prop("checked",status); // here small is a class in addition to English
});
be sure to type the class selector continuously... without any space in them... that denotes that they belong to the same element

How do I make a drop down list selection update an image on a web page?

On the site http://www.gofundme.com/sign-up/ they have the cool ability to select your currency underneath where you enter an amount. When you change the currency it changes the symbol beside the amount you type in.
I'd like to do something similar with my website but don't have much of a clue about how to even go about it. Can anyone point me in the right direction?
Go easy on me guys; I've done a bit of website making before but never anything too spectacular.

The code on that site is all client-side, and is fairly simple.
You click the link, it invokes Javascript that shows the selection popup div.
When you select an item on the selection popup div, it also calls Javascript. That javascript modifies:
The original div's label text for the amount field (i.e. the big €)
The text below that describes your currently selected currency type (the one that pops up the div)
The data in the hidden form field, with the selected currency type
...and closes the popup div.
Edit: Apparently you also need the jQuery library in order to use the code in my answer :) You could substitute your own Javascript code, and get identical results, but it wouldn't look exactly like the code below.
Here is the code, ripped straight off "view source":
The amount box:
<div class="amt_box bg_white">
<label class="currency-display">$</label>
<input type="text" name="Funds[goalamount]" value="" class="big-field"
tabindex="1" />
</div>
The link that opens the popup div:
<h4>Display: US Dollars</h4>
The popup div:
<div class="currency currency-select-div" style="position:absolute; display:none;margin-left:45px;">
<ul>
<li>$ USD Dollar</li>
<li>$ CAD Dollar</li>
<li>$ AUD Dollar</li>
<li>£ GBP Pound</li>
<li>€ EUR Euro</li>
</ul>
</div>
The hidden form field:
<input type="hidden" id="currencyfield" value="USD" name="Organizations[currencycode]" />
The Javascript (jQuery) code that binds it all together:
$('.currency-select').click(function() {
$('.currency-select-div').show();
return false;
});
$('.currency-item').click(function() {
$('.currency-select-div').hide();
$('.currency-display').text($(this).attr('title'));
$('.currency-select').text($(this).text());
$('#currencyfield').val($(this).attr('code'));

You're going to want to uniquely identify the text that you're trying to change with your drop-down list first.
<span id="currencySymbol">$</span>
Then you're going to want to create a drop-down list that has the values you want.
<select id="currencySelect">
<option value="$">Dollars</option>
<option value="£">Pounds</option>
<option value="€">Euros</option>
</select>
Then you need to use JavaScript to change the value of the text based on the value of the drop-down.
document.getElementById('currencySelect').onchange = function(){
document.getElementById('currencySymbol').innerHTML = this.value;
}