Forum Moderators: open
I'm trying to re-write document.mainform.action within an OnClick event tied to a graphic image "button" and display the results in a popup window.
So I have a normal button on the page which, as you would expect, posts the data to the "action" URL of the form.
When the graphic button is clicked, I switch the "action" to a different script, and try to display the results in a popup window:-
<form name="mainform" action="normalsubmit.php" method="post"><input type="image" src="pushme.jpg" name="action" value="PushTheButton"
onClick="document.mainform.action='TheOtherSubmit.php'";
document.mainform.target="foobar:width={350}, height={150}, scrollbars, {(isResizable)?'resizable':''},status";
document.mainform.onSubmit="return createTarget(this)";
document.mainform.submit();>
The function I'm using to set the popup dimensions is:-
<!-- Begin
// test variables
var myHeight = 200;
var isResizable = true;function createTarget(form) {
_target = form.target;
_colon = _target.indexOf(":");
if(_colon!= -1) {
form.target = _target.substring(0,_colon);
form.args = _target.substring(_colon+1);
} else if(typeof(form.args)=="undefined") {
form.args = "";
}
if(form.args.indexOf("{")!=-1) {
_args = form.args.split("{");
form.args = _args[0];
for(var i = 1; i < _args.length;i++) {
_args[i] = _args[i].split("}");
form.args += eval(_args[i][0]) + _args[i][1];
}
}
form.args = form.args.replace(/ /g,"");
_win = window.open('',form.target,form.args);
if(typeof(focus)=="function")
_win.focus();
return true;
}
// End -->
The form action target seems to be set correctly and does call the other script, so that part works fine, but I can't seem to get the popup part to work (the result is displayed in the same page instead).
I can get the popup to work fine in isolation (i.e. if I don't do the form.action switching part).
Is it not possible to have both of these actions incorporated into the OnClick event?
Thanks all!
TJ
Firstly, there is some highly erroneous quoting going on in that inline onClick handler.
I'd advise putting all that into a function, and calling it.
I haven't had the chance to see what you're doing. I suspect there's a simpler way. Just can't remember how to do it yet.
<html>
<script type="text/javascript">function popSubmit(form)
{
var popName = "formPopUp";
var popStyle = "width=300,height=300,location=yes,resizable=yes";
form.action = "theOtherSubmit.php";
form.target = popName;
window.open("about:blank",popName,popStyle);
}
</script>
<head>
<title>Table Row CSS Visibity Test</title><form name="form1"
method="get"
action="normalSubmit.php">
<input name="text1" type="text" value="some text"><br>
<!-- normal -->
<input type="submit" value="submit"><br>
<!-- popup -->
<input type="image" src="someImage.gif"
width="100" height="100"
onclick="popSubmit(this.form);">
</form></body>
</html>
But I'm still a little confused as I can't seem to get my code to work.
Here's the page source:-
<html>
<script type="text/javascript">
function popSubmit(form)
{
var popName = "formPopUp";
var popStyle = "width=300,height=300,location=yes,resizable=yes";
form.action = "MySuperForm.php";
form.target = popName;
window.open("about:blank",popName,popStyle);
}
</script>
<head>
<title>TJ Test</title><form name="form1"
method="get"
action="normalSubmit.php"><whole load of form objects here>
<!-- popup -->
<input type="image" src="click.jpg" name="action" value="MySuperForm"
onclick="popSubmit(this.form);">
</form>
</body>
</html>
... and then in MySuperForm.php, I'm doing this:-
// Ok now let's see what they wanted
switch ($_REQUEST['action']) {// Seems they posted to me so let's process it
case 'MySuperForm':
To check when the new graphic button is clicked.
Doesn't seem to register. I'm convinced I'm doing something stupid here.... sorry, but I just can't see what it is.
Many thanks,
TJ
<input name="action" ...>
Because of the "flat" nature of the DOM still used in forms wrt naming, this conflicts with the form's own
actionTry it with a different name.
--------------------------------------
(Just out of interest...)
Before changeing the name of the input, you could also run it just once more, and do a:
print_r($_REQUEST);to see what, if anything, is being received.
I favoured using <input type="image"> because at least the form could still be submitted if JS-disabled. However, since in this case it would mean it being submitted to the wrong script, it seems a bit of a faulty fallback.
Image-submit buttons, when named, appear to send the x and y position values of the click event (from there own reference frame). In a query string they look like:
?action.x=23&action.y=35In PHP, for both GET and POST, the dots are replaced by underscores. Thus there is no
[blue]action[/blue][blue]action_x[/blue][blue]action_y[/blue]A solution would be to change the image-submit element for something else (as you had before). Everything remains the same, except you'll need to add
[blue]form.submit()[/blue]I would still recommend using some other name than "action".
Let's call it "actionType".
It seems there are 2 options for getting our value for actionType passed over, whilst using an image for the submission element.
1) Use a second submit button, name="actionType" value="MySuperForm".
Then restyle the button to llok like an image.
2) Use an image (perhaps wrapped in a link).
You'll then need a: <input type="hidden" name="actionType" value="normalSubmit">
The function will have to change the value of that before submitting.
However, it is not PHP that fudges the name=value pairs coming back, but the oh-so-wonderful MSIE browser. Moz-based browsers will indeed send all three values back [webmasterworld.com], the name, the name_x coordinate and the name_y coordinate. Therefore, best practice is to check for the existence of one of the coordinates in the $_POST superglobal, that way you will know that it was indeed clicked.
<?php
if (isset($_POST['name_x'])) {
...
?>
Typical!
I was thinking of suggesting a check for a name_x variable - it's certainly easier, but since the actual value wasn't being transmitted, I started to think of the (unlikely) eventuality where there might be more than one image submits with name="action". For IE users, we wouldn't know which one was clicked
(...but we would know which pixel! Daft.
So we'd have to combine the images into one, and use the x,y position to decide meaning)
<input type="image" name="foo"> -> foo_x
<input type="image" name="bar"> -> bar_x
<added>
Opera doesn't send the plain name value either.
</added>
<input type="image" src="click.jpg" name="action" value="MySuperForm"
onclick="popSubmit(this.form);">
The actual identifier is the value attribute. If we have 2 of these, with
value(..but we don't have 2, so I'll be quiet now)
Yes, you are absolutely right. Not getting the value (as a plain name=value pair) from an image submit button is, quite frankly, ridiculous.
<added>
Opera doesn't send the plain name value either.
</added>
I was wondering about that and just never took the time to test it in Opera. Yes, too lazy ;) Thanks for heads up, DrDoc.
But I'm further confused as I can't seem to get the thing to work. This is now officially a PHP problem for me, I might need to switch forum, but while we're here:-
if (isset($_POST['foo_x'])) {
echo "Foo was clicked";
}
Does not execute, even though the preceding line:-
print_r($_REQUEST);
Shows quite clearly it is:-
[foo_x] => 37 [foo_y] => 16
Am I missing something...?
Thanks for all the help so far - I'm sure it's so close I can smell it, but there must be something that I'm still doing wrong....
TJ
$_REQUEST['foo_x'] would work otherwise, but that doesn't really solve the problem :)
What does print_r($_POST) give you?
I'm assuming your form method is set to post?
D'OH!
Thanks doc ;)
Final JavaScript question, is it possible to do this:-
FILE: tj.js
<script type="text/javascript">
function popSubmit(form)
{
var popName = "formPopUp";
var popStyle = "width=305,height=160,location=no,resizable=no,scrollbars=no,toolbar=no";
form.action = "MySuperScript.php";
form.target = popName;
window.open("TJ Test",popName,popStyle);
}document.write('<input type="image" src="click.jpg" name="MySuperScript" onclick="popSubmit(this.form);">');
</script>
So that I can then insert this "new" button into any webpage form simply with a:-
<script src="tj.js"></script>
Or is that pushing my luck?
Thanks,
TJ
First, remove the script tags from your tj.js
Second, add the type attribute to the script tag calling your tj.js
Good to go :)
