15 Replies - 557 Views - Last Post: 01 August 2013 - 12:32 PM

Note Maker

Posted 01 August 2013 - 09:16 AM

I have a job that involves accessing customer accounts and quoting balances and other billing inquiries. I am trying to create an html tool that can be used to create notes that can be used to quote balances, service disconnect dates and so on. It basically needs a textarea with a generate note button, cut/copy button and a reset button. Below the main text area needs to be some smaller text areas where specific values can be entered then when you press "generate note", all of the fields are pasted into a single text area. If anyone could get something started on this for me it would be greatly appreciated. I have been struggling on this for months. Thanks

Re: Note Maker

Posted 01 August 2013 - 09:55 AM

I just cant get the scripting to work. To be honest I am inexperienced with this and a lot of what is making this work is things I have pieced together from other post/discussions. Right now there isn't a database for this. I have this all working off of that single html file and nothing more.

Re: Note Maker

Hmm.. so you do want to store this data, right? be able to recall it, edit it, print it, etc? Then you will need a database. That should be high on your list.

Quote

I just cant get the scripting to work.

I don't know what you are trying to achieve there. What should it be doing?

Quote

To be honest I am inexperienced with this and a lot of what is making this work is things I have pieced together from other post/discussions.

You should stop, regroup, and focus on the important parts. Do you have a design sketched out? Written down? GUI framed out? Then you can identify areas you need client side actions (the java script parts) and things that need server side action (php/ajax/etc) calls to store data. It wouldn't hurt to pick up a book on web programming, javascript, and some server side language.

Re: Note Maker

Posted 01 August 2013 - 10:48 AM

That's what I will have to do. I was just hoping that it was as simple as adding javascript on top of what I already have to make it work. It doesn't have to be complex in any way. Just need to be able to copy the text from the text area on the html page then manually paste it into a program that allows me to note peoples accounts. I do this all day long in a time pressured setting. I only need 2 text areas added 1 that is for the "quoted balance" and " disconnection date" where I can type in the date and amount.

Basically I need the html page to be able to compose a small paragraph based on what I have typed in the fields or which boxes I have checked. Example, I check "gave acct #" and type the balance of $100 in Balance quote field and the information is automatically pasted together in the main textarea like this: Quoted balance of $100. Provided customer with their acct #. Its not going to be web based at all, just used right off of the desktop.

Sorry this is a mess of stuff to explain. There is no storage, database or anything. It just needs simple way for me to check certain items and enter info in certain fields and they are all consolidated into that text area for me to copy and paste locally on my computer.

Re: Note Maker

This is an example of exactly what I need except it doesn't need to be nearly this complicated. Just need a few simple fields like the balance quoted and the disc date. Doesn't even have to have the tabs.

Re: Note Maker

Posted 01 August 2013 - 11:06 AM

Oh.. well that is pretty different that what was explained. You need a comment formatter sort of thing. Well.. HTML probably wouldn't have been my first choice, but so it goes. What you need is just to understand how javascript events work and the DOM object to find elements.

Re: Note Maker

Posted 01 August 2013 - 11:12 AM

If you are interested, there is a piece of open source code out there called zenpen which (at least in the demo) appears to do most of what you are looking for. It allows (by the demo) for you to have multiple input areas (a title and content) and use basic rich text editing capabilities (copy, paste, bold, underline, italic, maybe more). So with some slight modification I believe you can get it to have more inputs and dump everything to a single textarea.

Re: Note Maker

Posted 01 August 2013 - 11:35 AM

It shouldn't be that hard to repeatedly use the DOM's getElementById, a onclick event, and maybe some basic if statements.

Example:

<!DOCTYPE html>
<html>
<head>
<script>
//a simple method that fires off each time the button is clicked.
function FormatClicked()
{
/*declare a variable to get the value of the silly check box
* What is happenign here is the document is being searched for that unique name. When the ID is found we know it is a checkbox and try to find the true/false state of it.
*/
var isRedChecked = document.getElementById("chkSilly").checked;
var isSillyChecked = document.getElementById("chkRed").checked;
//using the same principle of finding the DOM object - we can pull the text value (or text contenet) from the input textbox
var allInput = document.getElementById("txtInput").textContent;
// a basic if statement determines what to add to the input string to make it more cool (based on the checkboxes)
if (isRedChecked)
{
allInput += " a red Ball!";
}
if (isSillyChecked)
{
allInput += " a silly goose!";
}
// when done we find our output textbox and shove the newly (and conditionally) formated text into it!
document.getElementById("txtOutput").textContent = allInput;
}
</script>
</head>
<body>
<!--generic text box-->
<textarea id="txtInput" style="width: 400px; height: 150px;"> </textarea>
<br />
<!--since checkboxes are only found in forms, wrap them -->
<!--the key here is the id.. make sure that is unique because you'll need to find that later-->
<form>
Red:<input type="checkbox" id="chkRed" /><br />
Silly:
<input type="checkbox" id="chkSilly" /><br />
</form>
<br /><br />
<!--buttons have events.. one of those events (onclick) goes to the javascript function you tell it when it is clicked.-->
<button id="btnFormat" onclick="FormatClicked()">Format</button>
<br /> <br /> <hr /> <br /> <br />
<textarea id="txtOutput" style="width: 400px; height: 150px;"> </textarea>
</body>
</html>