pass javascript array to php 1

[greentiger]

Hi,

I'm new to this forum and to javascript programming and hope someone can help me.

I have a page which reads values from a database using php and displays the results in a series of text input boxes so that users may edit one or more of them at random. The text input controls are within a form. On submission I want to post an array containing any values that have been changed together with the original values to the receiving page.

I think I need three javascript functions but don't have the 'know how' to implement them. The first two functions would be on events in the input boxes.

The first, an onFocus event which will temporaily save the original value of the text box before it is changed.

The second, an onChange event which is called after the data has been changed in a text box, this should then write the temp saved original value and the edited value to a array.

The third function would be an onSubmit function that would enable the array to be posted as form data to a recieving php page which will process the data and write revisions back to the database.

Any advice would be most welcome.

 

[vicvirk]

You'll need to two items to your input box:

1. onFocus="myFocusFunction()"
2. onChange = "myChangeFunction()"

And one Item to your sumbit button

1. onClick = "myClickFunction()"

Starting with the javascript:

<script>
	//global vars
	var raFinalValues = "";
	var strCurrentValue = "";
	
	function myOnFocusFunction(elem) {
		strCurrentValue = document.getElementById(elem).value;
	}	
	
	function myOnChangeFunction(elem) {
		if (raFinalValues != "") 
			raFinalValues += "|";
		raFinalValues += elem + "," + strCurrentValue + "," + document.getElementById(elem).value;
		strCurrentValue = "";
	}
	
	function myOnClickFunction() {
		document.getElementById("tbxFinalValue").value = raFinalValues
	}
</script>
<!-- this is to hold your final value -->
<input type="hidden" name="tbxFinalValue" id="tbxFinalValue" />
<!-- these are your input boxes -->
<input type="text" value="Text Box 1" id="tbxOne" name="tbxOne" onFocus="myOnFocusFunction('tbxOne')" onChange="myOnChangeFunction('tbxOne')" />
<input type="text" value="Text Box 2" id="tbxTwo" name="tbxTwo" onFocus="myOnFocusFunction('tbxTwo')" onChange="myOnChangeFunction('tbxTwo')" />
<input type="text" value="Text Box 3" id="tbxThree" name="tbxThree" onFocus="myOnFocusFunction('tbxThree')" onChange="myOnChangeFunction('tbxThree')" />
<!-- this is your submit button -->
<input type="submit" value="Save" id="btnSubmit" name="tbxSubmit" onClick="myOnClickFunction()" />

When the form goes to the next page, you can retrive the value of then "tbxFinalValue" text box just as you would any other form field.

The value retrived will look something like this:

tbxOne,originalvalue,newvalue|tbxTwo,originalvalue,newvalue

Your PHP can separate it by the pipe (|) and then each part can be separated by the comma to get

array(0) = field name
array(1) = original value
array(2) = new value

 

[vicvirk]

sorry - i should have also added:

If the value of any of the text box did not change, the above code will not place it in the final value text box.

 

[greentiger]

vicvirk

you are a star! I have tested this and it gives me just what i was looking for - it has saved me a great deal of time, i really have got to get to grips with javascript.