CODEWITHSUNDEEP
javascriptjqueryhtml
user1301000
user1301000

Reputation: 33

How do I get the picture to load on the same page instead of on a new page

I have three drop down menus and these generate a result depending on what is selected. When pressing the button "Show picture" it opens up the picture on a new page. I would like it to load on the same page.

function f(){
    var gid=function(i){return document.getElementById(i);};
    var product_id=gid("one").value;
    var version_id=gid("two").value;
    var arch_id=gid("three").value;
    if(product_id==='default' || version_id ==='default' || arch_id === 'default'){return;}
    window.location.replace('images/' +product_id + '_' + version_id + '_' + arch_id + '.jpg');   
}
<select id="one">
    <option value="value-a1">string1</option>
    <option value="value-a2">string2</option>
    <option value="value-a3">string3</option>
</select>

<select id="two">
    <option value="value-b4">string4</option>
    <option value="value-b5">string5</option>
    <option value="value-b6">string6</option>
</select>

<select id="three">
    <option value="value-c6">string7</option>
    <option value="value-c7">string8</option>
    <option value="value-c8">string9</option>
</select>
<input onclick="Javascript:f();" value="Show picture" type="button"/>

Upvotes: 0

Views: 50

Answers (5)

Saravana Kumar
Saravana Kumar

Reputation: 3729

Add the new div in html code. Demo in JSFIDDLE

<div id="img"> </div>

Include the Jquery and use this function.

 function f(){
    var gid=function(i){return document.getElementById(i);};
    var product_id=gid("one").value;
    var version_id=gid("two").value;
    var arch_id=gid("three").value;
    if(product_id==='default' || version_id ==='default' || arch_id === 'default'){return;}       

     var img = $("<img />").attr('src', 'http://www.w3schools.com/images/w3css.gif')
    .load(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('broken image!');
        } else {
            $("#img").html(img);
        }
    });    
}

Upvotes: 0

Andrew Hewitt
Andrew Hewitt

Reputation: 331

Pulling your code in, I can see that it replaces the current browser URL with the url that you generate (not opening another browser tab or window) - so the browser (chrome in my case) navigates away to the URL that you generate (which is exactly what location.replace is intended to do).

Do you mean that you want to load the image into another tag / div / span / image?

To load a new div / image (using jquery):

$("<div>").appendTo("body").load(newUrl);

or

$("<img>").attr("src", newUrl).appendTo("body");

or

using raw js:

var img = document.createElement("img");
img.setAttribute("src", newUrl);

(use insertBefore etc to move the element around in the dom)

HTH!

Upvotes: 0

viral
viral

Reputation: 3743

This will do it, @Zeratops' answer will require JQuery to do job, this code below won't.

function f(){
var gid=function(i){return document.getElementById(i);};
var product_id=gid("one").value;
var version_id=gid("two").value;
var arch_id=gid("three").value;

if(product_id==='default' || version_id ==='default' || arch_id === 'default'){
    return;
}

gid("idOfTheNewImageTag").src='images/'+product_id + '_' + version_id + '_' + arch_id + '.jpg';   
}

Upvotes: 0

snehatulsi
snehatulsi

Reputation: 247

Try using link

window.open('images/' +product_id + '_' + version_id + '_' + arch_id + '.jpg','_self');

Upvotes: 0

Anwar
Anwar

Reputation: 4246

Create an empty <img></img> tag, and use this JQuery function to alter its source : 

function f(){
    var gid=function(i){return document.getElementById(i);};
    var product_id=gid("one").value;
    var version_id=gid("two").value;
    var arch_id=gid("three").value;

    if(product_id==='default' || version_id ==='default' || arch_id === 'default'){
        return;
    }

    $("#idOfTheNewImageTag").prop('src', product_id + '_' + version_id + '_' + arch_id + '.jpg');   
}

Upvotes: 1

Related Questions