How to pass value to querystring using JavaScript

Question

koneill 0 Newbie Poster

10 Years Ago

All,

I have an external JavaScript code - which basicially has
functionality so that different images are shown when a next or previous button is selected.
What I need to do and know is how to pass the value of the image to the querystring as I need
to use it further. Also I need the remote_sill value in the querystring to have
the default value of image_sill as such in the querystring upon first load.

So the external JavaScript is called like this in the page:

<script type="text/javascript" src="nextPrevious.js"></script>

In the HTML - of the previous and next buttons - I tried to pass the value as such with no luck:

<a href="#" onclick="prev()?remote_sill='+document.imgSrcOrig.src';"><img src="back.jpg" border="0" /></a>
<a href="#" onclick="next()?remote_sill='+document.imgSrcOrig.src';"><img src="next.jpg" border="0" /></a>

Here is the full nextPrevious.js code:

// List image names without extension
var myImg = new Array(4)
myImg[0] = "image_sill";
myImg[1] = "sill_image";
myImg[2] = "image_sill";
myImg[3] = "shape_3_still";
myImg[4] = "shape_sill";

// Tell browser where to find the image
myImgSrc = "sills/";

// Tell browser the type of file
myImgEnd = ".png"

var i = 0;

// Create function to load image
function loadImg() {
    document.imgSrcOrig.src = myImgSrc + myImg[i] + myImgEnd;
}

// Create link function to switch image backward
function prev() {
    if (i < 1) {
        var l = i
    } else {
        var l = i -= 1;
    }
    document.imgSrcOrig.src = myImgSrc + myImg[l] + myImgEnd;
}

// Create link function to switch image forward
function next() {
    if (i > 2) {
        var l = i
    } else {
        var l = i += 1;
    }
    document.imgSrcOrig.src = myImgSrc + myImg[l] + myImgEnd;
}

// Load function after page loads
window.onload = loadImg;

javascript

2 Contributors
5 Replies
802 Views
5 Days Discussion Span
Latest Post 10 Years Ago Latest Post by LesF

LesF 15 Well aged software developer

10 Years Ago

If you want to have a value posted back in the form data you can use a hidden control:

<input type='hidden' id='hidImageName' name='hidImageName' />

then update it's value when you update the image:

function SetImage()
{
  document.imgSrcOrig.src = myImgSrc + myImg[i] + myImgEnd;
  document.getElementById('hidImageName').value = myImg[i];
}
function prev()
{
  if (i > 0) i--;
  SetImage();
}
function next()
{
  if (i < (myImg.length -1)) i++;
  SetImage();
}

Then your postback data will incude a value named 'hidImageName'.

Edited 10 Years Ago by LesF because: Added final note

LesF 15 Well aged software developer

10 Years Ago

Try making the alerts:
alert(document.getElementById('hidimgSrcOrig').value);

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

koneill 0 Newbie Poster · Answer 1 · 2014-10-08T02:23:12+00:00

OK - so I created a test of this and the external js file below - the function prev() and function next() - the hidden image name from the setImage() - isn't being fired or passed in as the alerts I added are not displaying any values at all. below is the .js as well as a sample HTML I'm using:

// List image names without extension
var myImg = new Array(4)
myImg[0] = "image_sill";
myImg[1] = "sill_image";
myImg[2] = "image_sill2";
myImg[3] = "shape_3_still";
myImg[4] = "shape_sill";

// Tell browser where to find the image
myImgSrc = "sills/";

// Tell browser the type of file
myImgEnd = ".png"

var i = 0;

// Create function to load image
function loadImg() {
    document.imgSrcOrig.src = myImgSrc + myImg[i] + myImgEnd;
}

function SetImage()
{
  document.imgSrcOrig.src = myImgSrc + myImg[i] + myImgEnd;
  document.getElementById('hidimgSrcOrig').value = myImg[i] + myImgEnd;

}
// Create link function to switch image backward

function prev()
{
  if (i > 0) i--;
  SetImage();
  alert(hidimgSrcOrig);
}

function next()
{
  if (i < (myImg.length -1)) i++;
  SetImage();
  alert(hidimgSrcOrig);
}

// Load function after page loads
window.onload = loadImg;

--------------------------

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>JS Layer test</title>

<script type="text/javascript" src="nextPrevious.js"></script>
<style type="text/css">
.container {
    position: relative;
}

.imageOrig {
    position: absolute;
}

.image {
    position: absolute;
}

.imageOne {
    z-index: 0;
}

.imageTwo {
    z-index: 1;  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
  filter: alpha(opacity=50);
  opacity: 0.5;
}

 .navigation {
        width:430px;
        height:211px;

    }

</style>

<script language="JavaScript" type="text/javascript">

<!-- 
    function SubMail_Validator(customclockemail) {
        var imgSrcOrig = myImg.toString();

        if (customclockemail.from.value == "") {
            alert("Please enter a value for the E-mail field.");
            customclockemail.from.focus();
            return (false);
        }

        if (customclockemail.from.value.indexOf('@', 0) == -1) {
            alert("Invalid E-mail Address");
            customclockemail.from.focus();
            return (false);

        }

        return (true);



    }

    //-->
</script>

<script language="JavaScript">

    function myOnload() {
        image = document.getElementById("imageTwo");
        loadImg();
    }

    var x = 0;
    //var image = document.getElementById("imageTwo");
    function moveright() {
        image.style.left = (x += 5) + "px";
    }

    function moveleft() {
        image.style.left = (x -= 5) + "px";
    }

    function moveup() {
        image.style.top = (x -= 5) + "px";
    }

    function movedown() {
        image.style.top = (x += 5) + "px";
    }
</script>

</head>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" onload="myOnload()">

<div class="container">
<table border="0">
 <tr>
   <td valign="top" align="top">
            <img name="imgSrcOrig" id="imgSrcOrig" class="imageOne imageOrig">
             <?php if(isset($_REQUEST['show_image']) and $_REQUEST['show_image']!=''){?>
            <img src="images/<?php echo $_REQUEST['show_image'];?>" class="imageTwo image" id="imageTwo"><br/>
    </td>
    <td class="navigation">&nbsp;</td>
    <td class="navigation">
            <a href="#" onclick="moveright();">Move image right</a><br/>
            <a href="#" onclick="moveleft();">Move image left</a><br/>
            <a href="#" onclick="moveup();">Move image up</a><br/>
            <a href="#" onclick="movedown();">Move image down</a><br/>
            <a href="#" onclick="prev();"><img src="back.jpg" border="0" /></a>
            <a href="#" onclick="next();"><img src="next.jpg" border="0" /></a>    

            <form name="customclockemail" action="mail.php" onsubmit="return SubMail_Validator(this)" method="POST">
            <b>E-mail</b><br/>
                 <input type="text" name="from" size="25" /><br>
             <input type="hidden" name="imageTwo" id="imageTwo" value="<?php echo $_REQUEST['show_image']; ?>"/>

             <input type="hidden" name="hidimgSrcOrig" id="hidimgSrcOrig" />

             <input type="image" src="../images/buy_green.jpg" border="0" /><p>
            </form>      
    </td>
  </tr>
</table>
</div>

</body>
</html>

koneill 0 Newbie Poster · Answer 2 · 2014-10-08T13:07:32+00:00

Excellent - well I'm getting the values now!
I assume if I want to pass this into my mail script using PHP getting the hidden field value would be as such:
$img1 = $_POST['hidimgSrcOrig'];

LesF 15 Well aged software developer · Answer 3 · 2014-10-09T21:53:40+00:00

I'm a bit rusty on the PHP but I think that is correct, the value of a 'hidden' input field should be handled much like the value of a 'text' input.