Submitting info with JS

[FP]

This should be simple but I just can't seem to figure it out.
I have a form with 2 checkboxes in it. Clicking either checkbox runs a
js function which opens a new window. The form targets that new
window.
How can I pass a hidden value letting the new window know which
checkbox was clicked?
Below is the code I'm currently using:

function JSCheckbox(WhichForm) {
window.open('', "CheckboxWindow", 'height=1,width=1');
document.getElementById(WhichForm).submit();
}


<form id="FormCheckbox1" method="post" action="checkbox.php"
target="CheckboxWindow">
<input type="hidden" name="TheRecID" value="1">
<input type=checkbox NAME="FlagDone" VALUE="1"
onclick="JSCheckbox('FormCheckbox1');">
.... second checkbox
</form>

 

[Randy Webb]

FP said the following on 7/20/2006 4:26 PM:

This should be simple but I just can't seem to figure it out.
I have a form with 2 checkboxes in it. Clicking either checkbox runs a
js function which opens a new window. The form targets that new
window.

Hmmm. And if you just submit the form, guess what happens?
Yeah, it opens the window for you, gives it the name, and even passes
the form information.

How can I pass a hidden value letting the new window know which
checkbox was clicked?

Change the method of your form and get it from the querystring.
Or, have the PHP file return it into the page.

Below is the code I'm currently using:

function JSCheckbox(WhichForm) {
window.open('', "CheckboxWindow", 'height=1,width=1');
document.getElementById(WhichForm).submit();
}

And I suppose you get a 1x1 window?

<form id="FormCheckbox1" method="post" action="checkbox.php"
target="CheckboxWindow">
<input type="hidden" name="TheRecID" value="1">
<input type=checkbox NAME="FlagDone" VALUE="1"
onclick="JSCheckbox('FormCheckbox1');">
.... second checkbox
</form>

That is a ridiculously dumb way to try to open a new window and target a
form to it. Sorry for the blunt response but it is.

 

[FP]

FP said the following on 7/20/2006 4:26 PM:

Hmmm. And if you just submit the form, guess what happens?
Yeah, it opens the window for you, gives it the name, and even passes
the form information.

Alright, I suppose I should have clarified that the new window closes
itself again afterwards and I don't want the window that you're
origionally in to disappear or reload. I know you've already told me
to do this with iFrames but after spending an hour trying to figure out
how to make that work I figured I'll stick with my clunky way of
displaying a new window and having it run the required PHP code.

Change the method of your form and get it from the querystring.
Or, have the PHP file return it into the page.

When you say "Change the method of your form and get it from the
querystring" are you saying I should add which checkbox was clicked as
part of the URL?
Since both checkboxes submit the same form and call the same JS
function I don't know how to add which checkbox was clicked as part of
the information that is transfered to the processing page.

And I suppose you get a 1x1 window?

IE 5.2 on the Mac does, Safari & Netscape don't.

That is a ridiculously dumb way to try to open a new window and target a
form to it. Sorry for the blunt response but it is.

I don't mind the blunt response, after 20 hours of playing with
javascript I don't know any better; what would be more helpfull is the
correct way to do this.
So how would you do the following;
- the processing has to take place in a new window without
disrupting the current window
- the processing window has to know what checkbox was clicked
- there are other hidden fields that are passed

 

[Randy Webb]

FP said the following on 7/20/2006 5:36 PM:

Alright, I suppose I should have clarified that the new window closes
itself again afterwards and I don't want the window that you're
origionally in to disappear or reload.

And it will still do that if you just submit the form and have the
loading page close itself. But life is simpler than that.

I know you've already told me to do this with iFrames but after
spending an hour trying to figure out how to make that work I
figured I'll stick with my clunky way of displaying a new window
and having it run the required PHP code.

If your only need is to have a PHP script execute, you don't need the
IFrame or the new window. You only need them if you want some return
value from the PHP code.

When you say "Change the method of your form and get it from the
querystring" are you saying I should add which checkbox was clicked as
part of the URL?

No, change the method from post to get and the browser will
automatically add it to the URL. But, have the PHP code read the
submitted form data. Your checkbox and hidden field values will be
available to it.

Since both checkboxes submit the same form and call the same JS
function I don't know how to add which checkbox was clicked as part of
the information that is transfered to the processing page.

The browser does it for you. Try it. The PHP page will have access to
the checked checkbox.

IE 5.2 on the Mac does, Safari & Netscape don't.

Nor any browser on a PC. The smallest window I recall being able to open
on a PC was 100x100 or so.

I don't mind the blunt response, after 20 hours of playing with
javascript I don't know any better; what would be more helpfull is the
correct way to do this.

Fair enough.

So how would you do the following;
- the processing has to take place in a new window without
disrupting the current window

