Develop Reference

How do I create a textbox with prefilled text that can be edited?

----SOLVED----
I'm creating a textbox in Angular/Ionic that has prefilled text from the previous page.
I have a Notes page that comes right before the current page, and asks the user to document any notes they'd like.
On the current page, I want there to be a notes box with the notes that the user last entered. From here, the user should be able to edit these notes if necessary. I've created two separate notes pages because this last page acts as a summary page before the user submits the data to the server.
I've already tried using the placeholder option, where I set the placeholder to the notes the user enters on the first screen, but all of that data disappears as soon as the user touches the box again. I want the text to still be there and editable.
I also tried putting the notes inside of , but that is not editable.
<div class="notesBox">
<ion-textarea id="prefill" [(ngModel)]="notes" (ionChange)="updateNotes()"></ion-textarea>
</div>
this.prefilledNotes = this.dataService.getNotes();
(<HTMLInputElement>document.getElementById("prefill")).placeholder = this.prefilledNotes;

Try:
(<HTMLInputElement>document.getElementById("prefill")).value = this.prefilledNotes;

You can create a service which has a variable for notes and instead of manipulating data using document.getElementById you can directly get and set that variable wherever you need

The solution is to use [(ngModel)].
<div class="notesBox">
<ion-textarea id="prefill" [(ngModel)]="prefilledNotes" (ionChange)="updateNotes()"></ion-textarea>
</div>
this.prefilledNotes = this.dataService.getNotes();
By first setting the ngModel property value to whatever the user already entered, it populates the textbox with that value. It also is editable.

Jquery script - Issues with script not filling text input from select list

Almost got my script running but I hit a roadblock. What I am currently trying to accomplish is filling a select list based on text input and vice versa. In my web application I have a text input which is read only and is usually dynamically populated and then transferred over to a multi select list where end users can only modify the text input from the multi select list.
Here is what I had so far: http://jsfiddle.net/akhyp/1983/
$("#hidden_input").val(function(e){
var ar = $(this).val().split(",");
$("#selected_items option").each(function(){
if(ar.indexOf($(this).val()) != -1)
$(this).attr("selected","selected");
});
});
$('#selected_items').change(function(){
$('#hidden_input').val($('#selected_items').val());
});
Now im still learning jquery but looked at the jquery API documents on events and .val seem to be the best fit for capturing my text input. However got some unexpected results where jquery removes the values that were dynamically added however it does end up properly selecting the appropriate option from my multi select list.
Im thinking the problem is maybe with my .change event of the select list where its not returning the data back to input. What I need at the moment is something like so:
-If the text input is null then ignore.
-If the text input is already filled then capture value and transfer it to the select list accordingly.
-If user select new options from the multi select list then capture new selected options and transfer them over to the text input.
I know its probably something I may have overlooked but I would appreciate any support on this.

Copying value of multiple html Selects and a form to text area to submit to PHP script using Javascript

I have multiple <select>s and one form I need to submit with one button. I'm trying to use a text area as a summary, which I will then submit to a script.
To move the form element I have this and it works fine:
document.getElementById('add').addEventListener("keyup", function() {
document.getElementById('ordsumry').value = this.value;
});
I thought I could copy the script and replace the first ElementId to add other values to the text area but it doesn't seem to add the values from the selects.
If anyone does know how to submit them all with out a text area that would be great but bear in mind I have zero knowledge of AJAX.

ASP.NET Validate textbox during input

On my page I have a textbox and I connected three validationcontrols to it.
Two comparevalidators for minimum and maximum values and one requiredvalidator.
If the user changes the contents of the textbox, the validation is not done until the user clicks somewhere else in the form. Either on another control or some space of the page.
I would like to validate while he is changing the contents with javascript as I don't want a postback on each character he types.
How can I can I call the requiredvalidators IsValid function from within the OnTextChanged event?
<asp:TextBox ID="txtMoveSparesAmountToMove" runat="server" CssClass="txtMoveSparesAmountToMove" OnClick="this.style.backgroundColor='white'" OnTextChanged="**HERE THE VALIDATE CALL**"></asp:TextBox>
By validating during input I want to remove the validators text the moment the contents is valid.
In this textbox the user has to input a number. I he did so and then clears the box, the validation appears when the focus leaves the box. The validation does not go away the moment he puts in a number again until the focus leaves the box.
I got comments on that from the users, they don't want to see the red validation text as soon as they correct it.

how to set different font-weights for characters in the same input box

I need to create an input box with an automplete functionality. So when a user enters "ja" , these first two characters will be in bold and "vascript" will be in grey.
For some reasons, I can't use the jquery autocomplete function. As the words that the user can enter are not that many, I created an array and assigned for each abbreviation , the word that matches .
words= [{abbv:"J", word="JAVA"}, {abbv:"JA", word:"JAVASCRIPT"}]
Then, when the user starts entering the word, I look in the array for the word that matches with the "abbreviation", and display that word inside the box .
This works fine, the problem now is that I'm trying to highlight the first characters entered by the user and keep the rest of the word in grey.
What I'm trying to do looks like this http://jsfiddle.net/wyVJW/894/ , except that I would like the word to be displayed inside the input box itself and not in a scroll down menu.
How can I set a font weight only on the the characters entered and not on the whole input box?

Input boxes do not support multiple styling. You need to overlay a DIV and use HTML within that DIV to "simulate" what you want to achieve visually and use CSS to make it still look as if it were an input box.
You will need to write some JavaScript to make this work.