Using Javascript to pass data between HTML Forms

Codegen

Gawd
Joined
Aug 28, 2004
Messages
915
So, what I'm trying to do is use a master listbox to tell a PHP script what table in an SQL database to access. However, I have three or four different forms on the page.

Here's my understanding of how to do this:

- Using Javascript, get the value from the listbox and put it into a js variable.
- Again using javascript, put the value into a hidden input box.

So,

var varName = document.form1.listbox.value
document.form2.hiddentxt.value = varName

Plus all the necessary tags (ex <SCRIPT>)
?


Thanks in advance.
 
Would this database/table/row info already be pre-fetched before you load this page, where the page is updated without a postback? After reading your description, that's the only reason for the implementation that makes sense to me, but I'm not convinced this is what you're looking for.

If you want to goto the database only *after* the user selects what he/she wants, then it seems like the Javascript you're looking at is excessive. Instead of using Javascript to update a variable at client-side prior to the submit event, why not just call the HTML object directly during the server-side submit to get the chosen value? Seems like the hidden variable you are updating is just an unneeded middleman...
 
Well, the problem is, is that I have multiple forms on this page, each to do a different action. Ex. One form to add a record into the database, one form to list them, etc. If I use the $_GET or $_POST commands, it doesn't see the listbox because it's on a separate form, so the result is that the variable is null. I was told that in order to do this properly, I'd need to use javascript, but obviously, I'm open to any suggestions.
 
You can have a variable in the html like:
Code:
<input type="hidden" name="tableName" id="tableName" value="">

Then, in your javascript when you submit the form, you can give that variable the appropriate value.
 
Well, the problem is, is that I have multiple forms on this page, each to do a different action. Ex. One form to add a record into the database, one form to list them, etc. If I use the $_GET or $_POST commands, it doesn't see the listbox because it's on a separate form, so the result is that the variable is null. I was told that in order to do this properly, I'd need to use javascript, but obviously, I'm open to any suggestions.

So it sounds like the "hidden" variable exists primarily to be checked to see if some action needs to take place server-side. This is starting to sound like a multi-use page with several action- or purpose-specific areas.

What was your reason on splitting this up into multiple HTML forms, as opposed to one single form?
 
OP, i can help you figure out what javascript would be needed but your question isn't really clear to me -- could you rephrase it and be a little more detailed?
 
So it sounds like the "hidden" variable exists primarily to be checked to see if some action needs to take place server-side. This is starting to sound like a multi-use page with several action- or purpose-specific areas.

What was your reason on splitting this up into multiple HTML forms, as opposed to one single form?

As I [think] I have mentioned, there are several actions on this page. One form adds a record to the MySQL database, one form finds a specific record, etc. I'm sure there's a way to do it on a single form, but I went with multiple forms, instead.

OP, i can help you figure out what javascript would be needed but your question isn't really clear to me -- could you rephrase it and be a little more detailed?

Well, because the listbox that has the values for the table name is in a different form than the form where the action takes place, the PHP script cannot find the listbox. I was told in an efnet html IRC channel that in order to properly do this, I'd have to use javascript.

If you need anything else, please let me know.
 
Well, because the listbox that has the values for the table name is in a different form than the form where the action takes place, the PHP script cannot find the listbox. I was told in an efnet html IRC channel that in order to properly do this, I'd have to use javascript.

If you need anything else, please let me know.

Right, the part I want is the entire use case -- I get that you want to access another form, but I don't understand in what way.. I need to know what input item you're getting data from (a select/listbox, a checkbox, input field?) and where it's going... :D If it's a listbox you're getting data FROM, do you need the "value" or the selected text shown to the user? they're different..
 
As I [think] I have mentioned, there are several actions on this page. One form adds a record to the MySQL database, one form finds a specific record, etc. I'm sure there's a way to do it on a single form, but I went with multiple forms, instead.
A multi-purpose form yes, but the purpose of each form/action and how the different forms/actions relate to each other was not known until this comment.

I agree with amromousa that having defined "use cases" for this is going to be a better way for us to provide an answer.
 
Ok, now that I've gotten sleep of some sort...

The main listbox (which is in its own form) has 6 or 7 entries, each with an onClick whatchamacallit and a value assigned to it. The values are the names of the various tables in my database. In the PHP scripts. Now, say I'm using the 'list all' action, I have the MySQL queries as "SELECT * FROM $table ORDER BY id ASC", for example. Where 'id' is the id column in my tables, of course. Of course, this doesn't work very well as no matter what I do, it sends "SELECT * FROM ORDER BY id ASC".

I'm aware that you have to use javascript to take the value in the object and put it into its own variable, and then output that variable into an object in another form. I just can't seem to figure this one out :S.

If you need anything else, just let me know, that's all I can think of to add at the moment.
 
Ok, so if I'm understanding you properly, the "hidden input field" idea was right on. In the secondary form (which triggers the select) add something to the effect of:

Code:
<input type="hidden" name="table" id="table" value="" ... />

Your select might look something like this:
Code:
<select id="myselect" onchange="mychangehandler()" .......>
    <option....>
    ....
</select>

Your onchange function (on the select) might look like this:
Code:
var mychangehandler = function()
{
    //get the select object itself
    var mysel = document.getElementById("myselect");
    //get the value of the selected item
    var myval = mysel.options[mysel.selectedIndex].value;
    //set the value of the hidden input field
    document.getElementById("table").value = myval;
}

Now, when the 2nd form posts, you should be able to access the "table" value to put into your query. Does that help?

Edit: Obviously the "..." in the examples above would be replaced by your own code (as needed).
 
Ok, so if I'm understanding you properly, the "hidden input field" idea was right on. In the secondary form (which triggers the select) add something to the effect of:

Code:
<input type="hidden" name="table" id="table" value="" ... />
Your select might look something like this:
Code:
<select id="myselect" onchange="mychangehandler()" .......>
    <option....>
    ....
</select>
Your onchange function (on the select) might look like this:
Code:
var mychangehandler = function()
{
    //get the select object itself
    var mysel = document.getElementById("myselect");
    //get the value of the selected item
    var myval = mysel.options[mysel.selectedIndex].value;
    //set the value of the hidden input field
    document.getElementById("table").value = myval;
}
Now, when the 2nd form posts, you should be able to access the "table" value to put into your query. Does that help?

Edit: Obviously the "..." in the examples above would be replaced by your own code (as needed).

It's still getting a null value.

I know on the code itself, there are things that are supposed to be replaced to fit my code, but for the function() part, is that supposed to be replaced as well? Why wouldn't you use a "function functionname()" in this case?
 
It's still getting a null value.

I know on the code itself, there are things that are supposed to be replaced to fit my code, but for the function() part, is that supposed to be replaced as well? Why wouldn't you use a "function functionname()" in this case?

whichever should work. where are you getting null? i would start by putting in alerts and trying to figure out where you're getting the null. you could put a button on the page, temporarily, for testing..have its onclick alert the value you're trying to get. could you post a code snippet?
 
I'll come back to this tomorrow when I have nothing to do. I know it's not because there are objects in the page with the same name/id, I checked.
 
ok, can you show me a code snippet of one of your option tags?

I'm guessing you mean from the select boxes? No problem.

Code:
<br>Select Item Type:</br>
<select id="tablelist" name="tablelist" onchange="tablechange()">
<option onclick="pc()" value="PC">PC</option>
<option onclick="monitor()" value="monitor">Monitor</option>
<option onclick="peripheral()" value="peripheral">Peripheral</option>
<option onclick="printer()" value="printer">Printer</option>
<option onclick="projector()" value="projector">Projector</option>
<option onclick="tv"()" value="tv">TV</option>
<option onclick="vcrdvd()" value="vcrdvd">VCR/DVD Player</option>
<option onclick="camera()" value="camera">Photo/Video Camera</option>
<option onclick="cd()" value="cd">CD Player</option>
</select>

BTW, the onClick commands for the entries are for a function to change what textboxes are enabled/disabled.
 
