We Keep Coding

Preset dropdown for HTML form?

I am trying to make a HTML form with a preset dropdown. The form is meant to be used frequently, so the preset menu is supposed to help the user choose common input options.
I cannot find any tutorials on how to do this anywhere, so I was hoping someone could point me in the right direction. I do not want to use any external libraries, if possible.
By a preset dropdown, I mean something like this:
var lastPreset = "preset1";
function previousPreset(element) {
lastPreset = element.value;
}
function updatePresets(element) {
var old = document.getElementById(lastPreset);
if (old) {
old.style.display = "none";
for (var i = 0; i < old.childNodes.length; i++) {
old.childNodes[i].required = false;
}
}
var preset = element.value;
var div = document.getElementById(preset);
if (div) {
div.style.display = "block";
for (var i = 0; i < div.childNodes.length; i++) {
div.childNodes[i].required = true;
}
}
lastPreset = preset;
}
function submitted() {
console.log("Submitted!");
return false;
}
#preset2, #preset3 {
display: none;
}
<form onsubmit="return submitted();">
<select onchange="updatePresets(this);" onfocus="previousPreset(this);">
<option selected value="preset1">Preset 1</option>
<option value="preset2">Preset 2</option>
<option value="preset3">Preset 3</option>
</select>
<div id="preset1">
<textarea required placeholder="Sample Text"></textarea>
</div>
<div id="preset2">
<input type="text">
</div>
<div id="preset3">
<input type="file">
</div>
<input type="submit" value="Submit">
</form>
This is just a hacky mess I made in a few minutes to show the sort of behaviour that I am trying to achieve. I am just looking for any tutorials or guides on how to do this sort of thing. It seems like someone would have tried this before.
Thanks for any responses!

I found out a far better method involving classes from looking at similar answers:
function updatePresets(element) {
var presets = document.getElementsByClassName("presets");
var div = document.getElementById(element.value);
for (var i = 0; i < presets.length; i++) {
var preset = presets[i];
preset.style.display = div === preset ? "block" : "none";
for (var j = 0; j < preset.childNodes.length; j++) {
preset.childNodes[j].required = div === preset;
}
}
}
function submitted() {
console.log("Submitted!");
return false;
}
#preset2, #preset3 {
display: none;
}
<form onsubmit="return submitted();">
<select onchange="updatePresets(this);">
<option selected value="preset1">Preset 1</option>
<option value="preset2">Preset 2</option>
<option value="preset3">Preset 3</option>
</select>
<div id="preset1" class="presets">
<textarea required placeholder="Sample Text"></textarea>
</div>
<div id="preset2" class="presets">
<input type="text">
</div>
<div id="preset3" class="presets">
<input type="file">
</div>
<input type="submit" value="Submit">
</form>

How to show form input fields based on select value in html/JavaScript?

How to Enable/Disable input field based on a dropdown selection. and also I should take the user data in JSP based on the selection.
<form action="../jsp/findActorbyChar.jsp">
<h3>Search by:
<select name ="nameField"> </h3>
<option> Only FirstName </option>
<option> Only LastName </option>
<option> Or </option>
<option> And </option>
</select>
<br><br>
First Name <input type="text" name="firstName"/>
Last Name <input type="text" name="lastName"/>
<br><br>
<input type="submit"/>
<input type="reset"/>

Modified Html as shown below:
<h3>Search by:</h3>
<select name ="nameField" id="nameField">
<option>Only FirstName</option>
<option>Only LastName</option>
<option>Or</option>
<option>And</option>
</select>
<br><br>
First Name <input type="text" name="firstName" id="firstNameInput"/>
Last Name <input type="text" name="lastName" id="lastNameInput" />
<br><br>
<input type="submit"/>
<input type="reset"/>
Javascript code:
var nameField = document.getElementById("nameField");
var firstNameInput = document.getElementById("firstNameInput");
var lastNameInput = document.getElementById("lastNameInput");
nameField.addEventListener("change", function(){
//Update this to your logic...
if(nameField.value === "And"){
firstNameInput.disabled = true;
lastNameInput.disabled = true;
}
});
But I think it would be easier if using JQuery to handle DOM update.

