Jump to content

Can Someone Help Me With This?


Dirty Rotten Scoundrel

Recommended Posts

Hi. I work in a call center and I am trying to make a case notes wizard. Its a tool based on java scripting forms that allow me to quickly enter notes that i need for case notes when customers call in.So far I have pillaged yhe following script from other sources and have tried to make it work but as you can see I cannot. Can anyone help me to understand what I need to do to get this functional? The dropdowns, text boxes and radio buttons should all send their info to the text area at the bottom without deleting eachother's input. Also I need the drop downs to be more dynamic, like when I select an option from the first it will only show certain options on the second and then so on to the third. In some cases I may not even need a third. I tried a different way of doing the dropdowns that involved a .js file but that was also confusing.Its very hard to find insructions online for how to get information to submit to a text area onclick or onchange. Everyone wants to submit to a server.

<html><head><center><title>Case Notes Wizard</title><img src="a.gif" alt="logo" /><h1>CASE NOTES WIZARD</h1><style="font-family:ARIAL"><script language="javascript" src="list.js"></script></center><script language="javascript">function showtext(){var sel_index=document.getElementById("SubCat").selectedIndex;var selected_text = document.getElementById("SubCat").options[sel_index].text;document.getElementById("oTxt").innerHTML=selected_text;}</script><script type="text/javascript">{var textstring = '';for (i=0;i<4;i++) {		var box = document.forms['VPPA'].elements[i];		if (!box.value) {			alert('You haven\'t filled in ' + box.name + '!');			box.focus()			return;}textstring += box.name + ': ' + box.value + '\n';}user_input = '';	for (i=0;i<document.forms['VPPA'].cardholder.length;i++) {		if (document.forms['VPPA'].cardholder[i].checked) {			user_input = document.forms['VPPA'].cardholder[i].value;		}	}	textstring += 'cardholder: ' + user_input + '\n';{document.forms['VPPA'].output.value = textstring;}</script></head><center><form name="VPPA" action="#" onsubmit="checkit(); return false"><table class="form"><tr><td>Name</td><td><input name="NAME" /></td></tr><tr><td>Last Four</td><td><input name="LAST FOUR" /></td></tr><tr><td>Zip Code</td><td><input name="ZIP CODE" /></td></tr><tr><td>Is this customer the cardholder?</td><td><input type="radio" name="cardholder" value="Yes" />Yes<br /><input type="radio" name="cardholder" value="No" />No<br /></tr><tr><td colspan="2"><input type="submit" value="Add" /><br /><input type="reset" /></td></tr><body bgcolor="#990000" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onload="fillCategory();"><body style="font-family:ARIAL"><FORM name="drop_list" action="yourpage.php" method="POST" >		<SELECT  NAME="Category" onChange="SelectSubCat();" ><Option value="">Category</option></SELECT> <SELECT id="SubCat" NAME="SubCat"><Option value="">SubCat</option></SELECT><form name="myform"><select id="select1" name="select1" onchange="showtext()"><option>Value 1</option><option>Value 2</option><option>Value 3</option></select><table border="0" cellspacing="0" cellpadding="10"><tr><td><textarea id="oTxt" name="oTxt"  rows="10" cols="40"></textarea></td></tr></table></form></table></center></body></html>

Link to comment
Share on other sites

First, note that "submitting to a text area" doesn't save any data. You're only changing the display of the page. If you refresh the page all of that data will be gone. All Javascript does is update the display, it doesn't do anything with saving data. If you actually want to save this data then you need to send it to a server.Second, your page isn't laid out very well. Your head section includes <center>, <h1>, and <img> tags, none of which belong in the head. You have a body section (actually, you have 2 <body> tags, which is also a problem), but it doesn't start immediately after the head, it starts halfway down the content.You also have nested form tags, I count 3 nested forms. Forms cannot be nested.This line:document.getElementById("oTxt").innerHTML=selected_text;Sets the content of the textarea to something new. If you want to add to the content instead of replacing it, use the concatenation operator instead:document.getElementById("oTxt").innerHTML += selected_text;The brackets in your Javascript are also misaligned, you have more "{" than you have "}". You should have the same number of each. This line also doesn't do anything:document.forms['VPPA'].output.value = textstring;There's no form element called "output", but even so it's better to use document.getElementById like the other function does than it is to use the dot notation with names.

Link to comment
Share on other sites

lol so you can see right away that I need your help! I am definitely not good at this.It doesn't matter if the data is saved. The notes are manually copied from the wizard and pasted into the software provided by the call center. IN fact I would like to add the command to make the text selected after it is submitted to the text area to make it quicker. This is just a cheat to make the notes more complete and organized and without spelling mistakes.Someone else pointed out that the forms are nested but I am not sure how to fix that.I tried cleaning up the code a bit like you said and here is what I am left with:

<html><head><title>Case Notes Wizard</title><script language="javascript" src="list.js"></script><script language="javascript">function showtext(){var sel_index=document.getElementById("SubCat").selectedIndex;var selected_text = document.getElementById("SubCat").options[sel_index].text;document.getElementById("oTxt").innerHTML += selected_text;}</script><script type="text/javascript">{var textstring = '';for (i=0;i<4;i++) {		var box = document.forms['VPPA'].elements[i];		if (!box.value) {			alert('You haven\'t filled in ' + box.name + '!');			box.focus()			return;}textstring += box.name + ': ' + box.value + '\n';}user_input = '';	for (i=0;i<document.forms['VPPA'].cardholder.length;i++) {		if (document.forms['VPPA'].cardholder[i].checked)  user_input = document.forms['VPPA'].cardholder[i].value;		}	}	textstring += 'cardholder: ' + user_input + '\n';</script></head><center><body bgcolor="#990000" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onload="fillCategory();"><body style="font-family:ARIAL"><img src="a.gif" alt="logo" /><h1>CASE NOTES WIZARD</h1><form name="VPPA" action="#" onsubmit="checkit(); return false"><table class="form"><tr><td>Name</td><td><input name="NAME" /></td></tr><tr><td>Last Four</td><td><input name="LAST FOUR" /></td></tr><tr><td>Zip Code</td><td><input name="ZIP CODE" /></td></tr><tr><td>Is this customer the cardholder?</td><td><input type="radio" name="cardholder" value="Yes" />Yes<br /><input type="radio" name="cardholder" value="No" />No<br /></tr><tr><td colspan="2"><input type="submit" value="Add" /><br /><input type="reset" /></td></tr><FORM name="drop_list" action="yourpage.php" method="POST" ><SELECT  NAME="Category" onChange="SelectSubCat();" ><Option value="">Category</option></SELECT> <SELECT id="SubCat" NAME="SubCat"><Option value="">SubCat</option></SELECT><form name="myform"><select id="select1" name="select1" onchange="showtext()"><option>Value 1</option><option>Value 2</option><option>Value 3</option></select><table border="0" cellspacing="0" cellpadding="10"><tr><td><textarea id="oTxt" name="oTxt"  rows="10" cols="40"></textarea></td></tr></table></form></table></center></body></html>

Link to comment
Share on other sites

You actually only need one form. In fact, if you're not submitting the form to a server, then you don't need a form at all, you can just have the input elements where you want them. I think that technically theres a rule somewhere that says that input elements need to be in a form, but with everything being done with Javascript these days that rule doesn't hold as much water as it used to (if it's in fact a rule). Things look better though. You still have 2 body tags, you can remove the second one. You can add the font style to the other body tag if you want to keep that. The center tag before the body should also be inside it, instead of:<center><body>...</body></center>it should be:<body><center>...</center></body>There are better ways to center content than the old <center> tag, but that's not much of a big deal.Make those changes, remove the forms, and then post the code you're using and what other problems or issues you're working on with it.

Link to comment
Share on other sites

Maybe if I just started over taking it one step at a time.This is the first thing I wanted to do: I wanted to make it so that when a customer calls I can put their name, last four digits of their card and their zip code into the three boxes and then hit submit button so it would then populate into the text area box a little static template including the variable information from the text box. So when I hit submit the following template pops into the text area: NAME: (User added data)LAST FOUR:(User added data)ZIP CODE:(User added data)So obviously I am missing the javascript from the head and I am pretty sure that this: //<form name="VPPA" action="#" onsubmit="checkit(); return false"> is incorrectSo here is the basic stuff I have:

	<html><head>  <title></title></head><body><body bgcolor="#990000" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onload="fillCategory();" style="font-family:ARIAL" style="text-align:center"><img src="a.gif" alt="logo" /><h1>CASE NOTES WIZARD</h1><form name="VPPA" action="#" onsubmit="checkit(); return false"><table class="form"><tr><td>Name</td><td><input name="NAME" /></td></tr><tr><td>Last Four</td><td><input name="LAST FOUR" /></td></tr><tr><td>Zip Code</td><td><input name="ZIP CODE" /></td></tr><tr><td colspan="2"><input type="submit" value="Add" /><br /> <table border="0" cellspacing="0" cellpadding="10"><tr><td><textarea id="oTxt" name="oTxt"  rows="10" cols="40"></textarea></td></tr></table></body></html>

