We Keep Coding

jQuery: Make a text input box selected

You know how when you open a new tab, you can start typing without having to select the search bar? I've got a text input box in HTML, and I'd like to be able to open my webpage and have that text input box immediately typeable, for lack of a better term. Say my input box looks like this:
<input type="text" class="myInput" value="add an item"></input>
I'm using HTML, CSS and JavaScript/jQuery right now. What code can I add to make sure the text input box is immediately typeable?

Use autofocus:
<input type="text" class="myInput" value="add an item" autofocus/>
From the input documentation on MDN:
This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it (e.g. by typing in a different control). Only one form element in a document can have the autofocus attribute, which is a Boolean. It cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control). Note that the focusing of the control may occur before the firing of the DOMContentLoaded event.

<input type="text" class="myInput" value="add an item" autofocus>
https://www.w3schools.com/TAgs/att_input_autofocus.asp

in html use autofocus, in jquery use $('.myInput').focus()

HTML data parsing from DIV container

As I am pretty new to Web Development this might be an easy question.
In my HTML file I use the form method GET to parse data with the URL (it must be done this way, cannot be changed).
In this html there is a Text Field.
<div class="form-group {*if $ERROR_BEMERKUNG*has-error*/if*}">
<label for="text-comment">Bemerkung</label>
<textarea name="text-comment" id="text-comment" class="form-control" rows="3" placeholder="{$TRANSLATE.USERDATA.BEMERKUNG|default:'USERDATA.BEMERKUNG'}">{$COMMENT}</textarea>
</div>
How can I get the inside of this textfield, whatever is written in it afterwards, into my GET method? Hardcoded it works that way, but I don't know how I can get the value out of the div.
<input type="hidden" id="bemerkungen" name="bemerkungen" value= "TEST" />
EDIT: I didn't have to do anything for the textarea, it got parsed correctly.
But I have another div with a number field.
<div class="width115 left form-group has-feedback">
<span id="personen"> Anzahl Personen </span>
<input class="btn-input-wrapper" id="personen" type="number" min="1" value="1"/>
</div>
The value out of there is never parsed.

If by textfield you mean textarea, here's your answer:
All details you have in w3schools:
https://www.w3schools.com/tags/att_textarea_form.asp
Example:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_textarea_form
When you send example, it will show you generated GET link with textarea value.
You missing form="usrform" part tho, but it should work if you keep everything between <form> tags.

Getting input value with javascript when it's not part of the form?

I am dealing with two versions of a page. The first one has a search input field as part of a form, and I can get that value no problem with
document.getElementsByClassName('search-input')[0].value
i.e. this will update as it's being typed. On the other version of the page (which I have no control over) the input field is not part of a form, and now the above code doesn't work (the class of the input field is still "search input").
Here is the html where it's working fine:
<form action="search-landing.aspx" method="GET">
<input class="search-input" autofocus="autofocus" placeholder="City, State or Zip" name="location" required="">
<button id="searchButton" tabindex="0" class="search-btn" type="submit">Search</button>
</form>
And here is the code where it's not
<div class="search-box">
<input type="text" class="search-input" placeholder="City, State or Zip">
</div>
Does anyone know why I'm having this issue? Is there a way around it (i.e. to grab a value from an input field that is NOT part of a form)?
Thanks

Rooster correctly pointed out that I may have more than 1 input field of class "search-input". There were two identical fields, one hidden so document.getElementsByClassName('search-input')[1].value was the answer in this case

HTML/JS Show a text next to a input box

I want to put a text next to an input box, after an successful if clause.
Just need to know how to show up such text.
Thanks
<input type="text" class="form-control" id="username" placeholder="Username" name="username" required autofocus/>
And my code snippet:
$("#username").append("<p>This username is not available</p>");

If your using jQuery, you can simply use:
$("#your-element-id").append("<strong>whatever text you need to add</strong>");
You will need to make sure that #your-element-id contains the input box. You may need to add the relavant CSS as well.

How to remove the values with jquery on deleting characters in textbox

I have this code
<input type="hidden" value="[{"value":1,"label":"Emmoia Boently"},{"value":6,"label":"John Smith"}]" name="group[users][]" id="users">
<input type="text" value="Emmoia--Boently, John--Smith, " name="autocompleter_group[users][]" id="autocompleter_userss" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
Now my problem is the current javascript is adding the values from textbox to the hidden feilds.
But when i delete the text then it don't deletes from the hidden input fields.
So i want to do in jquery that when i start deleting the text in main textbox then the value gets deleted in the hidden input field as well.
just like we do in SO when we delete the tag characters in ask question page

$("#autocompleter_userss").on("keyup", function() {
$("#users").val($(this).val());
});
Fiddle

UPDATE: Seems like you're looking for a tag editor. See this post for exhaustive links :)
$('input#1').change(function(){
$('input#hidden').val($(this).val());
});
Additionally, you could try some data-binidng libaries like knockout.js among others.