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.

How to output a link in an input field via a prompt?

I am struggling with this and can't get it to work. I am using jQuery to click on a link that will open me a prompt. In this prompt, I want the user to add a URL to link it to some other websites. That works fine, but I can't get the value of the prompt to be shown properly in the input field.
The error I am getting after adding my text in the prompt is the fact
that it outputs it like [Object object].
I do know how to do this in plain JS, but not in jQuery and I need jQuery.
This is my code:
$(".html-button").on("click", function () {
var urls = prompt("Add a link", "http://");
var setText = $("#post-text").val().append('<a href="'+ urls + '"</a>');
// Adding prompt text into my input field
$("#post-text").val(setText);
});
I thought I could do this by using append instead of innerHTML, which I would use in plain JS... Can someone help please?
PS: preferably I would not want to output the anchor already in my input field, but only after submitting the post, but this is a nice to have.
Edit: Fiddle link

You seem to have mixed up some variables here. You are assigning the value of the prompt response to var urls, but then expecting it to be in an undefined var person (guessing you've used the example for this from the W3 Schools Tutorial (https://www.w3schools.com/jsref/met_win_prompt.asp)).
Assuming that your input element has an id of post-text - then you would do this:
$("#post-text").val(urls);
I am working on the assumption here that you're writing the URL into an input field, as you suggest. If you want those a tags in the input field as well then it would be:
$("#post-text").val('<a href="' + urls + '"</a>');
If your intention is to output it as a link somewhere including the HTML 'a' tags so it can be clicked, then you'd need to append it to an appropriate element (not a input field) in the right place in the DOM/on the page.
Lastly, if you want to write the value into the field after the form as been submitted (for whatever reason) you could either store it in a variable and write it on submit, or perhaps in a hidden field. I am unsure why you would want to do this though.
Hope this helps.

Setting placeholder text jQuery

I have this working code which I'm using to set placeholder values for username and password fields:
<script>document.getElementById("user_login").setAttribute("placeholder","Please enter your Email Address");</script>
and
<script>document.getElementById("user_pass").setAttribute("placeholder","Please enter your Password");</script>
Now I'm trying to apply this to a 3rd box which has the input ID #memb_password_send-1-email-input but this isn't a straight up element, it's an input field and using this ID (as above) obviously doesn't work.
Here is a picture of console:
What would be the correct way to target this field with placeholder text?

Same method used to provide placeholder for username and password fields would work in this case as well as those are input fields as well. Just make sure that when you are writing this code in in-line script, do this after that input box has rendered i.e. after it's markup so that element is available to get selected.

How to hide an HTML input field with javascript

I need to hide a text input field with javascript. Changing its type attribute to hidden does not work in IE (security issue).
What would be the best way to do it?
Note: No jQuery or other lib can be assumed.

I assume you have to show and hide the text field dynamically based on changing conditions in the form, otherwise you'd just make it an <input type="hidden"... to begin with.
Keep your code that shows and hides the field as it is, but also catch the onsubmit event.
In the submit handler, get your text field via document.getElementById(...) (or by accessing document.forms[i]) and check to see whether or not it's hidden.
If it is hidden, create a new DOM node for an <input type="hidden" ...> field and add that node to the form, probably via myform.appendChild(...). You'll have to give it the name your server-side code expects. Copy the contents of the hidden text field into the newly created type=hidden field, then return from your submit handler, allowing the standard submit to continue.
You could also just un-hide the text field on submit, but you'd have to move it "off screen" also or the user would see it reappear during submit processing.

Try wrapping it in a div or span and then setting the display style to none when you want to hide it, and then to block (if you used a div) or inline (if you used a span) when you want to show it.

document.myform.myelement.style.display = 'none'
works as expected even in Internet Explorer.

The only way you can change it is before you append it to the DOM. You can make a new element and then replace the current one with it.
Look at replaceChild and createElement since you want to do manual DOM scripting. I assume you know what to do.
EDIT: "Hidden" fields as far as I know are sent. Have you checked whether they are? And you can also just do position:absolute; left:-9999em; to offset them.

Clean and accesible Other option (Check box and text box)

When I have a set of either check boxes or radio buttons I often need to have an Other choice. This check box or radio button is very often accompanied by a text box where the user is supposed to fill out what this Other is.
How do you usually handle this set up? What kind of markup do you use? What do you require in your validation? Do you use java script for anything? For example:
How do you make the form accessible? Do you use and how do you use the label tag, for example.
Do you connect the check box and text box in any way with some javascript? For example, do you activate the text box when the check box is checked? Do you check or uncheck the check box automatically if the text box is filled out or cleared?
Do you let validation fail with error messages if the check box is checked but the text box is not filled out, or if the text box is filled out but the check box is not checked? Or do you just consider it not filled out and not checked?
Very unsure how to best deal with this issue, so any advice and examples are most welcome c",)

Typically when I have dynamic forms, I insert the input dynamically. That is, in the case of jQuery, I'll use .append('<input...') or some other similar function to actually insert the elements, and id it (or class it, depending), so that it can be easily .remove()-ed if the user decides they want to use another option instead. Validation is either handled via an onClick on an input button. If I'm feeling feisty, I'll go the AJAX route, and skip the <form> altogether.
I would definitely let the validation fail. They want "Other", and you want to know what "Other" is. If you don't care what Other is, then don't bother with the input box.
Edit: Might look something like this.
$('input[type="radio"]').click( function() {
if($(this).next().attr('name') != 'other' && $(this).attr('name') == 'other_input') {
$(this).after('<textarea name="other"></textarea>');
} else {
$('textarea[name="other"]').remove();
}
}
The click will react to any radio being clicked, and the if will make sure that it's only the "other" radio button that will react to the click, and that it will only react if there isn't already a textarea after it (so you don't get multiple textarea propogations).
On the processing side of things, you'll have to do a validation at first to see if other was checked, and to grab the input of the textarea if it was. You should probably use server-side validation for that.
Hope that gets you started.

I usually enclose my radio buttons in a label like this:
<label><input type=radio value=xyz name=stjames>Saint James</label>
this way the user can click on the text to trigger the button.
When deciding how to behave, I usually say to myself "what do you think the user expected when they did that..." and that often gives me the answer. So, upon click or Focus of the text box, turn on the radio that goes with it. This won't work if you've disabled the text box!
( ) US ( ) UK (*) Other [________________]
If the Other choice is a dangerous one (deleting data), though, I'd disable the text box until the user explicitly clicks Other. Then, the Radio drives the Text Box instead of the other way around. You want the user to have to go through another step in this case. It depends on the situation - think about what'll happen in each case.
I usually try to make it impossible or annoying for the user to do something 'wrong'. EG disable the OK button if something is inconsistent. Or, select the Other radio when the user types in text. If there's text in the text box but the radio buttons are set to something different, I'd usually just ignore the text. But if it's a serious/dangerous situation, you want to make sure the user's made up their mind; if you delete the text when the user chooses a different radio, that might piss them off but it might be appropriate if they should be careful.