Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Submit Button outside the form tags

    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

    Code:
    <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>
    Last edited by chauptman; 10-10-2011 at 08:59 PM. Reason: forgot code tags

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    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:
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    chauptman (10-10-2011)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    If you opt for many <form>s instead, that's even easier:
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    chauptman (10-10-2011)

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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=/

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,620 Times in 4,583 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <?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>
    Last edited by chauptman; 10-11-2011 at 09:34 PM. Reason: spelling


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •