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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Button vs Clickable Image

    I have a "button" that calls formA, which in turns calls formB, all done through javascript. As a button:
    Code:
    <input type="button" value="Preview" onClick="popupform();">
    works perfectly. Of course the user doesn't want some ugly standard button. They want this beautiful image to show instead (personally, I think the .gif they made looks like barf, but that's besides the point...sorry).

    When I substitute
    Code:
    <input type="image" src="/preview/preview_button.gif" name-"preview" alt="Preview Your Item" border="0" onClick="popupform();">
    everything works as it should, except the original form, the one that has the button/image on it, becomes a 404 Object not found.

    The popupform() sets a bunch of cookies, and calls formB. FormB is a .php which reads the cookies and does some other stuff.

    Not that it should matter, but I am running everything locally in Vista using the XAMPP Apache Friends Edition and going through localhost (because formB is a .php)

    Thanks in advance.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    everything works as it should, except the original form, the one that has the button/image on it, becomes a 404 Object not found.
    Please post your complete code. And please be aware that the default onclick action of an element having type="image" is to submit its container form, where as an element with type="button" does nothing.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I can only post certain snippets of the code, as I am modifying a vendor's proprietary page.

    In the first form, in the <head>:
    Code:
    <script type="text/javascript"> 
    function popupform()
    {
    	var scrny = 0;
    	var scrnx = 200 ;
        <!--[if gte IE 7]><!-->
    		scrny = 100 ;
    	<!--<![endif]-->
        <!--[if IE 6]><!-->
    		scrny = 100 ;
    		scrnx = 350 ;
    	<!--<![endif]-->
    	var childName = document.MainForm.TEXTBOX___68___HOWLINGHOUSEPUZZLE_SM___28.value ;
    	var sIndex = document.MainForm.SELECT___HOWLINGHOUSEPUZZLE_SM___42.selectedIndex ;
    	var gender = document.MainForm.SELECT___HOWLINGHOUSEPUZZLE_SM___42.options[sIndex].text ;
    	var street = document.MainForm.TEXTBOX___77___HOWLINGHOUSEPUZZLE_SM___19.value ;
    	var city = document.MainForm.TEXTBOX___83___HOWLINGHOUSEPUZZLE_SM___35.value ;
    	var child1 = document.MainForm.TEXTBOX___73___HOWLINGHOUSEPUZZLE_SM___27.value ;
    	var child2 = document.MainForm.TEXTBOX___75___HOWLINGHOUSEPUZZLE_SM___29.value ;
    	var child3 = document.MainForm.TEXTBOX___78___HOWLINGHOUSEPUZZLE_SM___30.value ;
    	var pet = document.MainForm.TEXTBOX___89___HOWLINGHOUSEPUZZLE_SM___40.value ;
    
    	document.cookie = "child=" + encodeURIComponent(childName) ;
    	document.cookie = "gender=" + encodeURIComponent(gender) ;
    	document.cookie = "street=" + encodeURIComponent(street) ;
    	document.cookie = "city=" + encodeURIComponent(city) ;
    	document.cookie = "child1=" + encodeURIComponent(child1) ;
    	document.cookie = "child2=" + encodeURIComponent(child2) ;
    	document.cookie = "child3=" + encodeURIComponent(child3) ;
    	document.cookie = "pet=" + encodeURIComponent(pet) ;
    
    	var windowname='xxxHidden.html'
    	var myForm = 'join' ;
    	newWin = window.open(windowname, myForm,'height=600,width=550,scrollbars=yes,resizeable=no,toolbar=no,location=no');
    	newWin.moveTo(scrnx, scrny) ;
    	myForm.target=windowname;
    	return true;
    }
    </script>
    in "xxxHidden.html" (this is an intermediate form that does it's stuff,
    calls xxxPreview.php, and goes away):
    Code:
    <head>
    <script type="text/javascript">
    function popupform()
    {
    
    	var windowName = '' ;
    	var myForm = 'join' ;
    	var newWin = window.open('', windowname, 'height=600,width=550,scrollbars=yes,resizeable=no,toolbar=no,location=no');
    	myform.target=windowname;
    	adios.click() ;
    	return true;
    }
    
    function getCookies()
    {
    	var cookieString=decodeURIComponent(document.cookie) ;
    // did this cookie stuff as the vendor (whose form I am amending) also uses cookies.
    	var cookieArray = cookieString.split("; ") ;
    	var cookieAAry = new Array(cookieArray.length) ;
    	var arIndx ;
    	var arVal ;
    	var arEle ;
    	for (var ckyCt = 0; ckyCt < cookieArray.length; ckyCt++)
    	{
    		arEle = cookieArray[ckyCt] ;
    		arIndx = cookieArray[ckyCt].substring(0, arEle.indexOf("=")) ;
    		arVal = cookieArray[ckyCt].substring(arEle.indexOf("=") + 1, arEle.length) ;
    		cookieAAry[arIndx] = arVal ;
    	}
    
    	document.myForm.child.value = cookieAAry["child"] ;
    	document.myForm.cgender.value = cookieAAry["gender"] ;
    	document.myForm.street.value = cookieAAry["street"] ;
    	document.myForm.city.value = cookieAAry["city"] ;
    	document.myForm.child1.value = cookieAAry["child1"] ;
    	document.myForm.child2.value = cookieAAry["child2"] ;
    	document.myForm.child3.value = cookieAAry["child3"] ;
    	document.myForm.pet.value = cookieAAry["pet"] ;
    	document.myForm.adios.click() ;
    }
    </script>
    </head>
    <body onLoad="getCookies();">
    
    <form method="post" name="myForm" action="xxxPreview.php">
    <input type="text" name="child"><br />
    <input type="text" name="cgender"><br />
    <input type="text" name="street"><br />
    <input type="text" name="city"><br />
    <input type="text" name="child1"><br />
    <input type="text" name="child2"><br />
    <input type="text" name="child3"><br />
    <input type="text" name="pet"><br />
    
    <input name="adios" type="submit" value="Preview" onClick="popupform();">
    
    </form>
    </body>
    </html>
    "xxxPreview.php" simply gets the field values from $_POST and does some simple
    processing mixing fixed text with the variable text coming from the original form. There are no problems here.

  • #4
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Never mind....I solved it with another in-elegant work-around:
    Code:
    <a onClick=popupform('xx');" onMouseOver="this.style.cursor='pointer';"><img src="xxx.gif" name="preview" alt="Preview your item"></a>
    Thanks for your time. I feel dumb answering my own questions! Sorry.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    *PROBABLY* you could have fixed it more simply:
    Code:
    <input type="image" src="/preview/preview_button.gif" name-"preview" 
           alt="Preview Your Item" border="0" onClick="popupform(); return false;">
    As abduraooft said, an <input type=image> acts as a SUBMIT button. If you don't do the return false from the onclick, then it *WILL* try to submit the <form> containing it. And that is probably what was causing the error.
    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.


  •  

    Tags for this Thread

    Posting Permissions

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