We Keep Coding

Automatically fill out textarea field from my database when selecting dropdown menu item

How can I automatically fill a textarea field with the text from the database and automatically display the associated text when selecting an item from the dropdown menu.
Textarea field were I want to post the data in:
<textarea
class="dropDown" Name="dropdownItem" Type="Text" id="dropdownItem" placeholder="New Option"
></textarea>
Thats only a quick try that prints out the same input as the dropdownItem from my database.
<script>
var select = document.getElementById('select');
var input = document.getElementById('TextAreaTemplate');
select.onchange = function(){
input.value = select.value;
}
</script>
I already connect to the database, but I just don't know how to do this.
Do I need more JavaScript?

What you are doing here is only putting the value from your input to your textarea.
You need to make a query to your database with the value you get from your input.
I guess your connection is made via PHP (since you put the PHP tag), so I would recommend you to use AJAX request to create your query with the value from your input.
Then, your response should contain the associated text to display in the textarea.
I found this resource which show the basis of AJAX and PHP if you need, but you probably can find better.

Single jQuery Image Selector for Multiple Fields

I'm trying to figure out the approach to this problem, if someone can't provide a direct solution, I would benefit from a conceptual approach so I can try to solve it myself.
I have a page with text form fields, each field having a corresponding IconId. On the page will be list of small image icons (PNG). Goal is when a user clicks on one of the text boxes, it will activate the 100 icons, user can select 1 icon which will add the IconId to the corresponding hidden field. When a user clicks on a field that already has a IconId assigned or in the hidden field, they can choose a different icon and that swaps out the IconId. Page will be submitted as a standard form post via PHP and page framework will be Bootstrap 3 w/ jQuery 1.11.
Here is a Fiddle demonstrating the use case: http://jsfiddle.net/pitashi/xpvt214o/182828/

Here is a simple example of using a data attribute,..
I've not actually used icons here, or a hidden field for demo purposes, but it should be easy for you to alter for your needs.
var lastFocus = null;
$(document.body).on("focus", "input", function () {
lastFocus = this;
});
$(document.body).on("click", "[data-icon-id]", function () {
$(lastFocus).val(this.dataset.iconId).focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click each LI, and you will get the id inside the last focused input field.</p>
<input /><br>
<input /><br>
<input /><br>
<ul>
<li data-icon-id="1">Icon 1</li>
<li data-icon-id="2">Another icon (2)</li>
<li data-icon-id="3">It's three</li>
</ul>

You could add an unique id to each input field (e.g. iterating them input-1, input-2 etc.). Then, you could store the id of the currently selected input field into a variable of your script.
When clicking an icon, you select the input field by that saved variable/id and update its corresponding icon-id hidden field.

Populating two separate input fields with unique text values passed in by multiple buttons using javascript

Working on a small personal project with jQuery and JavaScript. This is a one page app on a static website.
The game (if you can call it that) asks the user to select 2 characters from the selection area and pressing enter transfers the input to the "battle-area" where when you hit the "fight" button random numbers are subtracted form the characters hitpoints as attack dmg.
I am stuck on the selection part. I need two separate input fields populated with unique names. I am able to write text into the field and transfer it but I want the input fields to be populated by clicking on the individual pictures on the screen. My code seems to populate both fields at once. I can hardcode two buttons to each populate one input field, the problem is that I have about 15 image buttons and I need to be able to click either of those to populate the fields.
function selectFighter(name) {
var x = name;
var input = $('#fighter1_name').val();
$('#fighter1_name').val(x);
if ($('#fighter1_name').val() != "") {
$('#fighter2_name').val(x);
}
}
I have tried to add a condition that checks the first input field for a value and if it is NOT empty, to instead write the input into the second field. But that is causing one button click to populate both fields. I need one button click to populate one field, and then when I click another button to populate the other, empty field.
I am passing in a name with an onclick event: onclick="selectFighter('bob');"
Problem is when I click the image, both fields are populated with the same name. I want to be able to click an image to populate one input field, and then click a different image and put that name in the input field.

This should do the trick. We're checking if the first field has a value - if so, we populate the second one - otherwise the first one.
function selectFighter(name) {
if ($('#fighter1_name').val()) {
$('#fighter2_name').val(name);
} else {
$('#fighter1_name').val(name);
}
}

Add a class to the elements you click, and an ID, and remove all inline javascript.
Then add a script tag with the event handler targeting the elements
$('.toBeClicked').on('click', function() {
var x = $(this).data('name'); // note that "name" is not a good name for a variable
var f1 = $('#fighter1_name');
var f2 = $('#fighter2_name');
f1.val() === "" ? f1.val(x) : f2.val(x);
});
$('#clear').on('click', function() { $('input[id^=fighter]').val("") })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toBeClicked" data-name="bob">Bob</button>
<button class="toBeClicked" data-name="jon">Jon</button>
<button class="toBeClicked" data-name="ann">Ann</button>
<br><br>
Fighter 1 <input id="fighter1_name"><br>
Fighter 2 <input id="fighter2_name">
<br><br>
<button id="clear">Clear</button>

Telerik RadListView - how to access template controls

I am using RadListView control with some check boxes and text boxes in the item template. I am wondering if it is possible to access the check boxes and text boxes using javascript? I can set up the RadListView as an object in javascript but I am not sure how to access controls in the various templates.
<telerik:RadCodeBlock ID="CodeBlock1" runat="server">
<script type="text/javascript">
var listView = null;
function GetPatternList() {
listView = $find("<%=Me.rlvShiftPatterns.ClientID %>");
}
</script>
</telerik:RadCodeBlock>
I want to get the value from a check box and then set a value in the text box depending on if the check box is checked or not.

How to view values of a select list in a textbox more than once

I'm trying to put "mobiscroll" (a select list) values into a textbox, but three times in one page, the strange thing is that if I choose to view it only one time it's working...
Also, how do I make it display the first number even if hasn't been selected by the user? I tried with "selected" after "value" but it isn't working..
http://winegood.it/landing_ristoranti/index.html
Another question, what should I do if I want to multiply only one the result by 2? I'm trying to do it with this example but it isn't working..

var f = document.frm;
f.sel_value.value = sel.options[sel.selectedIndex].value;
doesn't work for two reasons:
The <input name="sel_value"> elements are not within the form. You have an opening <form> tag, but no close tag, but the form is implicitly closed by the </div> that closes the <div> that contains it.
The assignment will only fill in one input, it doesn't automatically loop over all of them like jQuery does.
Try:
$("input[name=sel_value]").val($(sel).val());
To make it fill in these fields when the page loads, you need:
$(function(){
$('#select').scroller({
preset: 'select',
theme: 'default',
display: 'inline',
mode: 'clickpick',
inputClass: 'i-txt'
});
aggiornaHidden($("#select"));
});
To multiply the value before filling in some of the inputs, change those inputs to:
<input type="text" name="sel_value" data-multiply="2" .../>
Change aggiornaHidden to:
function aggiornaHidden(sel){
$("input[name=sel_value]").each(function() {
var multiply = $(this).data("multiply") || 1;
$(this).val($(sel).val() * multiply);
});
}