I'm guessing you mean from the select boxes? No problem.

Code:
<br>Select Item Type:</br>
<select id="tablelist" name="tablelist" onchange="tablechange()">
<option onclick="pc()" value="PC">PC</option>
<option onclick="monitor()" value="monitor">Monitor</option>
<option onclick="peripheral()" value="peripheral">Peripheral</option>
<option onclick="printer()" value="printer">Printer</option>
<option onclick="projector()" value="projector">Projector</option>
<option onclick="tv"()" value="tv">TV</option>
<option onclick="vcrdvd()" value="vcrdvd">VCR/DVD Player</option>
<option onclick="camera()" value="camera">Photo/Video Camera</option>
<option onclick="cd()" value="cd">CD Player</option>
</select>

BTW, the onClick commands for the entries are for a function to change what textboxes are enabled/disabled.

Ok, so first of all, does this work in IE6? I don't think it (not sure about 7) supports event handlers on option tags. I could be wrong on that one, but I'm pretty sure that's the case. You should be able to use the onchange handler to do whatever it is you want to do.

Next, you should put an alert in tablechange() and try to alert the value you're setting on your hidden input field.

e.g.
Code:
alert('the val is: ' + myval);

Make sure to put preceding text as IE may not show the alert if the value is null/undefined.

You may also want to wrap all of the code in that function in a try/catch block and alert the exception message itself -- that would be of use as well. I'd need to see the code for tablechange() to help more.
 
Ok, it doesn't work on IE7, but it works on Firefox. You'd think a browser coming from a company like Microsoft would support. I'll fix that later.

Anyway, The alert says that MyVal is registering as whatever I select in the textbox, so that means the problem is in when it goes from JS to HTML, I'll do some digging.

Edit: Only one thing with the id 'table'.

This is what I have

Code:
function tablechange()
{
    var mysel = document.getElementById("tablelist");
    var myval = mysel.options[mysel.selectedIndex].value;
    document.getElementById("table").value = myval;
    alert ('MyVal is ' + myval);
}

Tomorrow, I'll check to see whether it's crapping out when it goes to the hidden input box, or when it goes from there to PHP.
 
The hidden input is obviously on the same page, right? I'd change the id to something else. I try to stay away from reserved words (although it probably doesn't matter).

Well, actually, you probably want to try and alert the value of the hidden input field after you set it. If it's being set, then you have a problem with how you're reading the value after the POST.
 
Ok, it's kinda working, now I got all sorts of other errors to fix :p Now I have to figure out how to change the PHP Script so it only uses specific values depending on what's selected. Should be able to that with if/then statement, right?

Thanks.

Edit: Ok, at this point, I got it all figured out.
 
Ok, it's kinda working, now I got all sorts of other errors to fix :p Now I have to figure out how to change the PHP Script so it only uses specific values depending on what's selected. Should be able to that with if/then statement, right?

Thanks.

Edit: Ok, at this point, I got it all figured out.

Excellent. A select/case statement would also be appropriate for this.
 
Ok, another thing I need to know. I found a page, lost it, and haven't been able to find it since.

How would you go about changing the values of another listbox when something in the main listbox is selected?

Ex.

ListboxA
Opt1
Opt2


If Opt1 is selected:

ListboxB
OptA
OptB

If Opt2 is selected:

ListboxB
OptC
OptD
 
Ok, another thing I need to know. I found a page, lost it, and haven't been able to find it since.

How would you go about changing the values of another listbox when something in the main listbox is selected?

Ex.

ListboxA
Opt1
Opt2


If Opt1 is selected:

ListboxB
OptA
OptB

If Opt2 is selected:

ListboxB
OptC
OptD

Actually, it's easier not to bother doing that (although it's possible). It's better (imo) to simply have two list boxes (selects, combo boxes, whatever you want to call them), put them in divs and use javascript to hide/show the divs based on the selection of the first list box.
 
Ok, could you please explain to me how to use the onChange function? As this is going to be used primarily on IE.
 
Back
Top