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>

How do I add Text before my answer in the text box using setAttribute but only after the resullt has been printed

I want it to read the-number-that-has-been-computed) where the-number-that-has-been-computed is the result of the addition of the first two text boxes( I am also using window.onload that is why my script is in the head of the file.
function setUpEvents() {
function add_number() {
var first_number = parseInt(document.getElementById("tb1").value);
var second_number = parseInt(document.getElementById("tb2").value);
var result = first_number + second_number;
document.getElementById("tb3").value = result;
};
}
window.onload = function() {
setUpEvents();
};
<div>
<h1>Add two number using text box as input using javascript</h1>
</div>
Enter First Number : <br>
<input type="text" id="tb1" name="TextBox1">
<br> Enter Second Number : <br>
<input type="text" id="tb2" name="TextBox2">
<br> Result : <br>
<input type="text" id="tb3" name="TextBox3">
<br>
<input type="button" name="b1" value="GO" onclick="add_number()">

Just remove the setUpEvents to not have the function out of scope for the inline event handler
Also remove the inline event handler
Use eventListeners instead. I changed the name to id for the button
function add_number() {
var first_number = parseInt(document.getElementById("tb1").value);
var second_number = parseInt(document.getElementById("tb2").value);
var result = first_number + second_number;
document.getElementById("tb3").value = "The-number-that-has-been-computed is "+ result;
};
window.addEventListener("load", function() {
document.getElementById("b1").addEventListener("click", add_number);
});
input { width: 300px }
<div>
<h1>Add two number using text box as input using javascript</h1>
</div>
Enter First Number : <br>
<input type="text" id="tb1" name="TextBox1">
<br> Enter Second Number : <br>
<input type="text" id="tb2" name="TextBox2">
<br> Result : <br>
<input type="text" id="tb3" name="TextBox3">
<br>
<input type="button" id="b1" value="GO" />

Calling function to work

I'm new to JavaScript and I need to use the string method all in one html page. I need to make sure user input the data, but I can't get my function calling to work. Any idea? I finished all of it, but just to make sure that one button submit can validate all string method function perfectly.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8"/>
<h1> Try 1</h1>
<p>Please enter all the field below.</p>
</head>
<body>
<form id="myForm">
<fieldset>
<legend>String Methods</legend>
<p>Using concat()</p>
<input type="text" id="word1" size="25" placeholder="Enter first word/sentences."></br>
<input type="text" id="word2" size="25" placeholder="Enter second word/sentences."></br></br>
<p>Using substr()</p>
<input type="text" id="subtr" size="25" placeholder="Please enter word/sentences."></br></br>
<p>Using lastIndexOf()</p>
<input type="text" id="lastindex" size="25" placeholder="Please enter word/sentences."></br>
<input type="text" id="srch" size="25" placeholder="Word that you want to search."></br></br>
<p>Using toLowerCase()</p>
<input type="text" id="lcase" size="35" placeholder="Please enter Uppercase word/sentences."></br></br>
<p>Using toUpperCase()</p>
<input type="text" id="ucase" size="35" placeholder="Please enter Lowercase word/sentences."></br></br>
<p>Using match()</p>
<input type="text" id="match" size="25" placeholder="Please enter word/sentences."></br>
<input type="text" id="match1" size="25" placeholder="Words that you want to find match."></br></br>
<p>Using replace()</p>
<p id="phrase"><i>The voice in my head shouts out through the world like a breath.</i></p>
<input type="text" id="replce" size="35" placeholder="Word you want to change in sentence above."></br>
<input type="text" id="replce2" size="25" placeholder="Word you want to change with."></br></br>
<p>Using split()</p>
<input type="text" id="splt" size="25" placeholder="Please enter word/sentences."></br></br>
<p>Using charCodeAt()</p>
<input type="text" id="cca" size="25" placeholder="Please enter word/sentences."></br></br>
<p>Using slice()</p>
<input type="text" id="slce" size="25" placeholder="Please enter word/sentences."></br></br>
<input type="submit" value="Submit" id="btnSubmit" onclick="validateEverything()">
</fieldset>
</form>
<div id="answers"></div>
</body>
</html>
This is my JavaScript code:
<script>
function validateEverything(){
var wo1 = document.getElementById("word1").value;
var wo2 = document.getElementById("word2").value;
var sub = document.getElementById("subtr").value;
var lin = document.getElementById("lastindex").value;
var sea = document.getElementById("srch").value;
var lca = document.getElementById("lcase").value;
var uca = document.getElementById("ucase").value;
var mat = document.getElementById("match").value;
var ma1 = document.getElementById("match1").value;
var phr = document.getElementById("phrase").value;
var rep = document.getElementById("replce").value;
var re1 = document.getElementById("replce1").value;
var ph1 = document.getElementById("phrase1").value;
var spl = document.getElementById("splt").value;
var cha = document.getElementById("cca").value;
var slc = document.getElementById("slce").value;
var ans = document.getElementById("answers");
//Concat
var con = wo1.concat(" "+wo2);
//Subtr
var subr = sub.substring(1, 7);
//lastindexof
var n = lin.lastIndexOf(sea);
//toLowerCase
var lc = lca.toLowerCase();
//toUpperCase
var uc = uca.toUpperCase();
//match
var mc = mat.match(ma1);
//replace
var rp = phr.replace(replce, replce1);
//split
var sp = sp1.split(" ")
//charCodeAt
var cc = cha.charCodeAt(0);
//slice
var sl = slc.slice(1, 5);
show();
}
function show(){
ans.innerHTML = answersHTML();
}
//answers
function answersHTML(){
var ans = document.getElementById("answers").innerHTML;
document.write(con);
document.write(subr);
document.write(n);
document.write(lc);
document.write(uc);
document.write(mc);
document.write(rp);
document.write(sp);
document.write(cc);
document.write(sl);
}
</script>

There are multiple issues in your snippet.In some case there is no DOM element present but still you are doing document.getElementById();
Also how answerHTML will know about con,sub,.... ? They are local to validateEverything function & you are not passing it to answerHTML function
You are using input type = "submit". You need to use event.preventDefault() to stop submission. You are not submitting anything. Rather use input type = "button"
There is also no use of show() function
Everytime you are using document.write, so it will delete anything which is previously written. Instead string concatenation and innerHTML will be fine.
Here is a working snippet with minimum code.
JS
function validateEverything(event){
event.preventDefault();
var wo1 = document.getElementById("word1").value;
var wo2 = document.getElementById("word2").value;
var sub = document.getElementById("subtr").value;
var ans = document.getElementById("answers");
//Concat
var con = wo1.concat(" "+wo2);
//Subtr
var subr = sub.substring(1, 7);
ans.innerHTML = con+" "+subr;
}
HTML
<input type="submit" value="Submit" id="btnSubmit" onclick="validateEverything(event)">
JSFIDDLE

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/>

Javascript to Grab the Selected Value from a list of Form Radio Options OR text field, whichever is used, and output to text?

I'm new to Stack and this is my first question, but I did search and wasn't able to find anything that was specifically what I am trying to accomplish. I'm all for learning, so any reference material that would help me better understand how to approach this would be appreciated, but if someone wants to provide some example code I wouldn't mind that either :p
OK, so the scenario is this. I am writing a "Note Creator" that will generate automatic client notes based on some fields I enter into a form. I've already scripting getting the values from text fields, but I have one field that I want to be a combination of a radio option OR text field, and the java needs to grab whichever one was used and the proper value. Any help is appreciated, below is my code:
<script type="text/javascript">
function getNotes() {
//Grab Variables
spokeTo = document.thisForm.spokeWith.value;
problemItem = document.thisForm.problemWith.value;
resolvedBy = document.thisForm.resolvedWith.value;
thisTech = document.thisForm.techName.value;
fSpace = "... "
//Read in the location information and prep the output container
outputValue = "";
{
//Test if things are blank
if (spokeTo == "") { alert('Please Enter the Name of the Person.'); }
else if (problemItem == "") { alert('Please Select the Problem.'); }
else if (resolvedBy == "") { alert('Please Type Your Resolution.'); }
else {
//The loop that puts the output together
outputValue += "Spoke With: " + spokeTo + "\n\n" + "Called About: " + problemItem + "\n\n" + "Resolution: " + resolvedBy +fSpace + thisTech;
}
//output to the user
document.thisForm.outputArea.value = outputValue;
}
}
</script>
<form name="thisForm">
<p>
1. Spoke With: <input type="text" id="spokeWith" class="input" name="spokeWith">
</p>
<p>
2. Called About:
Hardware <input type="radio" id="problemWith" class="input" name="problemWith" value="Hardware">
Software <input type="radio" id="problemWith" class="input" name="problemWith" value="Software">
<input type="text" id="problemWith" class="input" name="problemWith"><br>
</p>
<p>
3. Resolved By:<br /><br />
<textarea name="resolvedWith" id="resolvedWith"></textarea>
</p>
<p>
4. Your Name:<br>
<input type="text" id="techName" class="input" name="techName" /><br>
</p>
<p>
<input type="button" class="button" value="Make My Notes!" onClick="javascript:getNotes();" />
<input type="reset" class="button" value="Start Over" />
</p>
<br><br>
<textarea name="outputArea" id="outputArea"></textarea>
<p class="finishMessage" id="finishMessage" name="finishMessage"></p>
</form>
I am referring specifically to The Step 2 section of the form where it has radio options and a text field with the same IDs and names. I know IDs are only supposed to be used once per page so this would probably change but I'm open to any suggestion/assistance. I'm moderate with Javascript, still in the learning phases.
Thanks again!
---------------
ROUND 2
---------------
Here is my revised code after taking the suggestion of the provided answer. I added a bunch of alerts to kind of let me know along the way which parts of the script I'm managing to hit, and I can't get anything past the first alert to trigger, and can't get any output at all anymore. What am I missing?
<script type="text/javascript">
function getNotes() {
alert('You\'ve hit the function. Congratulations - you didn\'t break the whole damn thing.');
//Grab Variables
var spokeTo = document.thisForm.spokeWith.value;
var resolvedBy = document.thisForm.resolvedWith.value;
var thisTech = document.thisForm.techName.value;
var fSpace = "… ";
//Grab if radio else text
var inputVal1 = document.getElementByClass('problemRadio').value;
var inputVal2 = document.getElementByClass('problemWith').value;
alert('You made it! Almost there.');
// If Input Value 1 is not Null, Show Radio Value. Else, show Text Value
var problemOutput;
if (inputVal1.length > 0) {
problemOutput = inputVal1;
alert('I found value 1!');
}
else {
problemOutput = inputVal2;
alert('I found value 2!');
}
//Read in the location information and prep the output container
outputValue = "";
//Test if things are blank
if (spokeTo == "") { alert('Please Enter the Name of the Person.'); }
else {
alert('We Made it to Else to parse outputValue');
//The loop that puts the output together
outputValue += "Spoke With: " + spokeTo + "\n\n" + "Called About: " + problemOutput + "\n\n" + "Resolution: " + resolvedBy +fSpace + thisTech;
}
//output to the user
document.thisForm.outputArea.value = outputValue;
}
</script>
<form name="thisForm">
<p>1. Spoke With: <input type="text" id="spokeWith" class="input" name="spokeWith"></p>
<p>2. Called About:
Hardware <input type="radio" id="problemRadio" class="problemRadio" name="problemRadio" value="Hardware">
Software <input type="radio" id="problemRadio" class="problemRadio" name="problemRadio" value="Software">
<input type="text" id="problemWith" class="problemWith" name="problemWith"><br>
</p>
<p>3. Resolved By:<br /><br />
<textarea name="resolvedWith" id="resolvedWith"></textarea>
</p>
<p>4. Your Name:<br>
<input type="text" id="techName" class="input" name="techName" /><br>
</p>
<p>
<input type="button" class="button" value="Make My Notes!" onClick="javascript:getNotes();" />
<input type="reset" class="button" value="Start Over" />
</p>
<br><br>
<textarea name="outputArea" id="outputArea"></textarea>
<p class="finishMessage" id="finishMessage" name="finishMessage"></p>
</form>

sorry about that, I don't know the best way to get code in here yet. Always ends up messy looking ( till I figure it out )
Few things I spotted in your update;
1) getElementbyId is best ( it wasn't getting past your first lines)
2) duplicate IDs on the radio buttons
3) We Needed to 'check' which of the radio buttons was checked
4) always handy to alert the variables ( I've added some in to show )
I gave this code below a rough test and it looks to be along the lines ..
see comments added in your code below ..
<script type="text/javascript">
function getNotes() {
//Grab Variables
var spokeTo = document.getElementById('spokeWith').value;
var resolvedBy = document.getElementById('resolvedWith').value;
var thisTech = document.getElementById('techName').value;
var fSpace = "… ";
alert("spokeTo:" + spokeTo
+" , resolvedBy: " +resolvedBy+", thisTech: "+thisTech);
//Grab if radio else text
var problemWith = document.getElementById('problemWith').value;
alert("problemWith: "+problemWith);
/* set a default value */
var problemOutput="other";
/* if they added no notes */
if((problemWith=="") || ( problemWith==null)) {
/* check which radio is selected if any */
if(document.getElementById('problemHardware').checked) {
problemOutput = document.getElementById('problemHardware').value;
}
if(document.getElementById('problemSoftware').checked) {
problemOutput = document.getElementById('problemSoftware').value;
}
} else {
problemOutput=problemWith;
}
alert("problem output is: "+problemOutput);
alert('You made it! Almost there.');
//Read in the location information and prep the output container
outputValue = "";
//Test if things are blank
if (spokeTo == "") { alert('Please Enter the Name of the Person.'); }
else {
alert('We Made it to Else to parse outputValue');
/* The loop that puts the output together */
outputValue += "Spoke With: "
+ spokeTo + "\n\n"
+ "Called About: "
+ problemOutput + "\n\n"
+ "Resolution: " + resolvedBy +fSpace + thisTech;
}
//output to the user
document.thisForm.outputArea.value = outputValue;
}
</script>
<form name="thisForm">
<p>1. Spoke With: <input type="text" id="spokeWith" class="input" name="spokeWith"> </p>
<p>2. Called About:
Hardware <input type="radio" id="problemHardware" class="problemRadio" name="problemRadio" value="Hardware">
Software <input type="radio" id="problemSoftware" class="problemRadio" name="problemRadio" value="Software">
<input type="text" id="problemWith" class="problemWith" name="problemWith"><br>
</p>
<p>3. Resolved By:<br /><br />
<textarea name="resolvedWith" id="resolvedWith"></textarea>
</p>
<p>4. Your Name:<br>
<input type="text" id="techName" class="input" name="techName" /><br>
</p>
<p>
<input type="button" class="button" value="Make My Notes!" onClick="javascript:getNotes();" />
<input type="reset" class="button" value="Start Over" />
</p>
<br><br>
<textarea name="outputArea" id="outputArea"></textarea>
<p class="finishMessage" id="finishMessage" name="finishMessage"></p>
</form>

one approach would be to check on the value and if else
var input1val = document.getElementById('input1Id').value;
var input2val = document.getElementById('input2Id').value;
var valfromeitherbox = (input1val.length > 0) ? input1val : input2val;
/* UPDATE : ^ is the same as -
var valfromeitherbox;
if(input1val.length > 0) { valfromeitherbox=input1val;
} else { valfromeitherbox=input2val; }
*/
document.getElementById('input3Id').value = valfromeitherbox;
/* if val is empty in input1 use val from text box 2 */
Sorry if a little scrappy , but hope you get the gist and I haven't missed the point