We Keep Coding

HTML - Input text pattern/required attributes conflict with submission

This simple form is part of a larger web app I have created. Both the required attributes and the pattern attributes only work intermittently. Changing the event listener to "submit" rather than "click" makes the form validation work properly, but then I get a blank page when I submit with the proper input formatting.
var v = "userForm"
document.getElementById("clockIn").addEventListener("click", addLine); //CHANGE TO CLICK FOR WORKING PAGE BUT PATTERN WONT WORK
function addLine() {
//e.preventDefault();
var firstName = document.getElementById("fname").value;
var lastName = document.getElementById("lname").value;
var jobNumber = document.getElementById("jnum").value;
var process = document.querySelector('input[name="operation"]:checked').value;
var comment = document.getElementById("comment").value;
var timeIn = new Date().toLocaleString();
var info = [firstName, lastName, jobNumber, process, timeIn, comment];
google.script.run.addEntry(info);
document.getElementById("fname").value = "";
document.getElementById("lname").value = "";
document.getElementById("jnum").value = "";
document.getElementById("comment").value = "";
document.querySelector('input[name="operation"]:checked').checked = false;
alert("Submitted");
}
function addEntry(info) {
var ssid = "1E81r5Xy**********************W1o4Q";
var ss = SpreadsheetApp.openById(ssid);
var oj = ss.getSheetByName("Open Jobs");
var FileIterator = DriveApp.getFilesByName("Drawings & Links");
while (FileIterator.hasNext()) {
var file = FileIterator.next();
if (file.getName() == "Drawings & Links") {
// var Sheet = SpreadsheetApp.open(file);
var dlid = file.getId();
}
}
var drawingLinks = SpreadsheetApp.openById(dlid);
var dl = drawingLinks.getSheetByName("Sheet1");
Logger.log(dlid)
oj.appendRow(info);
}
<form id="inputForm">
<h2 class="subHead">
Enter Basic Information
</h2>
<label for="fname" class="form">First name:</label><br><br>
<input type="text" id="fname" name="fname" size="25" style="font-size:25px;" placeholder="John" required><br><br>
<label for="lname" class="form">Last name:</label><br><br>
<input type="text" id="lname" name="lname" size="25" style="font-size:25px;" placeholder="Doe" required><br><br>
<label for="jnum" class="form">Job number:</label><br><br>
<input type="text" id="jnum" name="jnum" size="25" style="font-size:25px;" pattern="[A-Z]-[0-9]{4}" placeholder="A-1234" required><br>
<h2 class="subHead">
Select Operation
</h2>
<div>
<label for="cut" class="form">Cut</label>
<input type="radio" id="cut" name="operation" value="cut" required><br><br>
<label for="drill" class="form">Drill</label>
<input type="radio" id="drill" name="operation" value="drill" required><br><br>
<label for="fitup" class="form">Fit Up</label>
<input type="radio" id="fitup" name="operation" value="fit up" required><br><br>
<label for="weld" class="form">Weld</label>
<input type="radio" id="weld" name="operation" value="weld" required><br>
</div>
<h2 class="subHead">
Enter Comments
</h2>
<input type="text" id="comment" size="25" style="font-size:25px;" placeholder="Optional"><br>
<br>
<input type="submit" id="clockIn" class="button" value="Clock In">
</form>
Thanks for the help.
I think I have narrowed the problem down to something to do with the event listener. My thought is that when the "click" event is used, the function runs before the fields are validated by the browser. Yet, I just get a blank page if I use the "submit" event. The function "addEntry" doesn't appear to run; the logged data doesn't appear. Same goes for "addLine" when I add an alert. I have isolated the regex code and verified it works as expected.
Edit: I found that when I remove the event listener on the submit button and add an onsubmit (onsubmit="addLine()") attribute to the form, the alert in "addLine" appears. The "Submitted" alert also appears. Still a blank page after.

Your validation fails but that is outside the scope of the question as I see it since you need to check the actual values before you let it submit and probably need a preventDefault() on the form if any fail.
You get an error because you cannot filter by :checked unless you then determine if that is null OR filter it after you get the nodeList.
Here I show a couple of ways to handle the radio buttons; up to you to determine which suits you.
var v = "userForm"
document.getElementById("clockIn").addEventListener("click", addLine); //CHANGE TO CLICK FOR WORKING PAGE BUT PATTERN WONT WORK
function addLine() {
//e.preventDefault();
var firstName = document.getElementById("fname").value;
var lastName = document.getElementById("lname").value;
var jobNumber = document.getElementById("jnum").value;
//demonstrate a few ways to hanlde the radio buttons:
const procOne = document.querySelector('input[name="operation"]:checked');
console.log(!!procOne ? procOne.value : procOne, typeof procOne); // null and object if none are checked
let processValue = procOne === null && typeof procOne === "object" ? "" : procOne.value;
// querySelectorAll to get all of them so we can filter the list
const processAll = document.querySelectorAll('input[name="operation"]');
// creates an array like object of the nodelist; then filters it for checked ones
const checkProcess = [...processAll].filter(item => item.checked);
console.log("How many?:", processAll.length);
console.log("How many checked?:", checkProcess.length);
console.log(checkProcess.length ? checkProcess.value : "nothing");
// anther way to get value:
processValue = checkProcess.length ? checkProcess.value : "nothing"
if (checkProcess.length !== 0) { //Test if something was checked
console.log(checkProcess.value); // the value of the checked.
} else {
console.log('Nothing checked'); // nothing was checked.
}
var comment = document.getElementById("comment").value;
var timeIn = new Date().toLocaleString();
let process = processValue;
var info = [firstName, lastName, jobNumber, process, timeIn, comment];
//ccommented out as google is not defined
//google.script.run.addEntry(info);
// hitting the DOM again is not a great thing here but left as not part of the question/issue
document.getElementById("fname").value = "";
document.getElementById("lname").value = "";
document.getElementById("jnum").value = "";
document.getElementById("comment").value = "";
// cannot filter by :checked if none are so check first and set to false
if (procOne != null) procOne.checked = false;
alert("Submitted");
}
function addEntry(info) {
var ssid = "1E81r5Xy**********************W1o4Q";
var ss = SpreadsheetApp.openById(ssid);
var oj = ss.getSheetByName("Open Jobs");
var FileIterator = DriveApp.getFilesByName("Drawings & Links");
while (FileIterator.hasNext()) {
var file = FileIterator.next();
if (file.getName() == "Drawings & Links") {
// var Sheet = SpreadsheetApp.open(file);
var dlid = file.getId();
}
}
var drawingLinks = SpreadsheetApp.openById(dlid);
var dl = drawingLinks.getSheetByName("Sheet1");
Logger.log(dlid)
oj.appendRow(info);
}
<form id="inputForm">
<h2 class="subHead">
Enter Basic Information
</h2>
<label for="fname" class="form">First name:</label><br><br>
<input type="text" id="fname" name="fname" size="25" style="font-size:25px;" placeholder="John" required><br><br>
<label for="lname" class="form">Last name:</label><br><br>
<input type="text" id="lname" name="lname" size="25" style="font-size:25px;" placeholder="Doe" required><br><br>
<label for="jnum" class="form">Job number:</label><br><br>
<input type="text" id="jnum" name="jnum" size="25" style="font-size:25px;" pattern="[A-Z]-[0-9]{4}" placeholder="A-1234" required><br>
<h2 class="subHead">
Select Operation
</h2>
<div>
<label for="cut" class="form">Cut</label>
<input type="radio" id="cut" name="operation" value="cut" required><br><br>
<label for="drill" class="form">Drill</label>
<input type="radio" id="drill" name="operation" value="drill" required><br><br>
<label for="fitup" class="form">Fit Up</label>
<input type="radio" id="fitup" name="operation" value="fit up" required><br><br>
<label for="weld" class="form">Weld</label>
<input type="radio" id="weld" name="operation" value="weld" required><br>
</div>
<h2 class="subHead">
Enter Comments
</h2>
<input type="text" id="comment" size="25" style="font-size:25px;" placeholder="Optional"><br>
<br>
<input type="submit" id="clockIn" class="button" value="Clock In">
</form>

Combine two textbox value into other textbox in lowercase with dash

I have two text type inputs. I want to convert them into one textbox(Lowercase with dash) while typing just like below.
<input type="text" name="first">
<input type="text" name="last">
I want combine this two text box into another textbox
Example: Nikhil Patel to nikhil-patel
I am trying to combine below inputs but can't.
function conv(){
var title, author;
title = document.getElementById("title").value;
author = document.getElementById("author").value;
/*converting to LowerCase*/
title = String.toLowerCase(title);
author = String.toLowerCase(author);
var out = title + "-" + author;
document.getElementById("output").value = output;
}
<div class="form-group">
<label>Title :</label>
<input class="form-control" type="text" name="title" id="title" />
</div>
<div class="form-group">
<label>Author :</label>
<input class="form-control" type="text" name="author" id="author" />
</div>
<div class="form-group">
<label>Output :</label>
<input class="form-control" type="text" name="output" id="output"/>
</div>
Output is not printing automatically

