www.webdeveloper.com
Results 1 to 6 of 6

Thread: Create a Text containg form answers. Form is "dynamic"

  1. #1
    Join Date
    Oct 2013
    Posts
    4

    Post Create a Text containg form answers. Form is "dynamic"

    Hello all! First of all, this thread might be in the wrong place since, I am unsure at this time if this issue can be solved with javascript and if it is required or (preferably) this all can be done only with html. But I suppose people how know javascript will also be able to help me with html, so, I will get on with my question.

    The background(optional):
    I work in a company with a call center for technical support. When we recieve a call for a technicall issue, we ask some specific questions, to our client, to help resolve it, then based on the answers, a trouble ticket is entered into the company's crm system and assigned to the appropriate departments for further action as neccessary. In order to make this proccess as fast and streamlined as possible, instead of having agents type everything or copy and paste from a notepad, we have a little html page that presents forms with the needed client's information and then for each issue the agent can click between 2 or more choices depending on what the client answers.

    How it should work
    In the end, a submit button creates a ready-to-use text that can be copied and pasted into the trouble ticket that has all the required info. For example it might be like this:

    <Device malfunction>
    1. Is the power led on?
    (checkboxes) YES - NO
    1a. If no, is it plugged in?
    YES - NO

    2. If the power led is on, is it lit green or red?
    GREEN - RED

    3. Hard Reset tried on device
    YES - NO

    (Cancel - Restart - Submit)

    So, if the answers were NO - YES then you would get, upon pressing submit, a text like this:

    "Client mentions device malfunction,
    The Power Led is off,
    The device is plugged into the wall socket.
    Please procceed with sending a replacement device."


    Then the agent that is on the phone with the customer can get to copy this text and easily have the ticket ready without typing. Iam unsure wether this is done only with html or requires php also.

    This is all fine and works flawlessly, but there is a problem. Most people in the company do not know how to modify an html file. I myself have little knowledge in the field.

    What must be done
    So, we wanted to find, an easy WYSIWYG editor where the appropriate people can just remove or add questions like the ones above, having only to type in the questions and the answers, as often as required, without the need to call for the guy that knows html to do this.

    We have found many editors that offer this, as well as a few online solutions.
    One greatly usefull one, for instance, is Google Forms. You can check it out with any gmail acount by going to google drive, and creating there a new form.

    The problem always seems to be with the submit button though. None of the options we have looked into seem to have a way to create a custom functionallity, to take the answers and questions and based on those, concatennate a complete text, and present in a new or in the same window, like I describe above, WHEN, the amount of questions is unknown to the code at the time of writing it.

    Unfortunately, google forms ONLY seem to support outputing to an excel file. Not only that, but ideally we would like to be able to host everything on our own servers and not use google's drive at all if possible.

    The real question
    So, the question is, what editor or online service can we use to make this happen (HAS TO BE FREE). Or, how could we create a code that could "replace" the submit button of google forms or of other WYSIWIG html editors with the purpose of creating this functionality?


    Many thanks for all of your answers.

  2. #2
    Join Date
    Oct 2013
    Posts
    4
    OK, so lets say we have an html form with various input elements like checkboxes, radials, selections, and free text inputs. this form will have been created beforehand with some free wysiwig html editor by people without programming knowledge, for business use.
    The goal is to make a php or javascript loop that, identifies the input elements that exist in this form, then creates a text (string) based on all of the answers.

    i am not new to programming but I have never coded in php before, so bare with me please :


    if each user input field on the form is an "element", the following pseudo code should cover what I need more or less:

    -array of elements get
    i= elementsArray.length()
    while i>0
    -if element.type=="checkbox" then
    outputstring =outputstring+ tostring(element.value);
    ....etc....
    i=i-1;
    end while
    final output=outputstring.

    i am not well versed in php, and java, could someone give me a code that could do this? my main issue and the most important help I need, is I dont know how to get an array of the forms ' input fields. Another is getting access to the type of each element (checkbox? radial? free text input?) . It should be very easy, I just dont know what functions / attributes/properties/methods to use.

    Any help would be fantastic!

  3. #3
    Join Date
    Oct 2013
    Posts
    4
    Just as an update.
    I am currently looking into using htmlcollections or, jQuery selection function, to help create an initial array containing every element of the form, and then , using that, it will be simple to iterate through all of it, check which are actually input fields, and add their values to a string.

    when I have a final working code, I will update this thread.

  4. #4
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Maybe this can help you. This is just simple example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8" />
    	<link rel="stylesheet" type="text/css" href="style.css" />
    	<style type="text/css">
    	</style>
    	<script>
    		function getInfo()
    		{
    			var form = document.myform;
    			var elem = form.elements;
    			var results = [];
    		
    			for (var i = 0; i < elem.length; i++)
    			{
    				if (elem[i].type == "radio")
    					if (elem[i].checked == true)
    					{
    						results[results.length] = elem[i].name + " " + elem[i].value;
    					}
    			}
    			showResults(results)
    		}
    		function showResults(res)
    		{
    			var mywindow = open("","","height=300,width=300")
    			
    			for (var i = 0; i < res.length; i++)
    			{
    				mywindow.document.write(res[i] + "<br />");
    			}
    			
    		}
    	</script>
    </head>
    <body>
    	<form action="" name="myform">
    		<h4>Is the cable plugged in?</h4>
    		<label for="radio1">Yes</label>
    		<input type="radio" name="cabel" id="radio1" value="Yes" />
    		<label for="radio2">No</label>
    		<input type="radio" name="cabel" id="radio2" value="No" />
    		<h4>Is the monitor turned on?</h4>
    		<label for="radio3">Yes</label>
    		<input type="radio" name="monitor" id="radio3" value="Yes" />
    		<label for="radio4">No</label>
    		<input type="radio" name="monitor" id="radio4" value="No" /><br />
    		<button style="margin-top: 20px" onclick="getInfo()">GetInfo</button>
    	</form>
    </body>
    </html>

  5. #5
    Join Date
    Oct 2013
    Posts
    4
    Hello! Thanks a ton for your response. After some research I also found a way to do it, I use this:


    var elements = document.all;

    for (i=0; i<documents.all.length; i++)
    { var currentelement = documents.all(i);
    if (currentelement.type == "text") {//output currentelement.value}
    if ((currentelement.type == "radio")){
    if (currentelement.checked=="true") {//output currentelement.value}}
    }

    which acomplishes the same thing.

    I wasnt aware of form.elements, and it is precisely what I was looking for, thanks a lot!!!

    => So, since usability for people without programming is my target, I would like to include all of the above code into a seperate .js or .php file, that should be called from a button in the form.

    Any Idea how I will do that? (however basic it may seem). Remember: the actual form name is something that will not be known to the code, so it must somehow make sure to be applied to the form from which the submit button was pressed, and only that, not to a new window!!

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,335
    Have you thought of creating a flow diagram of your questions and answers tree and at each stage indicate what the options thereafter the questions are?

    You could try a form that has all your questions in, then have DIV elements that enclose each question and each DIV has its own ID

    Using JavaScript to hide elements that are not relevant after an answer and unhide new elements of the form might be a way forward.

    Then after your questions have been answered you could have JavaScript create a new form based on the answers ready for submission to a serverside that then actions the content - eg emails it to the relevant department or person. This virtual form would appear in a DIV that was hidden and then your content is submitted.

    Then when the form is submitted, waits for a ticket number that can be read back to the user so they have a reference to quote that department if they need to. This would be best done using AJAX to avoid refreshing the page and then get a response in one fell swoop!
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles