Populating a form with previously entered data

[ivy]

Hello all

The script I am having trouble with is supposed to do this:

After submitting a form's contents to itself, the php page adds the data to a mysql database for storing. Because the form submits to the same page, all the variables are still available and a new (blank) form appears to allow the user to continue adding data to the database.

I have put a checkbox on top of the form which says: "Use previous data".

Now, what should happen is that by using the below (not working!!!) script, the form is populated with the same data as previously entered (bar a couple of fields which will have to be unique - but that is besides the point).

So, this is how my page looks:

Within the form is the code:

Use previous data:
<input type="checkbox" name="copy"
OnClick="javascript:copyprevious(this.form);" value="checkbox">


And the javascript, which is WITHIN the body of the page (as I do not want it called within head (sorry - i know this is not the norm but just this time!!!):

<script type="text/javascript">
<!-- Begin

function copyprevious(form) {
if (form.copy.checked) {
form.tn_a.value = "<?php echo $tn_a; ?>";
form.tn_b.value = "<?php echo $tn_b; ?>";
form.tn_c.value = "<?php echo $tn_c; ?>";
}
else {
form.tn_a.value = 0;
form.tn_b.value = 0;
form.tn_c.value = 0;
}
}
// End -->
</script>


Now, here's the issue!!!

The form is composed of text areas, text boxes and radio buttons. I have had no problem inserting text (so I removed the code for that from above) but I cannot work out how to code the javascript so that the appropriate radio button within each group (e.g. tn_a) is checked. The variables coming from the php part of thinghs will all be numbers, e.g. 1, 2, 3 etc. And the form values for various radio items are valued 1, 2, 3 etc.

So, the end product should be the appropriate radio button checked within each group.

I hope I have made this clear.

Any help would be truly appreciated.

Many thanks

[Andrew Johnson]

Not 100% sure on what to write based on your explanation but hopefully this helps:

When you submit a form a radio button's value is either "on" or "" and when you want to reference it in JS you set document.getElementById("radio_name").checked to true or false.

Try some variation of this:


<script type="text/javascript">

function func_name()
{
document.getElementById("radio_name").checked = <?php if ($radio_name == "on") echo "true"; else echo "false"; ?>
}

</script>


If you need further help let me know

[ivy]

Hi Andrew Johnson

Thank you for your reply...

I've done some digging and found this:

The way to select a radiobutton from within JavaScript is by iterating through the array that is created automatically when JavaScript encounters a radiobutton or checkbox type of input.

function setRadio()
{
var rad = document.getElementById(radiobutton);
for (i = 0; i < rad.length; i++)
{
// Perform appropriate test and then use
if (whatever)
{
rad[i].checked = true;
}
}
}

That should check the radio button you're expecting.

BUT, my problem is that i have to include it within the function i have already set up! And i'm baffled as to how i can accomplish this!

The above code basically sets the radio button on page load. I would like the above function incorporated into my own, as my function only executes when a check box has been ticked.


So, using the above as a guide,

If the user previously ticked radio button tn_a which had a value of 1,

then it would appear that i need to be able to select the radio button within the group tn_a that has the corresponding value of 1 (so, I have worked out that i need to have my form radio elements in ascending order by value, starting at 0).

I've tried the following but get a javascript error :

var rad = document.getElementById(tn_a);
for (i = 0; i < rad.length; i++)
{
// Perform appropriate test and then use
if (i == <?php echo $tn_a; ?>)
{
rad[i].checked = true;
}
}


Does this help you see what i am trying to accomplish???!!!! Hope so!

[ivy]

The whole code, as this is probably more appropriate for people to understand!

function copyprevious(form) {
if (form.copy.checked) {
form.tn_info.value = "<?php echo $tn_info; ?>";
form.tn_notes.value = "<?php echo $tn_notes; ?>";


var rad = document.getElementById(tn_a);
for (i = 0; i < rad.length; i++)
{
// Perform appropriate test and then use
if (i == <?php echo $tn_a; ?>)
{
rad[i].checked = true;
}
}


var rad = document.getElementById(tn_b);
for (i = 0; i < rad.length; i++)
{
// Perform appropriate test and then use
if (i == <?php echo $tn_b ?>)
{
rad[i].checked = true;
}
}

var rad = document.getElementById(tn_c);
for (i = 0; i < rad.length; i++)
{
// Perform appropriate test and then use
if (i == <?php echo $tn_c; ?>)
{
rad[i].checked = true;
}
}


}
else {
form.tn_info.value = "";
form.tn_notes.value = "";
form.tn_a.value = 0;
form.tn_b.value = 0;
form.tn_c.value = 0;
}
}
// End -->
</script>




I've added the spaces to make it clear of the bits that are causing me lots of hassle!!!

The text parts work perfectly!

And I am calling the function using:


Use previous data:
<input type="checkbox" name="copy"
OnClick="javascript:copyprevious(this.form);" value="checkbox">

Many thanks in advance for any assistance!

[Andrew Johnson]

Well the first problem I see right off the bat is that i is a loop iterator and $tn_a/$tn_b/$tn_c are probably strings.

Perhaps something like:

<script type="text/javascript">
function copyprevious(form)
{
var rad = form.tn_a

for (i = 0; i < rad.length; i++)
{
if (rad[i].value == "<?php echo $tn_a; ?>")
{
rad[i].checked = true
}
}

//repeat for all radio button groups
}

</script>


P.S. I haven't live tested that code, so you have need to tweak it.

[ivy]

Hi Andrew Johnson

You superstar!

I have been looking at it for so long! I think it's a case of not being able to see the wood for the trees.

Many, many thanks for your help. It works perfectly!

[Andrew Johnson]

Heh, no problem bud.