...

View Full Version : Resolved Submit Button outside the form tags



chauptman
10-09-2011, 11:13 PM
Is there a way so that I can move the submit button outside of the form tags? and if this is possible, can you make it with multiple text boxes, each with their corresponding submit button?



heres the coding



<html>
<head>
<script type="text/javascript">
<!--
function gotoURL() {
var newURL = document.url2go.go.value
document.location.href=newURL
}
//-->
</script>
</head>
<body>



<form action="javaScript:gotoURL()" method="get" name="url2go">
<input type="text" name="go" value="http://" size="50">
<INPUT TYPE="image" SRC="" id="go" HEIGHT="150" WIDTH="150" BORDER="0" ALT="Submit Form">
</form>
</body>
</html>

Old Pedant
10-09-2011, 11:33 PM
Short answer: No.

ALL form field have to be between <form>...</form> in order to be seen/usable by server side code and the submit button, especially, affects only the <form> it is inside of.

Longer answer: Yes, if you don't use a submit button.

Even longer answer: What does this have to do with the code you show there? You aren't actually submitting the <form>, at all. Using location.href utterly bypasses the form submit.

Personally, were I doing something like you are, and assuming you want to have many text fields and many image submits, I'd either put each pair into a separate <form> (no reason not to have many forms on a page) or I'd just put many into a single page and have the image-submit designate which text field it refers to.

Example of second case:


<script>
function go(which)
{
location.href = document.forms[0]["go" + which].value;
return false;
}
</script>

<form>
<input name="go1" />
<image src="xxx.png" onclick="return go(1);" />
...
<input name="go2" />
<image src="xxx.png" onclick="return go(2);" />
...
<input name="go3" />
<image src="xxx.png" onclick="return go(3);" />


The return in the onclick and the return false from the function will ensure you don't have a race condition, with the normal <form> submit racing your location.href change of url.

Old Pedant
10-09-2011, 11:37 PM
If you opt for many <form>s instead, that's even easier:


<script>
function gotoURL(clicked)
{
clicked.form.action = clicked.go.value;
return true;
}
</script>
...
<form action="" method="get" onsubmit="return gotoURL(this);">
<input name="go"/>
<image src="xxx" />
</form>
...
<form action="" method="get" onsubmit="return gotoURL(this);">
<input name="go"/>
<image src="xxx" />
</form>
...
<form action="" method="get" onsubmit="return gotoURL(this);">
<input name="go"/>
<image src="xxx" />
</form>

Have as many of those <form>s as you want, all identical.

chauptman
10-10-2011, 01:48 AM
this works great thank you!

Now I can't seem to write a cookie for it, so when they type it in it will save, without a submit button=/

Old Pedant
10-10-2011, 02:59 AM
So show your code.

What do you want to store in the cookie? Why? Where will the cookie be read and used, later?

In either of those functions, if you set the cookie *FIRST THING*, you should be fine.

In the second one, you could set the cookie just before the return, but you couldn't safely do that in the first one.

chauptman
10-10-2011, 03:50 AM
The drop down menu cookies work fine, except I don't know how to implement a cookie into the text box area to save what sometime types in. I don't mean to be a bug or anything, I'm just stumped.



<?xml version="1.0" encoding=""?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>


<script type="text/javascript">
var expDays = 30;

function setCookie(name, val)
{
var exp = new Date()
var cookieTimeToLive = exp.getTime() + (expDays * 24 * 60 * 60 * 1000)
exp.setTime(cookieTimeToLive)
document.cookie = name + "=" + escape(val) + "; expires=" + exp.toGMTString()
}

function getCookie(name)
{
var cookieNameLen = name.length
var cLen = document.cookie.length
var i = 0
var cEnd
var myStringToReturn
var myStringToReturnLen
while (i < cLen)
{
var j = i + cookieNameLen
if (document.cookie.substring(i,j) == name)
{
cEnd = document.cookie.indexOf(";",j)
if (cEnd == -1)
{
cEnd = document.cookie.length
}
myStringToReturn = unescape(document.cookie.substring(j,cEnd))
myStringToReturnLen = myStringToReturn.length
myStringToReturn = myStringToReturn.substring(1,myStringToReturnLen+1)
return myStringToReturn
}
i++
}
return ""
}


function setDefaultValues()
{
for (var i=0; i<document.forms.length; i++)
{
for (j=0; j<document.forms[i].elements.length; j++)
{
var formField = document.forms[i].elements[j];
if (formField.className == "menu")
{
var strCookieName = formField.name;
var strCookieVal = getCookie(strCookieName);
if (strCookieVal != null && !(isNaN(strCookieVal)) && strCookieVal != '')
{
formField.selectedIndex = strCookieVal;
}
showimage(formField);
}
}
}
}

function linkrotate(which)
{
var mylinks = new Array();
//add in more links if you want (ie:mylinks[3]=...)
mylinks[0] = "http://www.ask.com";
mylinks[1] = "http://www.bing.com";
return mylinks[which];
}

function showimage(menu)
{
var docImages = document.getElementsByTagName('img');
for (var i=0; i<docImages.length; i++)
{
if (docImages[i].className == menu.name)
{
var pic = docImages[i];
break;
}
}
pic.src = menu.options[menu.selectedIndex].value;
pic.parentNode.href = linkrotate(menu.selectedIndex);
setCookie(menu.name, menu.selectedIndex)
}

window.onload = setDefaultValues;

function go(which)
{
location.href = document.forms[0]["go" + which].value;
return false;
}
</script>


</head>
<body>
<div align="center">
<a href="http://www.google.com"><" id="pictures" width="150" height="150" border="0" class="picture"></a>
<a href="http://www.google.com"><img src="/google.png" id="pictures2" width="150" height="150" border="0" class="picture2" ></a>
<image src="s/custom1.png" onclick="return go(1);" width="150" height="150" border="0"/>
<br><br>


<form name="mygallery">
<select class="menu" name="picture" onchange="showimage(this);" size="1">
<option value="http:/ask.png">Ask</option>
<option selected value="httpom/images/bing.png">Bing</option>
</select>
</select>




<form name="mygallery2">
<select class="menu" name="ges/bing.png">Bing</option>
</select>


<input name="go1" />

</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum