We Keep Coding

Fill Field textarea different select

I've been stuck in this problem for a few days. I am trying to create selects and by choosing, fill the field in the "textarea". An example of what I did and what I'm trying to do. The image is edited. I don't know how to create more than one select that feeds the same textarea.
function fillFild() {
var myList = document.getElementById("myList");
document.getElementById("fild").value = myList.options[myList.selectedIndex].value;
}
function fillFild1() {
var myList = document.getElementById("myList1");
document.getElementById("fild1").value = myList.options[myList.selectedIndex].value;
}
<form name="Form">
Select your Device:
<select id="myList" name="select_field" onchange="fillFild();">
<option value="Laptop: ">Laptop</option>
<option value="PC:">PC</option>
<option value="Smartphone: ">Smartphone</option>
<option value="Tablet: ">Tablet</option>
</select>
<form name="Form1">
Select your Problem:
<select id="myList1" name="select_field" onchange="fillFild1();">
<option value="Software: ">Software</option>
<option value="Hardware:">Hardware</option>
</select>
<textarea name="TextArea" id="fild1" style="position:absolute;left:23px;top:153px;width:394px;height:119px;z-index:5;" rows="7" cols="47" spellcheck="false"></textarea>
</form>
Illustrating what I'm trying to do
Thanks in advance!

I see you are trying hard to add a post. The one you added has already closed, and you're still adding pretty much the same. Not the way ;)
First, read carefully how to ask questions how-to-ask
Below you have the solution to your question:
const selectElements = document.querySelectorAll('.select_field');
const textArea = document.querySelector('textarea');
[].slice.call(selectElements).map(el => el.addEventListener('change', e => {
const selcted = e.target.value;
if (selcted !== '') {
textArea.value += selcted + '\n';
}
}));
<div>
Select your Device:
<select id="myList" name="select_field" class="select_field">
<option value="">-- choose --</option>
<option value="Laptop:">Laptop</option>
<option value="PC:">PC</option>
<option value="Smartphone:">Smartphone</option>
<option value="Tablet:">Tablet</option>
</select>
</div>
<div>
Select your Problem:
<select id="myList1" name="select_field" class="select_field">
<option value="">-- choose --</option>
<option value="Software:">Software</option>
<option value="Hardware:">Hardware</option>
</select>
</div>
<textarea name="TextArea" id="fild1" rows="7" cols="47" spellcheck="false"></textarea>

Trigger Button Click on Enter in HTML

I have researched this through Stack, W3, and others but the solutions that I fiond there don't work. Below is part of my html code, I did my best to try and keep it neat (not an expert by any means).
<select name="ctl00$ContentPlaceHolder1$ddlSearchCriteria" id="ctl00_ContentPlaceHolder1_ddlSearchCriteria" style="width:150px;">
<option value="LastName">Last Name</option>
<option value="FirstName">First Name</option>
<option value="Phone">Phone Number</option>
<option value="Department">Department</option>
<option value="Division">Division</option>
<option value="Location">Location</option>
<option value="Title">Title</option>
<option value="Email">Email Address</option>
<option value="Keywords">Keywords</option>
</select>
<div style="height:10px"></div>
<input name="ctl00$ContentPlaceHolder1$txtSearchString" type="text" id="ctl00_ContentPlaceHolder1_txtSearchString" style="width:160px;">
<button type="button" name="ctl00$ContentPlaceHolder1$Button1" id="ctl00_ContentPlaceHolder1_Button1" style="position: absolute; height:22px; " onclick="myFunction()">Go</button>
<div style="height:5px;"></div>
</td>
<td style="width:48%; height: 27px;"> </td>
</tr>
</tbody>
</table>
</div>
<script>
var GoToURL = 'http://bccportal01/webapps/agency/epdsearch/Search.aspx?op=' + dropDownChoice + '&str=' + inputText;
function myFunction()
{
var dropDownChoice = document.getElementById("ctl00_ContentPlaceHolder1_ddlSearchCriteria").value;
var inputText = document.getElementById("ctl00_ContentPlaceHolder1_txtSearchString").value;
var GoToURL = 'http://bccportal01/webapps/agency/epdsearch/Search.aspx?op=' + dropDownChoice + '&str=' + inputText;
window.open(GoToURL);
}
</script>
I'm trying to make it so that when you click enter the submit button activates. I have tried https://www.w3schools.com/howto/howto_js_trigger_button_enter.asp and Trigger function on Enter keypress as examples.
But this isn't working, all it does is break my code. Not sure if I'm putting it in the wrong spot. I added it right below var inputText in the Function.

You need to add keyup event listener on the input textfield
Add this to your javascript
var input = document.getElementById("ctl00_ContentPlaceHolder1_txtSearchString");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("ctl00_ContentPlaceHolder1_Button1").click();
}
});
Working Example