Give your menu an id and then you can access the selected index with menu.options.selectedIndex. From there, you can add an on change handler to the menu and use switch cases to set the disabled attribute of the menu.
<h3>Search by:
<select id="menu" name ="nameField"> </h3>
<option> Only FirstName </option>
<option> Only LastName </option>
<option> Or </option>
<option> And </option>
</select>
<br><br>
First Name <input id="first" type="text" name="firstName"/>
Last Name <input id="last" type="text" name="lastName"/>
<br><br>
<input type="submit"/>
<input type="reset"/>
<script type="text/javascript">
var menu = document.getElementById('menu');
var first = document.getElementById('first');
var last = document.getElementById('last');
menu.onchange = function(){
var enableFirst = false, enableLast = false;
switch(menu.options.selectedIndex){
case 0:
enableFirst = true;
enableLast = false;
break;
case 1:
enableFirst = false;
enableLast = true;
break;
case 2:
/*not sure which results you want here*/
break;
case 3:
/*not sure which results you want here*/
break;
default:
break;
}
first.disabled = !enableFirst;
last.disabled = !enableLast;
}
</script>

My code: still all the input fields are enabled
enter code here
<script src="script.js">
var nameField = document.getElementById("nameField");
var firstNameInput = document.getElementById("firstNameInput");
var lastNameInput = document.getElementById("lastNameInput");
nameField.addEventListener("change", function(){
//Update this to your logic...
<script src="script.js">
var nameField = document.getElementById("nameField");
var firstNameInput = document.getElementById("firstNameInput");
var lastNameInput = document.getElementById("lastNameInput");
nameField.addEventListener("change", function(){
//Update this to your logic...
if(nameField.value === "And"){
firstNameInput.disabled = true;
lastNameInput.disabled = true;
}
else if(nameField.value === "firstNameInput"){
firstNameInput.disabled = false;
lastNameInput.disabled = true;
}
else if(nameField.value === "lastNameInput"){
firstNameInput.disabled = true;
lastNameInput.disabled = false;
}
elseif(nameField.value === "lastNameInput"){
firstNameInput.disabled = true;
lastNameInput.disabled = true;
}
});
</script>

How to display a form values within a single alert message in javascript

This is my Form Validation it was working perfect and what my problem is i need to display the form values within a single alert message so please provide a suggestion for me
<!DOCTYPE html>
<html>
<head>
<title>1.Form ValidationM</title>
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<div class="Wrapper">
<header>
<h1 class="logo">Header</h1>
<nav class="navdesktop">
<ul class="menu-item">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Category</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="RegHead"><h1>Registration Form</h1></div>
<div class="Form-Wrapper">
<div class="Divstyle">
<!--<h1>Form Validation</h1>-->
<form name="myForm" onsubmit="return myFunction()">
<label>FirstName:</label><input type="text" class="TagColor" name="fname"/><br><span class="Required"></span><br>
<label>LastName:</label><input type="text" class="TagColor" name="lname"/><br><span class="Required"></span><br>
<label>Phone No:</label><input type="text" class="TagColor" name="phno"/><br><span class="Required"></span><br>
<label>Email-Id :</label><input type="email" class="TagColor" name="email"/><br><span class="Required"></span><br>
<label>Gender: </label><br>
<label>Male:</label><input type="radio" name="gender" value="male"/>
<label>Female:</label><input type="radio" name="gender" value="female"/><br><span id="WrongMsg"></span><br><br>
<label>Please choose Yes or No option for Select Country:</label><br>
<label>Yes</label><input type="radio" name="option" id="YesOp" onclick="DropRad()">
<label>No</label><input type="radio" name="option" id="NoOp" onclick="DropRad()"><br><br>
<div id="Pass">
<label>Select Country</label>
<select id="mySelect">
<option value="0">Select Country</option>
<option value="1">INDIA</option>
<option value="2">PAKISTAN</option>
<option value="3">AUSTRALLIA</option>
<option value="4">AMERICA</option>
</select><br><br><span id="DropRequired"></span><br>
</div>
<label>Language: </label><br>
<label>Tamil:</label><input type="checkbox" name="check" value="Tamil"><br><br>
<label>English:</label><input type="checkbox" name="check" value="English"><br><br>
<label>Telugu:</label><input type="checkbox" name="check" value="Telugu"><br><br>
<label>Kannada:</label><input type="checkbox" name="check" value="Kannada"><br><br>
<label>Malayalam:</label><input type="checkbox" name="check" value="Malayalam"><br><span id="ErrorMsg"></span><br><br>
<input type="submit" value="submit" name="submit">
</form>
</div>
</div>
</div>
<script>
document.getElementById("Pass").style.display = 'none';
function myFunction()
{
var res = document.forms.myForm.length;
flag = true;
for (var i = 0; i < res; i++)
{
if ((document.forms.myForm[i].className) == 'TagColor')
{
var x = document.forms.myForm[i].value;
if (x == "" || x == null)
{
document.getElementsByClassName("Required")[i].innerHTML = "required";
document.getElementsByClassName("Required")[i].style.color = "red";
document.getElementsByClassName("TagColor")[i].style.border = "1px solid red";
document.getElementsByClassName("TagColor")[i].style.background = "lightblue";
flag=false;
}
else
{
document.getElementsByClassName("Required")[i].innerHTML = "";
document.getElementsByClassName("Required")[i].style.color = "white";
document.getElementsByClassName("TagColor")[i].style.border = "1px solid black";
document.getElementsByClassName("TagColor")[i].style.background = "white";
var txt = document.getElementsByClassName("TagColor");
var sad = " ";
for(var j=0;j<txt.length;j++)
{
var dispp = txt[j].value;
sad += " ," + dispp;
}
alert(sad);
}
}
}
var gen = document.getElementsByName("gender");
for(var i=0;i<gen.length;i++)
{
if(gen[i].checked == false)
{
document.getElementById("WrongMsg").innerHTML = "required";
document.getElementById("WrongMsg").style.color = "red";
flag = false;
}
else
{
document.getElementById("WrongMsg").innerHTML = "";
var disp = " ";
var Radd = document.getElementsByName("gender");
for(var i=0;i<Radd.length;i++)
{
if(Radd[i].checked)
{
disp = Radd[i].value;
alert(disp);
flag = true;
}
}
}
}
var c = document.getElementsByName("check");
for(var i=0;i<c.length;i++)
{
if(c[i].checked == false)
{
document.getElementById("ErrorMsg").innerHTML = "required";
document.getElementById("ErrorMsg").style.color = "red";
flag = false;
}
else
{
document.getElementById("ErrorMsg").innerHTML = "";
var display = "";
var chk = document.getElementsByName("check");
for(var i=0;i<chk.length;i++)
{
if(chk[i].checked)
{
display += "," + chk[i].value;
}
}
alert(display);
}
}
return flag;
}
function DropRad()
{
var YesRadio = document.getElementById("YesOp");
var NoRadio = document.getElementById("NoOp");
Pass.style.display = YesOp.checked ? "block" : "none";
var e = document.getElementById("mySelect");
var optionSelIndex = e.options[e.selectedIndex].value;
var optionSelectedText = e.options[e.selectedIndex].text;
if (optionSelIndex == 0)
{
document.getElementById("DropRequired").innerHTML = "Required";
document.getElementById("DropRequired").style.color = "red";
}
else
{
document.getElementById("DropRequired").innerHTML = "";
document.getElementById("DropRequired").style.color = "white";
alert("Your Country is: " + optionSelectedText);
}
}
</script>
</body>
</html>

<form onchange="serialize(this)">
<select name="status">
<option value="*">All</option>
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
<select name="size">
<option value="*">All</option>
<option value="small">Small</option>
<option value="big">Big</option>
</select>
check here

Trouble with innerHTML using Javascript

I am making a form with some fields that a user has to fill out. Once he/she fills it out, hits save, the form disappears and a new div appears with what the user filled out. Unfortunately, I cannot get the data to show in this second div that appears. I am not sure what I'm doing wrong, maybe you can help me? Also, I need to use pure Javascript, not jQuery or anything else.
var firstName = document.getElementById('fname').value;
var lastName = document.getElementById('lname').value;
var state = document.getElementById('select_state');
var whichState = state.options[state.selectedIndex].text;
var parname = document.getElementById('pname');
var form = document.getElementById('form_div');
var edit = document.getElementById('view_div');
if (document.getElementById('m').checked == true) {
var Gender = 'Male';
} else {
Gender = 'female';
}
function showData() {
if (form.style.display != 'none') {
form.style.display = 'none';
edit.style.display = 'block';
} else {
form.style.display = 'block';
}
parname.innerHTML = [
firstName.name + " : " + firstName.value + "<hr>",
lastName.name + " : " + lastName.value + "<hr>",
state.name + " : " + state.options[state.selectedIndex].text + "<hr>"
].join("");
}
function editData() {
if (edit.style.display != 'none') {
edit.style.display = 'none';
form.style.display = 'block';
} else {
edit.style.display = 'block';
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="form_div">
<form>
First Name:
<input type="text" name="First Name" id="fname">Last Name:
<input type="text" name="Last Name" id="lname">
<input type="radio" name="Gender" id="m" value="male" checked>Male
<input type="radio" name="Gender" id="f" value="female">Female
<select name="state" id="select_state">
<option value="select">- Please Select -</option>
<option value="PA">Pennsylvania</option>
<option value="NJ">New Jersey</option>
<option value="WI">Wisconsin</option>
<option value="WA">Washington</option>
</select>
</form>
<input type="submit" value="Save" onclick="showData();">
</div>
<div id="view_div" style="display:none;">
<button id="edit" value="Edit" onclick="editData();"></button>
<p id="pname"></p>
</div>
<body>
</html>

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="form_div">
<form>
First Name:
<input type="text" name="First Name" id="fname">
Last Name:
<input type="text" name="Last Name" id="lname">
<input type="radio" name="Gender" id="m" value="male" checked>Male
<input type="radio" name="Gender" id="f" value="female">Female
<select name="state" id="select_state">
<option value="select">- Please Select -</option>
<option value="PA">Pennsylvania</option>
<option value="NJ">New Jersey</option>
<option value="WI">Wisconsin</option>
<option value="WA">Washington</option>
</select>
</form>
<input type="submit" value="Save" onclick="showData();">
</div>
<div id="view_div" style="display:none;">
<button type="button" id="edit" value="Edit" onclick="editData();">
<p id="pname"></p>
</div>
<script>
var firstName = document.getElementById('fname');
var lastName = document.getElementById('lname');
var state = document.getElementById('select_state');
var whichState = state.options[state.selectedIndex].text;
var parname = document.getElementById('pname');
var form = document.getElementById('form_div');
var edit = document.getElementById('view_div');
if (document.getElementById('m').checked == true) {
var Gender = 'Male';
} else {
Gender = 'female';
}
function showData() {
if (form.style.display != 'none') {
form.style.display = 'none';
edit.style.display = 'block';
} else {
form.style.display = 'block';
}
parname.innerHTML = [
firstName.name + " : " + firstName.value + "<hr>",
lastName.name + " : " + lastName.value + "<hr>",
state.name + " : " + state.options[state.selectedIndex].text + "<hr>"
].join("");
}
function editData() {
if (edit.style.display != 'none') {
edit.style.display = 'none';
form.style.display = 'block';
} else {
edit.style.display = 'block';
}
}
</script>
</body>
</html>
try this one I think it is working

try the below code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="form_div">
<form>
First Name:
<input type="text" name="First Name" id="fname">
Last Name:
<input type="text" name="Last Name" id="lname">
<input type="radio" name="Gender" id="m" value="male" checked>Male
<input type="radio" name="Gender" id="f" value="female">Female
<select name="state" id="select_state">
<option value="select">- Please Select -</option>
<option value="PA">Pennsylvania</option>
<option value="NJ">New Jersey</option>
<option value="WI">Wisconsin</option>
<option value="WA">Washington</option>
</select>
</form>
<input type="submit" value="Save" onclick="showData();">
</div>
<div id="view_div" style="display:none;">
<button type="button" id="edit" value="Edit" onclick="editData();">
<p id="pname"></p>
</div>
<script>
function showData() {
var firstName = document.getElementById('fname').value;
var lastName = document.getElementById('lname').value;
var state = document.getElementById('select_state');
var whichState = state.options[state.selectedIndex].text;
var parname = document.getElementById('pname');
var form = document.getElementById('form_div');
var edit = document.getElementById('view_div');
if (document.getElementById('m').checked == true) {
var Gender = 'Male';
} else {
Gender = 'female';
}
if (form.style.display != 'none') {
form.style.display = 'none';
edit.style.display = 'block';
} else {
form.style.display = 'block';
}
parname.innerHTML = [
" First Name : " + firstName + "<hr>",
" Last Name : " + lastName + "<hr>",
" state : " + state.options[state.selectedIndex].text + "<hr>"
].join("");
}
function editData() {
if (edit.style.display != 'none') {
edit.style.display = 'none';
form.style.display = 'block';
} else {
edit.style.display = 'block';
}
}
</script>
</body>
</html>

var firstName = document.getElementById('fname');
var lastName = document.getElementById('lname');
Problem: you didn't target DOM objects, you have targeted their values, and later in code you try to get properties, like: firstName.name!
Change two lines at the top of your code to this, and everything should work fine.

One error is the fact that you are getting the values from the elements right after the page is rendered, thus they are all undefined.
You should get them after the save button is pressed. Moving the variable declarations inside the showData function will help that.
Also in your variables you are saving the element.value, thus saving the string entered by the user.
Later when creating the text you are trying to insert as HTML you access the value and name properties. That means you are trying to use element.value.value and element.value.name which undefined for strings.
Removing the value property in your variable declaration will give you the element, and later you can just get the value and name properties out of it.

How to Show selected value on textbox using javascript?

How can I show the value of the selected items in the textbox using javascript?
// MY LIST
<select id="list" class="form-control" multiple="">
<option value="2014">Your Cute</option>
<option value="2013">Your Ugly</option>
<option value="2011">Your Awesome</option>
</select>
// BUTTON and TEXTBOX
<button onclick="show_value();" type="button" value="Get Value">Get Value</button>
<input type="text" id="selectedvalue" class="text" name="selectedvalue" />
I came up with this javascript code
function showgroup_id () {
$('#selectedvalue').val(selectedvalue);
var myList = document.getElementById('list');
var selected-value = selectedItem;
var selectedGroupIds = [];
for (var i = 0; i < myList.length; i++) {
if (myList[i].selected) {
selectedselectedItem.push(myList[i].value);
}
}
}
When I tried, it doesn't work.. anyone can help me please?

You can use onchange event to change the textbox content with changing select element.
HTML :
<select id="selectBox">
<option>A</option>
<option>B</option>
</select>
<input type="text" id="messageTextBox" />
javaScript :
var selectBox = document.getElementById("selectBox");
selectBox.onchange = function(){
var textbox = document.getElementById("messageTextBox");
textbox.value = this.value;
};
jsFiddle
Your Solution :
HTMl :
<select id="list" class="form-control" multiple="">
<option value="2014">Your Cute</option>
<option value="2013">Your Ugly</option>
<option value="2011">Your Awesome</option>
</select>
// BUTTON and TEXTBOX
<button onclick="showgroup_id();" type="button" value="Get Value">Get Value</button>
<input type="text" id="selectedvalue" class="text" name="selectedvalue" style="width: 55%;" />
javaScript/jQuery :
function showgroup_id () {
var result = "";
var selectedItem = $('#selectedvalue').val(selectedvalue);
var myList = document.getElementById('list');
var selectedValues = selectedItem;
var selectedGroupIds = [];
for (var i = 0; i < myList.length; i++) {
if (myList[i].selected) {
//selectedselectedItem.push(myList[i].value);
//alert(myList[i].text);
result = result + " " + myList[i].text;
$("#selectedvalue").val(result);
}
}
}
jsFiddle

Try this :
give some id to button and remove onclick
<button id="getValue" type="button" value="Get Value">Get Value</button>
bind onclick event to button as shown below
$('#getValue').click(function(){
var text = $('#list option:selected').text();
$('#selectedvalue').val(text);
});

Try this,
<html lang="us">
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<script>
function show_value()
{
$("#selectedvalue").val($("#list").val());
}
</script>
</head>
<body>
<select id="list" class="form-control" multiple="">
<option value="2014">Your Cute</option>
<option value="2013">Your Ugly</option>
<option value="2011">Your Awesome</option>
</select>
// BUTTON and TEXTBOX
<button onclick="show_value();" type="button" value="Get Value">Get Value</button>
<input type="text" id="selectedvalue" class="text" name="selectedvalue" style="width: 55%;" />
</body>

replace your javascript code with the following:
function show_value() {
document.getElementById("selectedvalue").value = document.getElementById( "list" )[ (document.getElementById( "list" )).selectedIndex ].text;
}

The show_value() function will be called when the button is clicked. Inside the function, I have set the value of the textbox with the value of the select list.
function show_value()
{
$("#selectedvalue").val($("#list").val());
}