Try This if you want like this...
var input = $('[name="first"],[name="last"]'),
input1 = $('[name="first"]'),
input2 = $('[name="last"]'),
input3 = $('[name="final"]');
input.change(function () {
input3.val(input1.val() + ' - ' + input2.val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" name="first" id="1" value="">
<input type="text" name="last" id="2" value="">
<input type="text" name="final" id="3" value="" readonly>

<HTML>
<HEAD>
<SCRIPT>
function conv(){
var first, second;
first = document.getElementById("first").value;
second = document.getElementById("second").value;
/*converting to LowerCase*/
first = String.toLowerCase(first);
second = String.toLowerCase(second);
var out = first + "-" + second;
document.getElementById("out").value = out;
}
</SCRIPT>
</HEAD>
<BODY>
<input type="text" name = "first" id="first" onkeyup = 'conv()'/>
<input type="text" name = "second" id ="second" onkeyup = 'conv()'/>
<input type="text" name = "out" id="out"/>
</BODY>
</HTML>
this is just a sample with 3 text boxes where
first two boxes will be for input
and third will auto populate using the javascript
I hope it'll help you. All is did was to add extra id's.

How do i get a send button to only submit and write to its own inputField?

I'm a beginner and I'm now stuck trying to figure out two things for the below code:
How do I code so that each of the send buttons only connects to its own input field?
How do I code so that each new text input overwrites the previous?
My code:
<h1>Data input</h1>
<input type="text" placeholder="Last name" id="inputField1" name="lastName" required>
<input type="button" value="Send" id="myButton1">
<br>
<br>
<input type="text" placeholder="First name" id="inputField2" name="firstName" required>
<input type="button" value="Send" id="myButton2">
<br>
<br>
<p id="lastName">Last name</p>
<p id="firstName">First name</p>
<script>
var b1=document.getElementById("myButton1")
b1.addEventListener("click", handleClick);
var b2=document.getElementById("myButton2")
b2.addEventListener("click", handleClick);
function handleClick(){
var i=document.getElementById("inputField1");
var iValue=i.value;
var d=document.getElementById("lastName");
var oldText=d.innerText;
var newText=oldText+"\n"+iValue;
d.innerText=newText;
var k=document.getElementById("inputField2");
var kValue=k.value;
var f=document.getElementById("firstName");
var oldText=f.innerText;
var newText=oldText+"\n"+kValue;
f.innerText=newText;
}

Here is a solution that sends a 1 or a 2 to the handleClick function as a parameter depending on which button you click. It then gets the value of the input that matches the number, checks to make see if it is empty, and outputs the name to the correct paragraph if it isn't and an error message if it is. Let me know if you have any problems with it.
var b1 = document.getElementById("myButton1");
b1.addEventListener("click", () => handleClick("1"));
var b2 = document.getElementById("myButton2");
b2.addEventListener("click", () => handleClick("2"));
function handleClick(iNum){
var i = document.getElementById("inputField" + iNum);
var iValue = i.value;
var d = document.getElementById("name" + iNum);
if (iValue != "") {
var pText = (iNum == "1" ? "Last" : "First");
var newText = pText + " name: " + iValue;
d.textContent = newText;
} else {
d.textContent = "Please enter a name!";
}
}
<h1>Data input</h1>
<input type="text" placeholder="Last name" id="inputField1" name="lastName" required>
<input type="button" value="Send" id="myButton1">
<br>
<br>
<input type="text" placeholder="First name" id="inputField2" name="firstName" required>
<input type="button" value="Send" id="myButton2">
<br>
<br>
<p id="name1"></p>
<p id="name2"></p>

Not really sure what's going on here, but usually you have to access the input field via the event: event.target.value (just put event as a parameter)

inline styling in js not working for new window

I am trying to have a function validate an email address as well as take all the input from within a form tag from the html input. I am trying to create a resume within a new window. Ie; enter name, address, career objectives, etc.
I have been working on this function for quite some time, using different methods.
//html
<!DOCTYPE html>
<html>
<head>
<title>Web 115 Final Project</title>
</head>
<body>
<script src="projectJS.js"></script>
<form id = "myForm">
<label for="name">Enter Your Full Name</label><br>
<input type = "text" id="name" ><br><br>
<label for="address">Enter Your Address</label><br>
<input type = "text" id="address" ><br><br>
<label for="phone">Enter Your Phone Number</label><br>
<input type = "text" id="phone" ><br><br>
<label for="email">Enter Your Email Address</label><br>
<input type = "text" id="email" ><br><br>
<label for="objectives">Enter Your Career Objectives</label><br>
<textarea rows="4" cols="50" id="objectives"></textarea><br><br>
<label for="personalInfo">Enter Your Personal Information</label><br>
<textarea rows="4" cols="50" id="personalInfo"></textarea><br><br>
<label for="education">Enter Your Educational Background</label><br>
<textarea rows="4" cols="50" id="education"></textarea><br><br>
<label for="employment1">Enter Your Most Recent Employment Start/End Date</label><br>
<input type="date" id="employment1"><br><br>
<label for="description1">Describe This Employment Experience</label><br>
<textarea rows="4" cols="50" id="description1"></textarea><br><br>
<label for="employment2">Enter Your Second Most Recent Employment Start/End Date</label><br>
<input type="date" id="employment2"><br><br>
<label for="description2">Describe This Employment Experience</label><br>
<textarea rows="4" cols="50" id="description2"></textarea><br><br>
<label for="employment3">Enter Your Third Most Recent Employment Start/End Date</label><br>
<input type="date" id="employment3"><br><br>
<label for="description3">Describe This Employment Experience</label><br>
<textarea rows="4" cols="50" id="description3"></textarea><br><br>
<label for="employment4">Enter Your Forth Most Recent Employment Start/End Date</label><br>
<input type="date" id="employment4"><br><br>
<label for="description4">Describe This Employment Experience</label><br>
<textarea rows="4" cols="50" id="description4"></textarea><br><br>
<label for="references">Enter Your Business References</label><br>
<textarea rows="4" cols="50" id="references"></textarea><br><br>
<input type="button" onclick="validateEmail()" value="Create Resume">
</form>
</body>
</html>
//js
var elemH1 = document.createElement("h1");
elemH1.style.color = "red";
elemH1.style.fontFamily = "tahoma";
elemH1.style.textAlign = "center";
elemH1.innerText = "Kent Butler";
document.body.appendChild(elemH1);
var elemH2 = document.createElement("h2");
elemH2.style.fontFamily = "garamond";
elemH2.style.color = "red";
elemH2.style.fontStyle = "italic";
elemH2.style.textAlign = "center";
elemH2.innerText = "WEB 115.0001";
document.body.appendChild(elemH2);
var title = document.createElement("h1");
title.style.textAlign = "center";
title.innerText = "Build Your Resume";
document.body.appendChild(title);
function validateEmail(email) {
var name = document.getElementById('name').value;
var address = document.getElementById('address').value;
var phone = document.getElementById('phone').value;
var email = document.getElementById('email').value; //get email id
//var personalInfo = document.getElementById('personalInfo').value;
var objectives = document.getElementById('objectives').value;
objectives.style.textAlign = "right";
//var education = document.getElementById('education').value;
var re = /^[^\s#]+#[^\s#]+\.[^\s#]+$/;
var testRe = re.test(email);
testRe;
if (testRe != true) {
window.alert("Invalid Email Address. Please Reenter");
}
else {
var myText = ('<html>\n<head>\n<title>Resume</title>\n</head>\n<body>\n');
myText += (name + "<br>" + address + " " + phone + " / " + email + "<br><br>");
myText += ("CAREER OBJECTIVES" + objectives)
myText += ("</body>\n</html>");
var openWindow = window.open('');
openWindow.document.write(myText);
}
}
This is not the finished product. I have a number of other fields to create, but that is not going to be an issue. I need to be able to style the new document ie align text right. The resume product should have "CAREER OBJECTIVES" aligned left, and then the input from the html aligned right. The "objectives.style.textAlign = "right";" isnt working (line 28 in the JS)

I think you want:
var objectives = document.getElementById('objectives');
rather than the value

can not add two multiplications result in text box in html

sir
i have 7 text boxes .1st two take values from user and display the multiplication result on 3rd text box when it clicked.4th and 5th textboxes also take values and display the multiplication result in 6th text box when it clicked.now 7th textbox will display the addition result when it clicked.7th textbox takes the values from 3rd and 6th textbox.
my problem is that i can not do the addition and cant display the result in 7th text box in html and jscript.plz help me.....i am attached the code...
<html>
<script>
function getText1(){
var in1=document.getElementById('in1').value;
var in2=document.getElementById('in2').value;
var tot1=parseInt(in1)*parseInt(in2);
document.getElementById('tot1').value=tot1;
}
function getText2(){
var in1=document.getElementById('in3').value;
var in2=document.getElementById('in4').value;
var tot2=parseInt(in1)*parseInt(in2);
document.getElementById('tot2').value=tot2;
}
function gt1(){
var in1=document.getElementById('tot1').value;
var in2=document.getElementById('tot2').value;
var gt1=parseInt(in1)+parseInt(in2);
document.getElementById('gt').value = gt1;
</script>
<form>
<input type="text"id="in1"/>
<input type="text" id="in2"/>
<input type="text" onclick="getText1()" id="tot1"/>
<br>
<input type="text"id="in3"/>
<input type="text" id="in4"/>
<input type="text" onclick="getText2()" id="tot2"/>
<br>
<input type="text" onclick="gt1()" id="gt1"/>
</form>
</html>

<html>
<script>
function getText1(){
var in1=document.getElementById('in1').value;
var in2=document.getElementById('in2').value;
var tot1=parseInt(in1)*parseInt(in2);
document.getElementById('tot1').value=tot1;
}
function getText2(){
var in1=document.getElementById('in3').value;
var in2=document.getElementById('in4').value;
var tot2=parseInt(in1)*parseInt(in2);
document.getElementById('tot2').value=tot2;
}
function gt(){
var in1=document.getElementById('tot1').value;
var in2=document.getElementById('tot2').value;
var gt1=parseInt(in1)+parseInt(in2);
document.getElementById('gt1').value = gt1;
}
</script>
<form>
<input type="text"id="in1"/>
<input type="text" id="in2"/>
<input type="text" onclick="getText1()" id="tot1"/>
<br>
<input type="text"id="in3"/>
<input type="text" id="in4"/>
<input type="text" onclick="getText2()" id="tot2"/>
<br>
<input type="text" onclick="gt()" id="gt1"/>
</form>
</html>
use this code it is working. and compare with own code. thanks..

There are several problem
1). Element id is one line is incorrect. It should be:
document.getElementById('gt1').value = gt1;
2). result variable is undefined. It should be:
if (!isNaN(gt1))
3). onclick="gt1()" will not work (because there is id with the same name gt1). Use, for example:
function getText3() { ... }
and
<input type="text" onclick="getText3()" id="gt1"/>
Fiddle.
Update. Ok, I didn't notice that you want multiplication, but somewhy had written + in getText1() and getText2() functions. Then you should also replace these two + with *:
Multiplication fiddle.

You dont have element with id 'gt'.
Change last line of code to this:
document.getElementById('gt1').value = gt1;

You have not defined 'result' variable
and in 'gt1()' :
document.getElementById('gt').value = gt1;
1- There is no 'gt' element in the page
2- 'gt1' should renamed to 'result'
and at the end code will be:
<script language="javascript" type="text/javascript">
function getText1() {
var in1 = document.getElementById('in1').value;
var in2 = document.getElementById('in2').value;
var tot1 = parseInt(in1) + parseInt(in2);
document.getElementById('tot1').value = tot1;
}
function getText2() {
var in1 = document.getElementById('in3').value;
var in2 = document.getElementById('in4').value;
var tot2 = parseInt(in1) + parseInt(in2);
document.getElementById('tot2').value = tot2;
}
function gt1() {
var in1 = document.getElementById('tot1').value;
var in2 = document.getElementById('tot2').value;
var result = parseInt(in1) + parseInt(in2);
if (!isNaN(result)) {
document.getElementById('gt1').value = result;
}
//document.getElementById('gt1').value=gt1;
}
</script>
this is work properly.

Check the below code.
<script >
function getext3(){
txt1 = document.getElementById("text1").value;
txt2 = document.getElementById("text2").value;
document.getElementById("text3").value = parseInt(txt1)*parseInt(txt2);
}
function getext6(){
txt1 = document.getElementById("text4").value;
txt2 = document.getElementById("text5").value;
document.getElementById("text6").value = parseInt(txt1)*parseInt(txt2);
}
function getext7(){
txt1 = document.getElementById("text3").value;
txt2 = document.getElementById("text6").value;
document.getElementById("text7").value = parseInt(txt1)+parseInt(txt2);
}
</script>
Text1 : <input type="text" id="text1" value="5"> <br/>
Text2 : <input type="text" id="text2" value="2"> <br/>
Text3 : <input type="text" id="text3" value="" onclick="getext3()"> <br/>
Text4 : <input type="text" id="text4" value="7"> <br/>
Text5 : <input type="text" id="text5" value="10"> <br/>
Text6 : <input type="text" id="text6" value="" onclick="getext6()"> <br/>
Text7 : <input type="text" id="text7" value="" onclick="getext7()"> <br/>