Creating string from list of form answers.

[trancecommunity]

Hi folks


What i need to do is build a variable string in the order (name,mark1,mark2,mark3,mark4) from the following form. Anything ive tried doesnt seem to work properly.

<form name = "statistics" action = "" class="contact"id="statistics">
<fieldset>
<legend>Class Statistics</legend>
<fieldset id = "student">
<legend>New Student</legend>
<div>
<label for="name">Name</label>
<input type="text" name="name" id="name" size="20"   pattern = "[A-Z][a-z]+( [A-Z][a-z]+)?" title="Please enter a name (Surname optional) with First Letter capitalised" onblur="isFilled(this)">
</div>
<div>
<label for="mark1">Mark One</label>
 <input type="text" name="mark1" id="mark1" size="3" maxlength ="3" value="0" onblur="isFilledNum(this)">
</div>
<div>
<label for="mark2">Mark Two</label>
 <input type="text"  name="mark2" id="mark2" size="3" maxlength ="3" value="0" onblur="isFilledNum(this)" >
</div>
<div>
<label for="mark3">Mark Three</label>
<input type="text"  name="mark3" id="mark3" size="3" maxlength ="3" value="0" onblur="isFilledNum(this)">
</div>
<div>
<label for="mark4">Exam Mark</label>
<input type="text"  name="mark4" id="mark4" size="3" maxlength ="3" value="0" onblur="isFilledNum(this)">
</div>
<div>
<input type = "button" id = "btn" value= "Add Student Data" onclick="getData()">
</div>
</fieldset>

<div id = "texttarea">
<textarea name = "resultdata" rows = "10" cols = "30"></textarea>
</div>
<div>
<input type = "button" id = "btn" value= "Get Individual Result" onclick="getResult()">
</div>
</fieldset>
</form>

Thanks in advance.

[Old Pedant]

<input type = "button" id = "btn" value= "Add Student Data" onclick="getData(this.form)">
...
<script type="text/javascript">
function getData( form )
{
    var temp = [ form.name.value, form.mark1.value, form.mark2.value,
                 form.mark3.value, form.mark4.value ];
    var stringData = temp.join( "\n" );
    // ... but what you will do with it now you don't say ...
    // as a PURE GUESS:
    form.resultdata.value = stringData;
}
</script>

You may temp.join( ) on whatever kind of separator(s) you want.

You could even produce CSV data thus:

    var stringData = '"' + temp.join( '","' ) + '"';

Hard to guess what you really want from such vague specifications.

[trancecommunity]

Thanks for the reply. Ill try it now.

Just to describe more. Its basically a form that when filled in;

It joins all the answers into a String (Name, mark1, mark2, mark3)
Then adds that string onto the end of an array of Strings in the same format

array[0] (Name, mark1, mark2, mark3)
array[1] (Name, mark1, mark2, mark3)
array[2] (Name, mark1, mark2, mark3)
array[3] (Name, mark1, mark2, mark3)

etc..

Then reloads page and shows full array list of students and marks.

[Old Pedant]

Ummm...if you RELOAD the page, then how will you remember all the answers?

Unless you use server-side code, of course.

If you try to do it all in the browser, you may run out of space if you store the answer in cookies and almost certainly will if you try to pass via the <form> submit and method="get". Could probably use local storage, if the browser you are using supports it.

I'm not quite sure why you need to reload the page.

[trancecommunity]

I assume im just wrong with the reload anyway.

It seems to send them through and join them up apart from one thing. The name.

name is also highlighted blue which im not sure what that means.

Is it a keyword like var that cant be used in this case maybe?

var temp = [ this.name.value, this.mark1.value, this.mark2.value, this.mark3.value, this.mark4.value ];
var stringData = temp.join( "\n" );
alert(temp);

If i alert it just shows ,0,0,0,0 instead of john brown,0,0,0,0.

[Philip M]

name="name"

You should avoid giving names or id's to your variables/functions/arguments/forms words which are HTML/JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'test' or 'text' or 'checked' or 'click' or 'href' or 'closed' or 'go' or 'submit' or 'replace' or 'button' or 'radio' or 'parseInt'.
And of course you may not give a variable a name which is a Javascript keyword or event such as alert, case, char, confirm, false, int, null, onload, return, this, void, window, and so on.

[trancecommunity]

Thanks for confirming that. This was an exercise given to me as ive began a course in Javascript. Im surprised they put that in.

Following code seems to do the trick incase anyone else is following.

<div>
<label for="name">Name</label>
<input type="text" name="nameOne" id="nameOne" size="20"   pattern = "[A-Z][a-z]+( [A-Z][a-z]+)?" title="Please enter a name (Surname optional) with First Letter capitalised" onblur="isFilled(this)">
</div>

var temp = [this.nameOne.value, this.mark1.value, this.mark2.value, this.mark3.value, this.mark4.value ];
var stringData = temp.join( "\n" );
alert(temp);

Thanks for the help. This forum will come in real handy for learning code.