Replace type="button" with type="submit"
Add a <form onsubmit="myFunction">
Wrap your <select> with the <form>:
<form onsubmit="myFunction">
<select>...</select>
</form>
Here's what your function should do to prevent the form from submitting (we didn't include an "action" so it will submit to itself)
function myFunction(event){
// Stop the form from submitting (default functionality)
event.preventDefault();
...
}
Your code should look similar to this (added a fix for obtaining the select list value the proper way)
<form onsubmit="myFunction">
<select id="mySelect">
<option value="LastName">Last Name</option>
<option value="FirstName">First Name</option>
<option value="Phone">Phone Number</option>
<option value="Department">Department</option>
<option value="Division">Division</option>
<option value="Location">Location</option>
<option value="Title">Title</option>
<option value="Email">Email Address</option>
<option value="Keywords">Keywords</option>
</select>
<input type="text" id="myInput">
</form>
<script type="text/javascript">
function myFunction(event){
// Prevent the form from submitting (default functionality)
event.preventDefault();
var myUrl = "http://bccportal01/webapps/agency/epdsearch/Search.aspx?",
selectEl = document.getElementById('mySelect'),
inputEl = document.getElementById('myInput');
// Append the selected value
myUrl += "op=" + selectEl.options[selectEl.selectedIndex].value;
myUrl += "&str=" + inputEl.value;
window.open(myURL);
}
</script>

Change Dropdown values based on input in textfield

I try to find a solution, but I can't find it and I am not able to program it by myself. I hope you can help me.
I have 2 elements: A textfield and a drop down menu (select/options).
Based on the birth/year of a person I enter into the textfield, I want to have a related drop down values.
If the person is 0-17 years old, the values in the drop down should bei 0, 100, 200, 300, 400, 500, 600.
If the person is 18 years old or older, the values in the drop down should bei 300, 500, 1000, 1500, 2000, 2500.
Example: If I enter 1978 into the text field, the drop down menu should show the values 300, 500,…
If I enter 2002 into the text field, the drop down menu should show the values 100, 200,…
I hope it is understandable what I am looking for.
I have checked this one:
Change dropdown value based on Text Input
and also this one, which looks also similar to what I need:
jQuery - Change hidden value based on input field
But I can't make it.
A jsfiddle would be really cool!
Thank you in advance.
<input name="Year" type="text" value="" />
<select name="Results">
<option selected="selected" value="">please choose:</option>
<option value="300">300.-</option>
<option value="500">500.-</option>
<option value="1000">1000.-</option>
<option value="1500">1500.-</option>
<option value="2000">2000.-</option>
<option value="2500">2500.-</option>
</select>
<select name="Results">
<option selected="selected" value="">please choose:</option>
<option value="100">100.-</option>
<option value="200">200.-</option>
<option value="300">300.-</option>
<option value="400">400.-</option>
<option value="500">500.-</option>
<option value="600“>600.-</option>
</select>
Kind regards,
Andy

You could handle this by taking advantage of data-* attributes and using jQuery to determine which values should be shown based on your selection :
<!-- Assumes a valid year is entered -->
<input name="Year" type="text" value="" />
<!-- Notice your possible values data options -->
<select name="Results">
<option selected="selected" value="">please choose:</option>
<option value="300" data-under-18="100" data-over-18="300">300.-</option>
<option value="500" data-under-18="200" data-over-18="500">500.-</option>
<option value="1000" data-under-18="300" data-over-18="1000">1000.-</option>
<option value="1500" data-under-18="400" data-over-18="1500">1500.-</option>
<option value="2000" data-under-18="500" data-over-18="2000">2000.-</option>
<option value="2500" data-under-18="600" data-over-18="2500">2500.-</option>
</select>
<script>
$(function(){
// When your year changes...
$('[name="Year"]').change(function(){
// Check that the value is a year (assumes 4 digit number)
if(/^\d{4}/.test($(this).val())){
// Parse the value
var year = parseInt($(this).val());
// Determine the user's age
var age = new Date().getFullYear() - year;
// Use the data attributes to set each value (ignore the first one)
$('[name="Results"] option:not(:first)').each(function(){
var valueToUse = (age >= 18) ? $(this).attr('data-over-18') : $(this).attr('data-under-18');
$(this).val(valueToUse).text(valueToUse);
});
}
else{
alert('Please enter a year! (any 4-digit number will do)');
$(this).val('').focus();
}
})
})
</script>
You can see a complete working example here and demonstrated below :

https://jsfiddle.net/erjc0fna/
Basically each option has a class that identifies it as lessThan18 or over18. The ones without classes are available for either case according to what you wrote. On keyup for the textbox it then calculates the age and hides/shows the correct options.