Actually, it doesn't. You can do it in the same window without
disrupting it.

- the processing window has to know what checkbox was clicked

It does if the form is submitted.

- there are other hidden fields that are passed

If you are not getting a return value from the PHP code, you can simply
set the .src of an Image Object to the string you need.

"How do I run a server side script?"
<URL: http://jibbering.com/faq/#FAQ4_34>

<iframe name="myIFrame" style="width:0px;height:1px;"></iframe>

target="window.frames['myIFrame']"

And submit your form....

 

[FP]

Randy,
I assume there is something very basic I'm not understanding here.
Previously I had 2 forms;
- 1 form for checkbox Done
- 1 form for checkbox Monitor

Both forms called the same HTML page and submitted the hidden value
"RecID" and "CheckboxClicked", however CheckboxClicked had either the
value "Done" or "Monitor".

These forms were submitted to an html page which just had the PHP code:
....
if($_REQUEST['CheckboxClicked']=='Done'){
//toggle database value for flagdone
}else{
//toggle database value for flagmonitor
}


I'm trying to put both checkboxes in the same form because display wise
they're not lining up in older browsers. The problem is:
I don't know how to set "CheckboxClicked" to "Done" or "Monitor"
depending on the checkbox the user clicked on.
Or if I have to have each checkbox call a different javascript
functions then I don't know how to set "CheckboxClicked" from within
the javascript function.

If either of the above 2 is possible, could you please write out the
code that will do that.
Thanks in advance.

 

[Randy Webb]

FP said the following on 7/20/2006 11:34 PM:

Randy,
I assume there is something very basic I'm not understanding here.

Yes, there is.

Previously I had 2 forms;
- 1 form for checkbox Done
- 1 form for checkbox Monitor

Both forms called the same HTML page and submitted the hidden value
"RecID" and "CheckboxClicked", however CheckboxClicked had either the
value "Done" or "Monitor".

These forms were submitted to an html page which just had the PHP code:
....
if($_REQUEST['CheckboxClicked']=='Done'){
//toggle database value for flagdone
}else{
//toggle database value for flagmonitor
}

OK, simple enough.

I'm trying to put both checkboxes in the same form because display wise
they're not lining up in older browsers. The problem is:
I don't know how to set "CheckboxClicked" to "Done" or "Monitor"
depending on the checkbox the user clicked on.

<input type="checkbox" name="CheckboxClicked" value="Done">
<input type="checkbox" name="CheckboxClicked" value="Monitor">

Now, when the form gets submitted, PHP will read the value of
CheckboxClicked and act accordingly. And, you don't even have to submit
the form to trigger the PHP script.

Or if I have to have each checkbox call a different javascript
functions then I don't know how to set "CheckboxClicked" from within
the javascript function.
Neither.

If either of the above 2 is possible, could you please write out the
code that will do that.

The first is simple, the second is like using a sledgehammer to drive a
finishing nail in. Its overkill.


What you want to do is this simple:

function runPHPScript(radioButton){
//code below copied from the FAQ and modified
var dummyImage = new Image();
dummyImage.src="scriptURL.php?"+radioButton.name+'='+radioButton.value;
//replace scriptURL.php with the path to your php script
}

<input type="radio" name="CheckboxClicked" value="Done"
onclick="runPHPScript(this)">
<input type="radio" name="CheckboxClicked" value="Monitor"
onclick="runPHPScript(this)">

I will let you ponder on why I changed them to radio buttons instead of
checkboxes (It works the same with either though).

 

[FP]

<input type="checkbox" name="CheckboxClicked" value="Done">
<input type="checkbox" name="CheckboxClicked" value="Monitor">

In the results page I was trying to figure out which checkbox was
clicked and update only it, now it finally occurred to me that it
doesn't matter which one was clicked, just update both. That was a
very stupid mistake and I understand why you didn't get the question I
was trying to ask.

Now, when the form gets submitted, PHP will read the value of
CheckboxClicked and act accordingly. And, you don't even have to submit
the form to trigger the PHP script.

I'm also new to PHP so I don't want to get into PHP scripts at this
point.

I will let you ponder on why I changed them to radio buttons instead of
checkboxes (It works the same with either though).

FlagDone is suppose to be completely independant of FlagMonitor, but I
see why you said that.



You had said in a different post that I was submitting the data in a
bad way by having a function open a new window and posting into it from
the form. I tried to modify my code and currently have;
<form method="post" action="donemonitor.php" target="WinDoneMonitor"
onsubmit="window.open('donemonitor.php', 'WinDoneMonitor', 'height=100
width=100');">
This works, new window opens, record is updated, window closes itself.
Only the height & width is not respected, how do I make that work?

Thanks again for your help so far.