Link to comment
Share on other sites

K well I have messed with it again to try to add that javascript and I think I am really close but I am missing something.here is what I have now:

<html><head>  <title>CASE NOTES WIZARD</title>  <script type="text/javascript">function showtext (){	var userInput = document.getElementById('userInput').value;	document.getElementById('oTxt').innerHTML = userInput;}</script></head><body bgcolor="#990000" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onload="fillCategory();" style="font-family:ARIAL" style="text-align:center"><img src="a.gif" alt="logo" /><h1>CASE NOTES WIZARD</h1><form name="VPPA" action="#" onsubmit="checkit(); return false"><table class="form"><tr><td>NAME</td><td><input type='text' id='userInput'/> </td></tr><tr><td>LAST FOUR</td><td><input type='text' id='userInput' /> </td></tr><tr><td>ZIP CODE</td><td><input type='text' id='userInput' /> </td></tr><tr><td colspan="2"><input type="submit" value="Submit" id='userInput'  onclick='showText2()'/><br /> <table border="0" cellspacing="0" cellpadding="10"><tr><td><textarea id="oTxt" name="oTxt"  rows="10" cols="40"></textarea></td></tr></table></body></html>

Link to comment
Share on other sites

IDs need to be unique, each field needs its own ID. You only need to put an ID on something you're accessing through Javascript, so your form elements and text area each need a unique ID. So if you form elements included this:

<tr><td>NAME</td><td><input type='text' id='name'/> </td></tr><tr><td>LAST FOUR</td><td><input type='text' id='lastfour' /> </td></tr>

Then you can get those values and update the text area like this:

function showtext (){	var str = '';	var name = document.getElementById('name').value;	var lastfour = document.getElementById('lastfour').value;	str = "Name: " + name + "\n";	str += "Last Four: " + lastfour + "\n";	document.getElementById('oTxt').innerHTML = str;}

Link to comment
Share on other sites

Yay ! I did it! I did it!Sorry to spam but I edited a few things and I did it! I got the name box to populate into the text area!! WOOHOOOk so now I need to get it to populate all 3 boxes without losing anything and I want to be able to add that template.

<html><head>  <title>CASE NOTES WIZARD</title>  <script type="text/javascript">function showText (){	var userInput = document.getElementById('userInput').value;	document.getElementById('oTxt').innerHTML = userInput;}</script></head><body bgcolor="#990000" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onload="fillCategory();" style="font-family:ARIAL" style="text-align:center"><img src="a.gif" alt="logo" /><h1>CASE NOTES WIZARD</h1><table class="form"><tr><td>NAME</td><td><input type='text' id='userInput'/> </td></tr><tr><td>LAST FOUR</td><td><input type='text' id='userInput' /> </td></tr><tr><td>ZIP CODE</td><td><input type='text' id='userInput' /> </td></tr><tr><td colspan="2"><input type="submit" value="Submit" id='submit'  onclick='showText()'/><br /> <table border="0" cellspacing="0" cellpadding="10"><tr><td><textarea id="oTxt" Id="oTxt"  rows="10" cols="40"></textarea></td></tr></table></body></html>

Link to comment
Share on other sites

Make sure you're using the += operator to add to the string instead of replacing it. If you edit the function I had above, you would just add a couple more lines for each field you want to show:

function showtext (){	var str = '';	var name = document.getElementById('name').value;	var lastfour = document.getElementById('lastfour').value;	var field1 = document.getElementById('field1').value;	var field2 = document.getElementById('field2').value;	var field3 = document.getElementById('field3').value;	str = "Name: " + name + "\n";	str += "Last Four: " + lastfour + "\n";	str += "Field 1: " + field1 + "\n";	str += "Field 2: " + field2 + "\n";	str += "Field 3: " + field3 + "\n";	document.getElementById('oTxt').innerHTML = str;}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...