I want to create a program where I can copy a div over and over again, which contains two drop down buttons and to input forms. Copying a div with its elements is already solved, the problem is that this div contains two drop down buttons which are connected by a function: when one button option is selected, the other one shows respective choices. So copying a div with these two drop down buttons work, but they aren't connected anymore. How do I declare that for every new div the function ChangeCarList will work with those two only ir particular div? Sorry for a messy formulation, but here's the code:
<!DOCTYPE html>
<html>
<body>
<div id="Item1">
<select id="car" onchange="ChangeCarList()">
<option value="">-- Car --</option>
<option value="VO">Volvo</option>
<option value="VW">Volkswagen</option>
<option value="BMW">BMW</option>
</select>
<select id="carmodel"></select>
<input type="text" value="number1">
<input type="text" value="number2">
<TD width="200" rowspan="3" valign="top"></STRONG><span style="color: #ff0000">*</span>
<input type="button" name="" id="" value="+" onclick="addItem('Item1');" style="20;" class="FieldBlack"></input>
<input type="button" name="" id="" value="-" onclick="parentNode.remove()" class="FieldBlack"></input>
</TD>
</div>
<script>
function addItem(div)
{
var ediv=document.getElementById("Item1");
var temp=ediv.innerHTML;
var newdiv = document.createElement('div');
var divIdName=div+1;//i hav taken 1 for sample for adding id to the div
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML =temp;
ediv.parentNode.insertBefore(newdiv, ediv.nextSibling);
}
var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];
function ChangeCarList() {
var carList = document.getElementById("car");
var modelList = document.getElementById("carmodel");
var selCar = carList.options[carList.selectedIndex].value;
while (modelList.options.length) {
modelList.remove(0);
}
var cars = carsAndModels[selCar];
if (cars) {
var i;
for (i = 0; i < cars.length; i++) {
var car = new Option(cars[i], i);
modelList.options.add(car);
}
}
}
</script>
</body>
</html>
Here you go
function ChangeCarList() {
var carList = event.target;
console.log(carList);
var modelList = carList.parentNode.querySelectorAll('select')[1];
var selCar = carList.options[carList.selectedIndex].value;
while (modelList.options.length) {
modelList.remove(0);
}
var cars = carsAndModels[selCar];
if (cars) {
var i;
for (i = 0; i < cars.length; i++) {
var car = new Option(cars[i], i);
modelList.options.add(car);
}
}
}
RE-EDIT FUll VerSIOn
<!DOCTYPE html>
<html>
<body>
<div id="cars">
<div id="Item1">
<select id="car" onchange="ChangeCarList()">
<option value="">-- Car --</option>
<option value="VO">Volvo</option>
<option value="VW">Volkswagen</option>
<option value="BMW">BMW</option>
</select>
<select id="carmodel"></select>
<input type="text" value="number1">
<input type="text" value="number2">
<TD width="200" rowspan="3" valign="top"></STRONG><span style="color: #ff0000">*</span>
<input type="button" name="" id="" value="+" onclick="addItem('Item1');" style="20;" class="FieldBlack"></input>
<input type="button" name="" id="" value="-" onclick="parentNode.remove()" class="FieldBlack"></input>
</TD>
</div>
</div>
<script>
function addItem(div)
{
var ediv=document.getElementById("Item1");
var temp=ediv.innerHTML;
var newdiv = document.createElement('div');
var divIdName=div+1;//i hav taken 1 for sample for adding id to the div
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML =temp;
document.getElementById('cars').appendChild(newdiv);
}
var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];
function ChangeCarList() {
var carList = event.target;
console.log(carList);
var modelList = carList.parentNode.querySelectorAll('select')[1];
var selCar = carList.options[carList.selectedIndex].value;
while (modelList.options.length) {
modelList.remove(0);
}
var cars = carsAndModels[selCar];
if (cars) {
var i;
for (i = 0; i < cars.length; i++) {
var car = new Option(cars[i], i);
modelList.options.add(car);
}
}
}
</script>
</body>
</html>
Related
I am brand new to JavaScript and HTML, and am trying to make a rehersal booking app which collects the info needed and displays it in a table on the same page.
I have been trying for hours on end to get it to work with various methods and I feel like it's just getting worse. I have probably made some silly mistakes but I cant seem to work out what I need to change to make it work.
Here is my HTML:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>White Noise Studios - Home</title>
<script type="text/javascript" src="Homepage.js"></script>
<style>
body, html
{
height: 100%;
background: url(Media/background.png);
background-size: cover;
}
</style>
</head>
<body>
<header style="color:white;font-family:'Calibri'">
<h1> Rehearsal Bookings</h1>
<p>Please let us know what gear you require in order for us to have the room ready for you. Leave the equipment section blank if you wish to bring your own gear. </p>
</header>
<form name="booking" id="booking">
<table style="color:white;font-family:'Yu Gothic UI Semibold'">
<tr>
<td><form action="Homepage.html"><input type="image" src="Media/homebutton.png"></form></td>
<td><form action="Homepage.html"><input type="submit" value="Book My Rehearsal"></form></td>
<td>Artist Name:</td><td><input type="text" name="Artist" size="50" id="Artist" /></td>
<td>Contact Number:</td><td><input type="text" name="Contact" size="50" id="Contact" /></td>
</tr>
<td>Equipment Needed:</td>
<td><label>Microphone</label>
<select id = "Microphone" name="Microphone">
<option value = "0">0</option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select></td>
<td><label>Guitars</label>
<select id = "Guitar" name="Guitar">
<option value = "0">0</option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select></td>
<td><label>Bass</label>
<select id = "Bass" name="Bass">
<option value = "0">0</option>
<option value = "1">1</option>
<option value = "2">2</option>
</select></td>
<td><label>Drums</label>
<select id = "Drums" name="Drums">
<option value = "0">None</option>
<option value = "1">Mapex Mars 5 Piece Full Kit</option>
<option value = "2">Ludwig LC17611 5 Piece Acoustic Kit</option>
<option value = "3">Roland TD 25KV V-Drums Kit</option>
</select></td>
<td><label>Amp</label>
<select id = "Amp" name="Amp">
<option value = "0">None</option>
<option value = "1">Marshall DSL100H</option>
<option value = "2">Marshall MG100GFX</option>
<option value = "3">Mesa Boogie triple Rectifier 100w</option>
</select></td> </tr>
<tr>
<td>Date:</td><td><input type="date" name="Date" id="Date" /></td>
</tr>
<tr>
<td>Time:</td><td><input type="time" name="Time" id="Time" /></td>
</tr>
</table>
</form>
<input type="submit" name="Book" value="Book my Rehearsal">
<button id="cancel" name="Cancel" onclick="myFunction()" value="Reset form">Cancel</button>
<hr/>
<div id="table">
</div>
<body>
<body style=”font-family:”arial black”; >
And my JavaScript:
var ArtistField, ContactField, MicrophoneSelect, GuitarSelect, BassSelect, DrumsSelect, AmpSelect, DateSelect, TimeSelect, BookSelect, CancelSelect;
var Booking = function (Artist, Contact, Microphone, Guitar, Bass, Drums, Amp, Date, Time ) {
this.Artist = Artist;
this.Contact = Contact;
this.Microphone = Microphone;
this.Guitar = Guitar;
this.Bass = Bass;
this.Drums = Drums;
this.Amp = Amp;
this.Date = new Date ;
this.Time = Time;
};
function myFunction() {
document.getElementById("booking").reset();
}
var Bookings = []
Booking.prototype.tableRow = function(){
var tr = "<tr><td>" + this.Artist + "</td><td>" +
this.Contact + "</td><td>" + this.Microphone +
"<tr><td>" + this.Guitar + "<tr><td>" + this.Bass + "<tr><td>" + this.Drums + "<tr><td>" + this.Amp +"<tr><td>"
+ this.getDate() + "</td><td>" + this.Time+ "</td><td>" + "</td></tr> ";
return tr;
};
Booking.prototype.getDate = function(){
return this.Date.toDateString();
};
var clickBook = function() {
addbooking(ArtistField, ContactField, MicrophoneSelect, GuitarSelect, BassSelect, DrumsSelect, AmpSelect, DateSelect, TimeSelect,);
showTable();
};
var showTable = function(){
var tableDiv = document.getElementById("table"), table = "<table border='1'>" +
"<thead><th>Artist</th><th>Contact</th><th>Microphone</th><th>Guitar</th><th>Bass</th><th>Drums</th><th>Amp</th</thead>";
for(var i=0, j=Bookings.length; i<j; i++){
var appt = Bookings[i];
table += appt.tableRow();
}
table+="</table>";
tableDiv.innerHTML = table;
};
window.onload = function(){
ArtistField = document.getElementById("Artist");
ContactField = document.getElementById("Contact");
MicrophoneSelect = document.getElementById("Microphone");
GuitarSelect = document.getElementById("Guitar");
BassSelect = document.getElementById("Bass");
DrumsSelect = document.getElementById("Drums");
AmpSelect = document.getElementById("Amp");
DateSelect = document.getElementById("Date");
TimeSelect = document.getElementById("Time");
//var roleChoice = roleField.options[roleField.selectedIndex].text;
Book = document.getElementById("Book");
Book.onclick = clickBook();
showTable();
};
So we've been struggling with a project the past few weeks, and the simple idea is to create a website for our school to use to send and receive forms. At this point we are trying to create the page where admins can dynamically create forms, akin to Google Forms. Right now our HTML looks like so:
<HTML>
<HEAD>
<TITLE>Create Form</TITLE>
<link rel="stylesheet" type="text/css" href="login.css" />
<script type="text/javascript" src="createform.js"></script>
</HEAD>
<BODY>
<form method="POST">
<div id="dynamicInput">
<label for="fieldName">Name this field</label>
<input type="text" name="fieldName">
<br><br>
<SELECT name="element">
<OPTION value="text">Textbox</OPTION>
<OPTION value="radio">Radio</OPTION>
<OPTION value= "textarea">Text Area</option>
<OPTION value = "checkbox">Check Box</option>
</SELECT>
<input type="button" value="Add an option" onClick="addAllInputs('dynamicInput', document.forms[0].element.value);">
</div>
<br><br><br>
<input type = "button" value="Add another field" onClick = "addSec();">
<br><br>
</form>
</BODY>
</HTML>
Our JavaScript:
var counterText = 0;
var counterRadioButton = 0;
var counterCheckBox = 0;
var counterTextArea = 0;
var counter = 0;
function addAllInputs(divName, inputType){
var newdiv = document.createElement('div');
switch(inputType) {
case 'text':
newdiv.innerHTML = "Entry " +(counterText+1)+" <input type='text' name='myInputs[]'><br>";
counterText++;
break;
case 'radio':
newdiv.innerHTML = "Entry " +(counterRadioButton+1)+" <input type='radio' name='myRadioButtons[]'>";
counterRadioButton++;
break;
case 'checkbox':
newdiv.innerHTML = "Entry "+(counterCheckBox+1)+" <input type='checkbox' name='myCheckBoxes[]'>";
counterCheckBox++;
break;
case 'textarea':
newdiv.innerHTML = "Entry "+(counterTextArea+1)+" <textarea name='myTextAreas[]'>type here...</textarea>";
counterTextArea++;
break;
}
document.getElementById(divName).appendChild(newdiv);
}
function addSec(){
var newdiv = document.createElement('div');
var div = document.getElementById('dynamicInput').innerHTML;
newdiv.innerHTML = document.getElementById('dynamicInput');
document.body.appendChild(newdiv);
}
We've tried many different iterations of the AddSec function, which is meant to duplicate the HTML div which makes a form field. We have gotten it to duplicate the div, however it comes with all of the "options" like checkboxes and text fields that we have added to the original field, and it cannot be modified in any way. Any advice on this would be appreciated, and we would prefer pure JavaScript methods but jQuery would be okay if we can get it working.
So far I have tested using the .clone function to clone the dynamicInput div, and have also tried adding the new divs into an array but nothing about the program was functioning.
Update
Added a Plunk
This Demo makes <input type='text'>, <textarea>, <input type='checkbox'>, groups of <input type='radio'> and <select>. It also creates extra <fieldset> as well. Each form control has a unique #id and matching [name] and each radio button has a unique id but a common [name] for each group.
I didn't make <label> an option, I figure if you follow the pattern, you should be able to add it in as a simple string. The following references are to what was used:
insertAdjacentHTML()
Template Literals
Event Delegation
HTMLFormControlsCollection
var formA = document.forms[0];
var formB = document.forms[1];
var ui = formA.elements;
var base = formB.elements;
formA.addEventListener('change', selectTag);
formA.addEventListener('click', addFieldset);
function selectTag(e) {
var rad = `s${document.querySelector('.rad:checked').value}`;
var fst = base[rad];
var qty;
var ask;
var idx = -1;
if (e.target.id === "sel") {
idx = parseInt(e.target.value, 10);
}
switch (idx) {
case 0:
var ID0 = Math.round(new Date().valueOf() / 3000000 + performance.now());
var input = `<input id="t${ID0}" name="t${ID0} type="text">`;
fst.insertAdjacentHTML('beforeend', input);
break;
case 1:
var ID1 = Math.round(new Date().valueOf() / 3000000 + performance.now());
var textArea = `<textarea id="ta${ID1}" name="ta${ID1}"></textarea>`;
fst.insertAdjacentHTML('beforeend', textArea);
break;
case 2:
var ID2 = Math.round(new Date().valueOf() / 3000000 + performance.now());
var check = `<input id="ch${ID2}" name="ch${ID2}" type='checkbox' value=''>`;
fst.insertAdjacentHTML('beforeend', check);
break;
case 3:
var ID3 = Math.round(new Date().valueOf() / 3000000 + performance.now());
ask = prompt('Enter the number of radio buttons needed');
var rads = [];
qty = parseInt(ask, 10);
var name = ID3 + Math.floor(Math.random() * 11) + 10;
for (let i = 0; i < qty; i++) {
var radio = `<input id="r${ID3+i}" name="r${name}" type='checkbox' value=''>`;
rads.push(radio);
fst.insertAdjacentHTML('beforeend', radio);
}
break;
case 4:
var ID4 = Math.round(new Date().valueOf() / 3000000 + performance.now());
var select = `<select id="s${ID4}" name="s${ID4}"></select>`;
ask = prompt('Enter the number of options needed');
qty = parseInt(ask, 10);
fst.insertAdjacentHTML('beforeend', select);
var sel = document.getElementById('s' + ID4);
for (let i = 0; i < qty; i++) {
var opt = document.createElement('option');
sel.add(opt);
}
break;
default:
break;
}
}
function addFieldset(e) {
if (e.target.id === 'addSet') {
var sets = formB.querySelectorAll('fieldset').length;
var fs = `
<fieldset id='s${sets}'>
<legend>${sets}</legend>
</fieldset>`;
formB.insertAdjacentHTML('beforeend', fs);
var rad = `
<input id='r${sets}' name='rad' class='rad' type='radio' value='${sets}'>
<label for='r${sets}'>${sets}</label>`;
ui.addSet.insertAdjacentHTML('beforebegin', rad);
}
}
<form id='ui'>
<fieldset id='set'>
<legend>Create Form</legend>
<select id='sel'>
<option>Pick a Field</option>
<option value='0'>Text Box</option>
<option value='1'>Text Area</option>
<option value='2'>Checkbox</option>
<option value='3'>Radio Group</option>
<option value='4'>Select</option>
</select>
<input id='r0' name='rad' class='rad' type='radio' value='0' checked>
<label for='r0'>0</label>
<input id='r1' name='rad' class='rad' type='radio' value='1'>
<label for='r1'>1</label>
<input id='r2' name='rad' class='rad' type='radio' value='2'>
<label for='r2'>2</label>
<input id='r3' name='rad' class='rad' type='radio' value='3'>
<label for='r3'>3</label>
<button id='addSet' type='button'>Add Fieldset</button>
</fieldset>
</form>
<form id='base'>
<fieldset id='s0'>
<legend>0</legend>
</fieldset>
<fieldset id='s1'>
<legend>1</legend>
</fieldset>
<fieldset id='s2'>
<legend>2</legend>
</fieldset>
<fieldset id='s3'>
<legend>3</legend>
</fieldset>
</form>
var counterText = 0;
var counterRadioButton = 0;
var counterCheckBox = 0;
var counterTextArea = 0;
var counter = 0;
function addAllInputs(divName, inputType){
var newdiv = document.createElement('div');
switch(inputType) {
case 'text':
newdiv.innerHTML = "Entry " +(counterText+1)+" <input type='text' name='myInputs[]'><br>";
counterText++;
break;
case 'radio':
newdiv.innerHTML = "Entry " +(counterRadioButton+1)+" <input type='radio' name='myRadioButtons[]'>";
counterRadioButton++;
break;
case 'checkbox':
newdiv.innerHTML = "Entry "+(counterCheckBox+1)+" <input type='checkbox' name='myCheckBoxes[]'>";
counterCheckBox++;
break;
case 'textarea':
newdiv.innerHTML = "Entry "+(counterTextArea+1)+" <textarea name='myTextAreas[]'>type here...</textarea>";
counterTextArea++;
break;
}
document.getElementById(divName).appendChild(newdiv);
}
function addSec(){
var newdiv = document.createElement('div');
var div = document.getElementById('dynamicInput').innerHTML;
newdiv.innerHTML = document.getElementById('dynamicInput').innerHTML;
document.body.appendChild(newdiv);
}
<HTML>
<HEAD>
<TITLE>Create Form</TITLE>
<link rel="stylesheet" type="text/css" href="login.css" />
<script type="text/javascript" src="createform.js"></script>
</HEAD>
<BODY>
<form method="POST">
<div id="dynamicInput">
<label for="fieldName">Name this field</label>
<input type="text" name="fieldName">
<br><br>
<SELECT name="element">
<OPTION value="text">Textbox</OPTION>
<OPTION value="radio">Radio</OPTION>
<OPTION value= "textarea">Text Area</option>
<OPTION value = "checkbox">Check Box</option>
</SELECT>
<input type="button" value="Add an option" onClick="addAllInputs('dynamicInput', document.forms[0].element.value);">
</div>
<br><br><br>
<input type = "button" value="Add another field" onClick = "addSec();">
<br><br>
</form>
</BODY>
</HTML>
you've missed an innerHTML.
I have been working for a school project lately and I have had problems with HTML and JavaScript. What I want to do is fill a "dropdownlist" values as soon as I change the value of the first "dropdownlist". From what I have tested, it looks like the function isn't being called at all. I just got into web developing and I don't really have many ideas about this. I would really appreciate it if someone took the time to look at it.
<html>
<head>
<script type="text/javascript">
function showViti(s1,s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "1"){
var optionArray = ["|","1|1","2|2","3|3"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
};
function showParalel(s3,s4){
var s3 = document.getElementById(s3);
var s4 = document.getElementById(s4);
s4.innerHTML = "";
if(!s3.value = "0"){
var optionArray1 = ["|","A1|A1","A2|A2","B1|B1","B2|B2"];
}
for(var option in optionArray1){
var pair = optionArray1[option].split("|");
var newOption1 = document.createElement("option");
newOption1.value = pair[0];
newOption1.innerHTML = pair[1];
s4.options.add(newOption1);
}
};
</script>
<body>
<img class="logo" alt="Logoja e FSHN" src="customLogo.png" width="25%">
<h3> Orari Mesimor | Fakulteti i Shkencave te Natyres </h3>
<form method="post">
<b>Dega:</b>
<select id="inputdega" name="inputdega" class="dropDownList" onchange="showViti(this.id, 'inputviti')">
<option value="0" selected>--zgjidh degen--</option>
<option value='1'> "Bachelor" ne "Teknologji Informacioni dhe Komunikimi"</option>
</select>
</br>
<b>Viti:</b>
<select id="inputviti" name="inputviti" class="dropDownList" onchange="showParalel(this.id,'inputparaleli')">
<option value="0" selected>--zgjidh vitin--</option>
</select>
</br>
<b>Paraleli:</b>
<select id="inputparaleli" name="Paraleli" class="dropDownList">
<option value="0" selected>--zgjidh paralelin--</option>
</select>
<input type="Submit" name="Submit" value="Afisho" onclick="afishoorarin()" style="vertical-align: middle; border: 1px solid #DDD; background-color: #FEFCFA; height: 30px;">
</form>
</body>
</head>
</html>
Hey your script has one little typo. i just changed one line from:
if(!s3.value = "0")
to :
if(!s3.value == "0")
<html>
<head>
<script type="text/javascript">
function showViti(s1,s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "1"){
var optionArray = ["|","1|1","2|2","3|3"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
};
function showParalel(s3,s4){
var s3 = document.getElementById(s3);
var s4 = document.getElementById(s4);
s4.innerHTML = "";
if(!s3.value == "0"){
var optionArray1 = ["|","A1|A1","A2|A2","B1|B1","B2|B2"];
}
for(var option in optionArray1){
var pair = optionArray1[option].split("|");
var newOption1 = document.createElement("option");
newOption1.value = pair[0];
newOption1.innerHTML = pair[1];
s4.options.add(newOption1);
}
};
</script>
<body>
<img class="logo" alt="Logoja e FSHN" src="customLogo.png" width="25%">
<h3> Orari Mesimor | Fakulteti i Shkencave te Natyres </h3>
<form method="post">
<b>Dega:</b> <select id="inputdega" name="inputdega" class="dropDownList" onchange="showViti(this.id, 'inputviti')">
<option value="0" selected>--zgjidh degen--</option>
<option value='1'> "Bachelor" ne "Teknologji Informacioni dhe Komunikimi"</option>
</select></br>
<b>Viti:</b> <select id="inputviti" name="inputviti" class="dropDownList" onchange="showParalel(this.id,'inputparaleli')">
<option value="0" selected>--zgjidh vitin--</option>
</select></br>
<b>Paraleli:</b> <select id="inputparaleli" name="Paraleli" class="dropDownList">
<option value="0" selected>--zgjidh paralelin--</option>
</select>
<input type="Submit" name="Submit" value="Afisho" onclick="afishoorarin()" style="vertical-align: middle; border: 1px solid #DDD; background-color: #FEFCFA; height: 30px;">
</form>
</body>
</head>
</html>
the select option will not update till i add the innerHTML again.
function myFunction() {
for (index = 0; index < array.length; ++index) {
var bAccount = array[index].id;
var selectban = document.getElementById(bAccount);
var selectaccount2 = document.getElementById("AccountToUse1");
var opt = document.createElement('option');
opt.value = selectban.value;
opt.innerHTML = selectban.value;
selectban.value = "test";
selectaccount2.appendChild(opt);
}
}
i am stepping thorugh multiple input fields and gathering the values, these are then added to a new option element. when i appendChild to the selectaccount2 which is the select element, this does not insert the value. any ideas?
<!-- Text input-->
<div id="details" style="display: none;">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="accountNumber">Account Number</label>
<div class="col-md-4">
<input id="accountNumber" name="accountNumber" type="text" placeholder="your game account number" class="form-control input-md" required="" onchange="myFunction()">
</div>
</div>
</div>
<div id="DetailsFooter" style="display: none;">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">details</label>
<div class="col-md-4">
<select id="AccountToUse" name="AccountToUse" type="text" placeholder="" required="">
</select>
</div>
</div>
</div>
<fieldset id="DetailsView" class="DetailsView">
<h2>Details Applicant 1</h2>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="Accounts">How many accounts do you have?</label>
<div class="col-md-4">
<select id="Accounts" name="Accounts" class="form-control" onchange="amountchanged()">
<option value="0">Please Select an Amount</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
<div id="DetailsContainer">
</div>
</fieldset>
<script>
var select = document.getElementById("Accounts"),
container = document.getElementById("DetailsContainer");
var array = [];
var accountToUse;
var footer;
var num = 0;
function changeId(nodes, n) {
for (var i = 0; i < nodes.length; i = i + 1) {
if (nodes[i].childNodes) {
changeId(nodes[i].childNodes, n);
}
//if id value is 'accountNumber', change it
if (nodes[i].id && /^ch$|^accountNumber$/i.test(nodes[i].id)) {
nodes[i].id += String(n);
array.push(nodes[i]);
}
}
}
function amountchanged() {
var amount = select.value,
obj = document.getElementById("details").cloneNode(true),
children = obj.childNodes;
footer = document.getElementById("DetailsFooter");
container.innerHTML = "";
var count;
num += 1;
obj.id = obj.id + num;
if (num < 16) {
changeId(children, num);
}
document.body.appendChild(obj);
for (count = 1; count <= amount; count++) {
var heading = "<h3>" + count + " Details</h3>"
container.innerHTML += heading;
container.innerHTML += obj.innerHTML;
}
accountToUse = footer.getElementsByTagName("select")[0];
accountToUse.id = 'AccountToUse1';
container.innerHTML += footer.innerHTML;
}
function myFunction() {
for (index = 0; index < array.length; ++index) {
var bAccount = array[index].id;
var select22 = document.getElementById(bAccount);
var selectaccount2 = document.getElementById("AccountToUse1");
var opt = document.createElement('option');
opt.value = select22.value;
opt.innerHTML = select22.value;
select.value = "test";
selectaccount2.appendChild(opt);
}
}
</script>
Although I've seen people recommend adding an option the way you have there, so presumably it works on many if not most browsers, the most robust, reliable way I've ever found is the Option constructor and the add method:
selectaccount2.options.add(new Option(selectban.value));
If you just provide the value (the first argument), the text and value will be the same. If you give two arguments, the first is the text and the second is the value.
Live copy:
var array = [{
id: "one"
}, {
id: "two"
}, {
id: "three"
}];
function myFunction() {
for (var index = 0; index < array.length; ++index) {
var bAccount = array[index].id;
var selectban = document.getElementById(bAccount);
var selectaccount2 = document.getElementById("AccountToUse1");
var opt = document.createElement('option');
opt.value = selectban.value;
opt.innerHTML = selectban.value;
selectban.value = "test";
selectaccount2.appendChild(opt);
}
}
myFunction();
<select id="AccountToUse1" size="4"></select>
<input type="hidden" id="one" value="uno">
<input type="hidden" id="two" value="due">
<input type="hidden" id="three" value="tre">
Side note: You're falling prey to The Horror of Implicit Globals: Declare index.
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