How can i add form elements through a button? - javascript

I am programming a quiz maker input form which is responsive to the users desired number of questions. These quizzes will be grouped by the students year and class, set up through a responsive menu read from a text file. This text file will be added to by the user by creating 'Topics' in the quizzes, and grouping them as such. I want to create a button at the bottom of the form which copies the input fields for 'question', 'answer1', 'answer2' and 'answer3'.
<html>
<head>
<title>Quiz Form</title>
<link rel=“stylesheet” href=“TRYstyle.css”>
</head>
<body>
<h3>Quiz form</h3>
<table>
<form onSubmit=“WriteToFile(this.txt)>
<tr>
<td>Year</td>
<td>
<select name="Year" id="schoolyear">
<option value="1">7</option>
<option value="2">8</option>
<option value="3">9</option>
<option value="4">10</option>
<option value="5">11</option>
<option value="6">12</option>
<option value="7">13</option>
</td>
</tr>
<tr>
<td>Class</td>
<td>
<select name=“group” id=“group”>
<option value="1">H</option>
<option value="2">E</option>
<option value="3">A</option>
<option value="4">R</option>
<option value="5">T</option>
</td>
</tr>
<tr>
<td>Topic</td>
<td><input type=“text” placeholder=“Topic” name=“topic” id=“topic” maxlength=“200”/></td>
</tr>
<tr>
<td>Title</td>
<td><input type=“text” placeholder=“Title” name=“title” id=“title” maxlength=“200”/></td>
</tr>
<tr>
<td>Question</td>
<td><input type=“text” placeholder=“Question” name=“question” id=“question” maxlength=“200”/></td>
</tr>
<tr>
<td>Answer</td>
<td><input type=“text” placeholder=“Answer” name=“answer1” id=“answer1” maxlength=“200”/></td>
</tr>
<tr>
<td>Answer</td>
<td><input type=“text” placeholder=“Answer” name=“answer2” id=“answer2” maxlength=“200”/></td>
</tr>
<tr>
<td>Answer</td>
<td><input type=“text” placeholder=“Answer” name=“answer3” id=“answer3” maxlength=“200”/></td>
</tr>
<td colspan="2">
<input type="submit" value="Submit">
</td>
</form>
</table>
<script>
function WriteToFile(passForm) {
set fso = CreateObject("Scripting.FileSystemObject");
set s = fso.CreateTextFile(“using theseee/this.txt", True);
var year = document.getElementById('year');
var group = document.getElementById('group');
var topic = document.getElementById('topic');
var title = document.getElementById('title');
var question = document.getElementById('question');
var option1 = document.getElementById('answer1');
var option2 = document.getElementById('answer2');
var option3 = document.getElementById('answer3');
s.writeline("Title: " + title);
s.writeline("Question: " + question);
s.writeline("Option1: " + answer1);
s.writeline(“Option2: " + answer2);
s.writeline("Option3: " + answer3);
s.writeline("-----------------------------");
s.Close();
}
</script>
</body>
</html>
Also, to store the various 'topics', would I need to create a text file dedicated to these considering the menu is responsive to this? Or can i read the first line, lets say, from each text file relevant and store them in the menu? What is the best way to go about doing this?
I am sorry if this seems very low level, but I am trying very hard to get the hang of all of this as I am new to it all.

Related

How to change TextArea validation based on dropdown

I need to perform validation on TextArea based on below scenario:
If Mobile is selected in the dropdown, only number should allow to enter in the TextArea.
If Email is selected in the dropdown, we can enter any character in the TextArea.
image snippet here
Below is my code to achieve above scenario. I have performed validation based on class name of Text Area. When I change dropdown value, I am changing the class name of Text Area.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function changeNotifyTypeValue(textboxControl)
{
textboxControl.value="";
if (textboxControl.className=="mobileValidation")
textboxControl.className="emailValidation";
else
textboxControl.className="mobileValidation";
}
$(function() {
$('.numberValidation').keyup(function() {
this.value = this.value.replace(/[^0-9,][.]?/g, '');
});
$('.emailValidation').keyup(function() {
//email validation
});
});
</script>
</head>
<body>
<table border="1" class="display"
id="NotificationTable">
<thead>
<tr style="background: #0086cd; color: #fff;">
<th>Update NotifyType</th>
<th>Update Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select
id="notifyTypeID0"
class="form-control" name="notifyType0" onchange="changeNotifyTypeValue(updateAddress0)" >
<option selected value=EMAIL>EMAIL</option>
<option value="mobile">Mobile</option>
</select>
</td>
<td>
<textarea name="address0" id="updateAddress0"
class="emailValidation">abc#gmail.com</textarea>
</td>
</tr>
<tr>
<td>
<select id="notifyTypeID1" class="form-control" name="notifyType1" onchange="changeNotifyTypeValue(updateAddress1)" >
<option value="EMAIL">EMAIL</option>
<option selected value="mobile">Mobile</option>
</select>
</td>
<td> <textarea name="address1" id="updateAddress1" class="numberValidation">9999999999</textarea> </td>
</tr>
</tbody>
</table>
</body>
</html>
Here is my doubt
I can see through inspect element, when I change dropdown value, the class name of text Area is being changed on run time. But, still validation is being perform based on old class name of text Area.
There are some issue with your <script>, you are trying to use pure javascript in jquery.
Once try this script and check
$(document).ready(function(){
$('textarea').keyup(function(){
if($(this).hasClass("mobileValidation")){
var cv = $(this).val();
$(this).val(cv.replace(/[^0-9,][.]?/g, ''));
} else if($(this).hasClass("emailValidation")){
//your email validation code;
}
});
});
The code is messed up with both javascript and jQuery. I'm providing javascript only solution. And classes are also mismatching (mobileValidation and numberValidation).
Here is the running code. You can run code snippet and check.
<html>
<head>
<script>
function changeNotifyTypeValue(textboxControl) {
textboxControl.value = '';
if (textboxControl.className == "mobileValidation")
textboxControl.className = "emailValidation";
else
textboxControl.className = "mobileValidation";
}
function validate(textboxControl) {
console.log(textboxControl.className);
if (textboxControl.className == "emailValidation") {
console.log('email');
} else {
console.log('number');
textboxControl.value = textboxControl.value.replace(/[^0-9,][.]?/g, '');
}
}
</script>
</head>
<body>
<table border="1" class="display" id="NotificationTable">
<thead>
<tr style="background: #0086cd; color: #fff;">
<th>Update NotifyType</th>
<th>Update Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="notifyTypeID0" class="form-control" name="notifyType0" onchange="changeNotifyTypeValue(updateAddress0)">
<option selected value=EMAIL>EMAIL</option>
<option value="mobile">Mobile</option>
</select>
</td>
<td>
<textarea name="address0" id="updateAddress0" class="emailValidation" onkeyup="validate(updateAddress0)">abc#gmail.com</textarea>
</td>
</tr>
<tr>
<td>
<select id=" notifyTypeID1" class="form-control" name="notifyType1" onchange="changeNotifyTypeValue(updateAddress1)">
<option value="EMAIL">EMAIL</option>
<option selected value="mobile">Mobile</option>
</select>
</td>
<td> <textarea name="address1" id="updateAddress1" class="mobileValidation" onkeyup="validate(updateAddress1)">9999999999</textarea> </td>
</tr>
</tbody>
</table>
</body>
</html>

How to clone a <tr> in a table with Javascript

I want to duplicate the second <tr> everytime I click button add, as it shows in here, I mean I want to whenever I click on the button add a new <tr> will be added that do the same thing as the previous one.
<form id="frm1" action="Calculate.html">
<table id= "myTable">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
<tr id= "rowToClone">
<td>
<select id= "products">
<option value="80">Product-A</option>
<option value="80">Product-B</option>
<option value="80">Product-C</option>
<option value="80">Product-D</option>
<option value="16">Product-E</option>
</select>
</td>
<td><input type="number" id="ndc" placeholder=""></td>
<td><p id="ndpc"></p></td>
<td><p id="pu"></p></td>
<td><p id="ptpp"></p></td>
</tr>
</table>
<input type="button" onclick="Calculate()" value="calculate">
<input type="button" onclick="AddSelect()" value="Add">
I want it to do the same whole thing, I tried but never got successful the second part I am stuck to
first part:
function Calculate() {
var e = document.getElementById("products");
var productValue = e.options[e.selectedIndex].value;
document.getElementById("ndpc").innerHTML = productValue;
document.getElementById("ndpc").value = productValue;
if (e.selectedIndex === 0){
document.getElementById("pu").value = 21.2;
}
else if (e.selectedIndex === 1) {
document.getElementById("pu").value = 25.7;
}
else if (e.selectedIndex === 2 || e.selectedIndex === 3 ) {
document.getElementById("pu").value = 14;
}
else {
document.getElementById("pu").value = 6;
}
var pu = document.getElementById("pu").value;
document.getElementById("pu").innerHTML = pu;
var ndc = document.getElementById("ndc").value;
var ndpc = document.getElementById("ndpc").value;
var Result = ndc * ndpc * pu;
document.getElementById("ptpp").innerHTML = Result;
};
the second part that I want to solve:
function AddSelect(){
var row = document.getElementbyId("rowToClone");
var table = document.getElementById("myTable");
var clone = row.cloneNode(true);
clone.id = "New";
function createRow() {
//I don't know what to do.
} };
I am new to Javascript obviously, please help me.
When using methods such as cloneNode(), or createElement() you'll need to append the new node to the DOM or it'll just float around aimlessly. Also, when cloning a node, keep in mind that if it and/or its children have any #ids, you'll end up having duplicated #ids which is super invalid. You should either change the #ids on all clones or do away with #ids on cloned nodes and use classes, tags, attributes, etc. instead.
In this demo, I replaced the form controls' #ids with name attribute since that's all you need to have in order to submit values from a <form> to a server (that and a <input type='submit'> button of course).
Demo
function addSelect() {
var T = document.getElementById('xTable');
var R = document.querySelectorAll('tbody .row')[0];
var C = R.cloneNode(true);
T.appendChild(C);
}
<form id="frm1" action="Calculate.html">
<table id="xTable">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tr class="row">
<td>
<select name="products">
<option value="80">Product-A</option>
<option value="80">Product-B</option>
<option value="80">Product-C</option>
<option value="80">Product-D</option>
<option value="16">Product-E</option>
</select>
</td>
<td><input type="number" name="ndc" placeholder=""></td>
<td>
<p id="ndpc"></p>
</td>
<td>
<p id="pu"></p>
</td>
<td>
<p id="ptpp"></p>
</td>
</tr>
</table>
<input type="button" onclick="addSelect()" value="Add">
</form>

I'm trying to create an html form to generate an url address based on input to a field

I am trying to create a small HTML document for my team to use to create fake devices for testing purposes in our program. We currently have a link to do this with but we have to manually change parts of it in the URL field before hitting enter to process it. I came up with the idea of creating this form so we can make sure that we are filling in all the elements of the URL correctly and then copy and paste the created URL into the browser. There are static parts of the address that we don't change and then there are values we update after the '=' sign. There are 4 different environments that we can use this in.
I admit it has been a while since I last worked in HTML so I've been trying to search forums and sites like W3School to find the segments of code that I think will serve the purpose I'm aiming for. The following code is where I have gotten so far but can't get it to work the way I've intended it to. If anyone can provide suggestions or feedback on what I missed or did wrong I'd appreciate it. Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Item birth generator</title>
<script>
function mySubmit() {
var addStart;
var addPart1 = "part1=";
var addPart2 = "&part2=";
var addPart3 = "&part3=";
var addPart4 = "&part4=";
var addPart5 = "&part5=";
var addPart6 = "&part6=";
var addPart7 = "&part7=";
var addPart8 = "&part8=";
var myChoice = "choice";
if (myChoice.value == "choice1")
{addStart="https://address1?";}
else if (myChoice.value == "choice2")
{addStart="https://address2?";}
else if (myChoice.value == "choice3")
{addStart="https://address3?";}
else (myChoice.value == "choice4")
{addStart="https://address4?";}
var address = addStart.concat(addPart1, "mInput1", addPart2, "mInput2", addPart3, "mInput3", addPart4, "mInput4", addPart5, "mInput5", addPart6, "mInput6", addPart7, "mInput7", addPart8, "mInput8");
document.getElementById("demo").innerHTML = address;
}
</script>
</head>
<body>
<font> <H3>Please fill in the appropriate fields and then click Generate to create a url for an item in the chosen environment.</H3></font>
<form target="_self" id="demo" name="item" method="post" onSubmit="return checkValue();">
<input type="radio" name="choice" id="ch1" value="choice1" checked> Choice 1 <input type="radio" name ="choice" id="ch2" value="choice2"> Choice 2 <input type="radio" name="choice" id="ch3" value="choice3"> Choice 3 <input type="radio" name ="choice" id="ch4" value="choice4"> Choice 4
<br><br>
<table>
<tbody>
<tr>
<td>Item Part 1</td>
<td><input type="text" name="mInput1" maxlength="13"></td>
</tr>
<tr>
<td>Item Part 2</td>
<td><input type="text" name="mInput2"></td>
</tr>
<tr>
<td>Item Part 3</td>
<td><input type="text" name="mInput3"></td>
</tr>
<tr>
<td>Item Part 4</td>
<td><input type="text" name="mInput4"></td>
<tr>
<td>Item Part 5</td>
<td><input type="text" name="mInput5"></td>
</tr>
<tr>
<td>Item Part 6</td>
<td><input type="text" name="mInput6"></td>
</tr>
<tr>
<td>Item Part 7</td>
<td><input type="text" name="mInput7"></td>
</tr>
<tr>
<td>Item Part 8</td>
<td><input type="text" name="mInput8"></td>
</tr>
<tr>
</tr>
<tr>
<td><input type="submit" value="Generate" onclick="mySubmit()"></td>
</tr>
</tbody>
</table>
<br>
<input type="text" size="250" name="address" value=''>
</form>
</body>
</html>
There is an error with this line:
var s.address = s.addStart.concat(addPart1, mInput1, addPart2, mInput2, addPart3, mInput3, addPart4, mInput4, addPart5, mInput5, addPart6, mInput6, addPart7, mInput7, addPart8, mInput8);
Verify what you are using is valid by testing the variables (output with a console.log or an alert) and check the command syntax. :)

jquery/javascript: add to array in case tr has certain class

I have a dynamic html table:
<table>
<tbody>
<tr>
<td>Name</td>
<td>City</td>
</tr>
<tr class="new" id="item1">
<td><input class="names" value="John Smith" type="hidden">John Smith</td>
<td><input class="cities" value="London" type="hidden">London</td>
</tr>
<tr class="normal" id="item2">
<td><input class="names" value="Regina Mills" type="hidden">Regina Mills</td>
<td><input class="cities" value="Berlin" type="hidden">Berlin</td>
</tr>
<tr class="normal" id="item3">
<td><input class="names" value="Marcus Bell" type="hidden">Marcus Bell</td>
<td><input class="cities" value="Liverpool" type="hidden">Liverpool</td>
</tr>
</tr>
</tbody>
</table>
From my js file I'm storing the information in this way:
var arrayNames = [];
$(".names").each(function(){
arrayNames.push($(this).val());
})
var arrayCities = [];
$(".cities").each(function(){
arrayCities.push($(this).val());
})
params += '&names='+arrayNames;
params += '&cities='+arrayCities;
With this I am getting in my php:
$_REQUEST['names']
: string = John Smith,Regina Mills,Marcus Bell
$_REQUEST['cities']
: string = London,Berlin,Liverpool
But I only need in the $_REQUESTs the values when the class in the table tr's is "new"
How can I do that?
Thanks!
You could try
$(".names").each(function(){
if ($( this ).parent().attr( "class" ) == "new")
arrayNames.push($(this).val());
})
Just target the .names within .new. You can use map() to get the values:
var arrayNames = $('.new .names').map(function() { return this.value; }).get();
.. and do the same thing for .cities

getting and using textbox text and changing its color by html select box

function Start(){
var headerr = document.getElementById("pageh").value;
var hcolor = document.getElementById("hcolor").value;
var hsize = document.getElementById("hsize").value;
document.body.innerHTML = "";
}
That's the JS code for taking the value of the textbox and the select boxes.
<tr>
<td>page header</td>
<td>
<input type="text" id="pageh" /></td>
</tr>
<tr>
<td>Header color:</td>
<td>
<select id="hcolor">
<option>red</option>
<option>purple</option>
<option>gray</option>
</select></td>
</tr>
<tr>
<td>Header size</td>
<td>
<select id="hsize">
<option>small</option>
<option>normal</option>
<option>big</option>
</select></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Send" onclick="Start()" /><input type="reset" value="Clear" /></td>
</tr>
And the HTML code for the textbox and the select boxes.
So what can I do for posting the text and manipulating its color and size?
I thought about using document.write(""headerr""); but it doesn't seem to work.
ETA JSFiddle: http://jsfiddle.net/7LNMn/
Thank you!!
function Start(){
var headerr = document.getElementById("pageh").value;
var hcolor = document.getElementById("hcolor").value;
var hsize = document.getElementById("hsize").value;
var g = document.getElementById("header"); // var g will store document.getElementById("header") so, i don't have to write much whereas header can be changed by the element's id e.g. header of website!
g.style.background = hcolor; // here g will get the element and style its bg
g.style.fontSize = hsize; // here its fontSize
// and I dont know what to do with pageh variable!
}

Categories