#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    1
    Rep Power
    0

    Changing Image src wihtout page reload?


    Hi all.
    I've a small problem. I have a cgi application in server which returns an image based on given parameters. Now, i wanna change image in my page without reloading whole page. I've written following:
    Code:
    <html>
    <head>
    </head>
    	<script language="JavaScript">
    		function f(eventObj){
    	
    			var url = "http://localhost/cgi-bin/app.cgi?someOtherParameter" 
    			
    			//document.forms['form1'].img.src = url;
    			document.getElementByID("img2").src= url;
    
    			return false;
    		}	
    	</script>
    <body>
    	<form name="form1" method="get" action="/cgi-bin/app.cgi">
    		
    		<input type="image" name="img" src="http://localhost/cgi-bin/app1.exe?someParameter"  onclick="return f(this); return false;"/>
    
    	</form>
    	<img name="img2" id="img2" src="">
    </body>
    <html>


    The problem is that when code run reaches the line that changes src attribute, whole page reloads a just a new image will be shown in new page. How can i solve it?
    AJAX helps? How to implement it? (I've only seen responseText in AJAX codes).

    Thanks in advance
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,040
    Rep Power
    119
    This should do what your wanting it to do, as far as changing the image. Google "AJAX form submission"; to look into submitting your form variables with AJAX..., if that is what your wanting to do.

    Code:
    <html>
    <head>
    </head>
    	<script language="JavaScript">
    		function f(eventObj){
    	
    			var url = "http://localhost/cgi-bin/app.cgi?someOtherParameter" 
    			
    			//document.forms['form1'].img.src = url;
    			document.getElementById("img2").src= url;
    
    			return false;
    		}	
    	</script>
    <body>
    	<form name="form1" method="get" action="/cgi-bin/app.cgi">
    		
    		<input type="image" name="img" src="http://localhost/cgi-bin/app1.exe?someParameter"  onclick="f(this.src); return false"/>
    
    	</form>
    	<img name="img2" id="img2" src="">
    </body>
    <html>
    Last edited by web_loone08; September 23rd, 2012 at 07:40 PM.

IMN logo majestic logo threadwatch logo seochat tools logo