auto fill from previous row

[cat5ive]

Hi,

I have a form with X rows of 5 input textboxes. What I want to do is keep the data of the previous row, and auto fill into the next row for a user (if user make some input into this row). Let's say on this row user only input 2 textboxes so I want to fill in the other 3 for him.

I don't want user to click any button for this auto fill so I think I should auto fill the row when user put the cursor away from this row.

I already search both this forum and google but cann't find this kind of situation.

Can someone please provide sample code to a rookie. Any suggestion also welcome.

Thanks in advance.

 

[vicvirk]

you can use the onblur() event of an input box to fire a javascript function that does what you need.

I don't quite understand exactly how you want it to work or what you want to fill the row with so that's about all I can say for now.

--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

--------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc

 

[cat5ive]

Hi vicvirk,

I hope this will give you a better picture.

For example, here is my form

Item      quantity     color     size
SHIRT        5           RED      XL         (row#1)
TANKTOP      10          BLACK    S          (row#2)
             3                               (row#3)

First, user fill up the input boxes on the row#1 & 2.
He then go to row#3 and input only the quantity.

What I want to acheive is to fill up the rest of the column on row#3 for user (with the value from previouse row which is row#2). This way user doesn't have to keep repeat typing. If the item for row# 3 is also TANKTOP, he can leave the column blank and my script would put TANKTOP for him. User can also make change on the fields. For example, in row#3, may be user leave the color blank because he has no preference of the color. So after my script put in BLACK for him, he has option to wipe it out.
So the onblurr() event that you suggest won't work.

 

[vicvirk]

you can use the onkeypress() event then. When the key is pressed on row#3 in the quantity field, check to see if the item field has a value - if it does not, populate it with the value from the previous row.

Are the rows dynamic generated or is there a fixed number? I.e, does the user specify how many rows they want before it is loaded?



--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

--------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc

 

[cat5ive]

The rows will be loaded 50 per page.

 

[vicvirk]

This should be enough to get you started, when you load it up, the first col is the item and the 2nd is the quanity.

<script>
function foo(id) {
	if (document.getElementById("i_" + id).value != "") {
		return;
	}
	
	document.getElementById("i_" + id).value = document.getElementById("i_" + (parseInt(id) - 1)).value;
	
}
</script>

1. <input type="text" id="i_1" value="" /> <input type="text" id="q_1" value="" /> 
<br />
2. <input type="text" id="i_2" value="" /> <input type="text" id="q_2" value="" onkeypress="foo(2)" /> 
<br />
3. <input type="text" id="i_3" value="" /> <input type="text" id="q_3" value=""  onkeypress="foo(3)" /> 
<br />
4. <input type="text" id="i_4" value="" /> <input type="text" id="q_4" value=""  onkeypress="foo(4)" /> 
<br />
5. <input type="text" id="i_5" value="" /> <input type="text" id="q_5" value=""  onkeypress="foo(5)" />

--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

--------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc

 

[feherke]

Hi

Personally I would reverse things :
[ul]
[li]on first [tt]onfocus()[/tt] on any [tt]input[/tt] of a row, all [tt]input[/tt]s of that row are fill with data from the previous one[/li]
[li]then the user modify/clear as needed[/li]
[/ul]
With this approach I find it easier both for coding and using.

Feherke.

http://free.rootshell.be/~feherke/

 

[cat5ive]

Thank you so much vicvirk for the sample.
Feherke,thank for the suggestion. But I only want to fill in the value if user leave the field blank. If I understand you correctly, seem like you suggest to fill in the field when user put cursor in that field.

Thank you again guys.

 

[feherke]

Hi

seem like you suggest to fill in the field when user put cursor in that field.

Almost. I suggested to fill all [tt]input[/tt]s of a row when any of them receives focus for the first time. Then not touch them anymore.

Personally I hate when a script fills/modifies/clears anything after I edited.

While you want both auto fill empty fields and keep empty fields, I would say, such script's activity would be more unpredictable than helpful for the user.


Feherke.

http://free.rootshell.be/~feherke/