Include jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
After add ids to the input(inputId) and the 2 select(select1 and select2)
<input id="inputId" name="Year" type="text" value="" />
<select id="select1" name="Results">
<option selected="selected" value="">please choose:</option>
<option value="300">300.-</option>
<option value="500">500.-</option>
<option value="1000">1000.-</option>
<option value="1500">1500.-</option>
<option value="2000">2000.-</option>
<option value="2500">2500.-</option>
</select>
<select id="select2" name="Results">
<option selected="selected" value="">please choose:</option>
<option value="100">100.-</option>
<option value="200">200.-</option>
<option value="300">300.-</option>
<option value="400">400.-</option>
<option value="500">500.-</option>
<option value="600“>600.-</option>
</select>
Code jquery
<script>
//here the code
$( document ).ready(function() {
$("#inputId").keypress(function(e)
{
if(e.which == 13) //When you press enter key one select is hide an the other is show
{
var aux = parseInt($(this).val());
if( aux >= 1999)
{
$("#select2").show();
$("#select1").hide();
}
else
{
$("#select1").show();
$("#select2").hide();
}
}
});
});
<script>

Safari not reading required field

I created an option field and with it I set it to a required field and it works perfect on Chrome/internet explorer/Android's internet. However, when going to my site with Apple's safari on mobile, the required field does not stop the customer when trying to proceed and saying that is a required field.
<div class="productdetailquantity"><?php echo"<form action='./itemsadded.php?view_product=$product_id' method='POST'>"?>
<select class="productsize" name='size' required>
<option value=''>Select a Size</option>
<option value='Small'>Small</option>
<option value='Medium'>Medium</option>
<option value='Large'>Large</option>
<option value='XL'>XL</option>
</select>
Is there something else I have to add other than the html5 'required' field for this to make it work on Safari or why isn't this working?
If Safari does not support it, what is another way I can implement this field to be required?
UPDATE:
After figuring out it isn't supported, I tried doing some JS with it, but my message OR alert won't display. However, it doesn't allow the customer to move forward unless a size is picked, but I need the message to display so they know why.
<div class="productdetailquantity"><?php echo"<form action='./itemsadded.php?view_product=$product_id' method='POST' id='formID'>"?>
<select class="productsize" name='size' required><span id="sizeoptionMSG" style="margin-left:6px;color:darkred;"></span>
<option value='' id="sizeoption">Select a Size</option>
<option value='Small'>Small</option>
<option value='Medium'>Medium</option>
<option value='Large'>Large</option>
<option value='XL'>XL</option>
</select><br><br>
<select class="productquantity" name='quantity'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>
</div><br><br>
<div class="productdetailaddbutton">
<?php
echo "<input type='hidden' name='product_id' value='$product_id' />
<input type='submit' class='addtocart' name='add_to_cart' value='Add to cart' />";
?>
<script>
var form = document.getElementById('formID'); // form has to have ID:
<form id="formID">
form.noValidate = true;
form.addEventListener('submit', function(event) { // listen for form submitting
if (!event.target.checkValidity()) {
event.preventDefault(); // dismiss the default functionality
document.getElementById('sizeoptionMSG').innerHTML = document.getElementById('sizeoption').value == '' ? 'Please, select a size' : ''; // Show message
document.getElementById('sizeoption').style.borderColor = document.getElementById('sizeoption').value == '' ? 'darkred' : ''; // color field's border
if (document.getElementById('sizeoption').value == '') document.getElementById('sizeoption').focus(); // Put cursor back to the field
alert('Please, select a size.'); // error message
}
}, false);
</script>

At this time, Safari does not support the "required" input attribute.
See here: http://www.w3schools.com/html/html_form_attributes.asp

Automatic form fill using javascript

here is my code:
function setActualDate()
{
var d1 = new Date();
var y = d1.getFullYear();
var d = d1.getDate();
var m1 = d1.getMonth() + 1;
var m2 = d1.getMonth();
document.getElementById('entryDate').value = (y+"-"+m1+"-"+d);
document.getElementById('selectedYear').value = y;
document.getElementById('selectedMonth').value = ("0"+m2);
}
</script>
</head>
<body onload="setActualDate()">
<div id="page">
<h3> Welcome to Money Logger!</h3>
<form name="enter" action="enter.php" method="post">
Enter
<select name="mode">
<option selected="selected" value=""></option>
<option value="1">the money withdraw</option>
<option value="2">the money income</option>
</select>
<input id ="entryDate" type="date" name="entryDate">
<input type="text" name="entryName">
<input type="text" name="entryValue">
<input type="submit" value="Enter">
<input type="reset" value="Clear">
</form>
<form name="getEntry" action="getEntry.php" method="post">
Choose month and year for monthly overview:
<select name="month">
<option id = "selectedMonth" selected="selected" value=""></option>
</select>
<select name="year">
<option id = "selectedYear" selected="selected" value=""></option>
</select>
<input type="submit" value="Display">
</form>
</div>
</body>
I used simple javascript to automatically fill the form inputs "entryDate, selectedYear, selectedMonth" by actual date and some other dates used by the further scripts.
My problem is, that when the site is loaded, only first input is automatically filled - the input with id = entryDate.
The next 2 inputs are empty. But, when I press F5 and the site is reloaded again, the 2 inputs are filled correctly.
Could you please help me fix it to have all 3 forms filled when the site is loaded for the first time...
Thank you

You are not using <select> and <option> correctly. <select> represents a dropdown, which can contain multiple <option> elements.
An <option> element represents an option in the dropdown. You close an <option> with </option>. Whatever is BETWEEN the tags will appear in the dropdown:
<option>Hello</option> <!--user sees "Hello" as an option in the dropdown-->
On the other hand, an <option>'s value attribute contains the string that will be sent to the server, if the option is selected, when the form is submitted. You can think of this as the "real" value of the <option>: the user won't see it, but it's the one that matters. Whatever is between <option> and </option> is visible by the user, but doesn't actually DO anything.
Any one of a dropdown's options can be "selected" (that is, visible as the chosen option in the dropdown) by giving it a selected attribute set to selected (selected="selected"). When a user chooses an option, this attribute gets set automatically (and the selected attribute on the other options gets cleared).
So first of all, let's get your selectedYear dropdown looking right. You'll need to manually provide some years as options:
<select id="selectedYear" name="year">
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>
Note that you need to specify the year both between the tags AND in each <option>'s value attribute, as explained above. Also note that I moved the id to the <select>. There's rarely a reason to select an individual <option> of a <select>; typically to modify a dropdown's options, you should select the <select> tag itself.
So, let's try that. I'll re-create the dropdown above, but I'll add its options using JavaScript:
<select id="selectedYear" name="year"></select>
<script type="text/javascript">
var dropdown = document.getElementById('selectedYear');
var start_year = 2011;
var end_year = 2013;
for (var i = start_year; i <= end_year; i++) {
dropdown.innerHTML += '<option value="' + i + '">' + i + '</option>';
}
</script>
The innerHTML function lets you set the HTML content between an element's opening tag (in this case <select id="selectedYear" name="year"> and closing tag (</select>).
Knowing this, it's pretty easy to select the option you want using JavaScript. Remember you can do this by setting the selected attribute of the <option> to "selected". Here's a portion of your setActualDate function, showing how to set the default year for just the selectedYear dropdown:
<script type="text/javascript>
function setActualDate() {
var d1 = new Date();
var year = d1.getFullYear();
var dropdown = document.getElementById('selectedYear');
//loop through the dropdown's options
for (var i = 0; i < dropdown.options.length; i++) {
var option = dropdown.options[i];
//check if this is the option we want to set
if (option.value == year) {
option.selected = true;
} else {
//ensure all other options are NOT selected
option.selected = false;
}
//NOTE: you can simplify the above if-else to just:
//option.selected = (option.value == year);
}
}
</script>
That should be enough to get you started. I hope it all makes sense.

Use the following HTML for month -
<!-- HTML for month -->
<select id = "selectedMonth" name="month">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<!-- HTML for year -->
<select id="selectedYear" name="year">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
and script
//script for setting month
var monthEl = document.getElementById('selectedMonth');
monthEl.options[m2].selected = "selected"
//for year
var yearEl = document.getElementById('selectedYear');
yearEl.options[y].selected = "selected"

You are getting the elements by their ID so the first time the script runs only fills out the first elements it finds (probably the ones in the first form).
Since you have several elements to fill out automatically, you should be setting classes to on them and use these classes to select the ones you are interested in. For example:
<form id="form1">
<input class="entryDate" type="text"> <!-- note the class=..." -->
</form>
<form id="form2">
<input class="entryDate" type="text">
<select name="mode" class="selectedMonth"> <!-- note the class=..." -->
<option selected="selected" value=""></option>
<option value="1">the money withdraw</option>
<option value="2">the money income</option>
</select>
</form>
Now your code should be something like this:
window.onload = function setActualDate() {
var d1 = new Date();
var y = d1.getFullYear();
var d = d1.getDate();
var m1 = d1.getMonth() + 1;
var m2 = d1.getMonth();
var entryDates = document.getElementsByClassName('entryDate');
var years = document.getElementsByClassName('selectedYear');
var months = document.getElementsByClassName('selectedMonth');
var i, j;
for (i in entryDates)
entryDates[i].value = (y + "-" + m1 + "-" + d);
for (i in months) {
for (j in months[i].options)
if (months[i].options[j].value == m1) {
months[i].options[j].selected = true;
break;
}
}
//similarly for years...
};
Here's a fiddle demonstrating it: http://jsfiddle.net/QDdAp/2/