JavaScript - How to get value from a function for use as hidden input?

win32sux · 12-31-2007, 10:07 AM

NOTE: I am a complete JavaScript newbie.

I've got a form built into a table with two rows. Using examples from the Web, I've managed to put together a insRow() function which lets people add rows by clicking a link. Whenever they add a row with this link, a counter is increased in the insRow() function.

The top of my form looks like:

Code:

<form action="confirmation.php" method="post">

The bottom of my form looks like:

Code:

<input type="hidden" name="amount" value="" />
<input type="submit" value="Submit!" />
</form>

The value I need for the value= field of the hidden input tag is stored in the counter variable in the insRow() function. How can I make it so that, when the form is submitted, the value= field will get populated with the counter variable's value? The PHP script which waits for this submission requires that number in order to do its thing. TIA.

nc3b · 12-31-2007, 11:31 AM

Code:

document.getElementById("amount").value=your_counter;

Do that before submitting the form. Add id="amount" to the hidden field parameters.
Usually I would replace the submit button with a button that triggers (onclick) a function which first does that and then submits the form (which by the way should have a name and id, just like the hidden field).

Happy new year.

win32sux · 01-01-2008, 03:16 AM

Quote:

Originally Posted by nc3b

Code:

document.getElementById("amount").value=your_counter;

Do that before submitting the form. Add id="amount" to the hidden field parameters.
Usually I would replace the submit button with a button that triggers (onclick) a function which first does that and then submits the form (which by the way should have a name and id, just like the hidden field).

Thanks a million! You managed to get my script moving along with that. My PHP script is in fact receiving the dynamic value via POST now. Even though it is working, I have a feeling I might not have done it properly. I'm gonna post what I ended-up with in hopes that you (or anyone else) might have a look at it and provide some feedback if you can. BTW, if you could elaborate a bit about the form's need for name and id it would be greatly appreciated.

The top of my form still looks like:

Code:

<form action="confirmation.php" method="post">

The bottom of my form now looks like:

Code:

<input type="hidden" id="amount" name="amount" value="" />
<input type="submit" OnClick="getCount(amount);" value="Submit!" />
</form>

My javascript.js file now looks like:

Code:

var count = 3;

function insRow()
{
var x = document.getElementById('myTable').insertRow(count);
var a = x.insertCell(0);
var b = x.insertCell(1);
var c = x.insertCell(2);
a.innerHTML = "<TUXRULES>" + (count) + "<TUXRULES>";
b.innerHTML = "<TUXRULES>" + (count) + "<TUXRULES>";
c.innerHTML = "<TUXRULES>" + (count) + "<TUXRULES>";
count++;
}

function getCount()
{
document.getElementById("amount").value = count-1;
}

For clarity, I replaced all the HTML parts with <TUXRULES>. The counter starts at 3 due to the fact that the table starts with two rows, so I need it to start inserting rows after that point (whenever the user clicks "Add row"). Notice how in the getCount() function I subtracted 1 from the counter in order to get the total number of rows deployed.

Quote:

Happy new year.

Happy New Year to you also! And once again, thanks for the help!

nc3b · 01-01-2008, 06:14 AM

Well, the code for the form should actually contain a name argument

Code:

<form name="confirmation" action="confirmation.php" method="post">

And although I don't know whether you want this behavior, but you could probably write your getCount function like this

Code:

function getCount()
{
    document.getElementById("amount").value = count-1;
    document.confirmation.submit();
}

so that immediately after calling the function and populating the amount field with the counter the form would get submitted. (That is why I said it would be a good thing for the form to have a name, so it can be called and submited programmatically. Although you could do this with the forms[] array).
And another thing, I don't see any reason for you to call the function getCount with amount as parameter, the function doesn't use any parameters, it gets the value globally (via document). Although you will usually get away in javascript with calling the function with the wrong number of parameters, on occasions browsers will start complaining. Cheers.

win32sux · 01-01-2008, 08:32 AM

I'm sure this will all make more sense to me once I get around to actually reading a JavaScript tutorial. For now I'm basically just flying blind, which is okay since I'm having fun and am not working on anything important. Thanks for the feedback!