How to pass image and values to another html page at one button click in html

Question

0.00/5 (No votes)

See more:

, +

This is in my first html page

HTML

<form type=get action="DisplayProduct.html">


    <pre>Quantity : <input name="passquan" id="Quantity" class="myinput" type="textbox" value="" readonly /></pre>
    <pre>Name     : <input name="passname" id="Name" class="myinput1" type="textbox" value="" readonly /></pre>
    <pre>Price    : <input name="passprice" id="Price" class="myinput2" type="textbox" value="" readonly /></pre>


    <A HREF="DisplayProduct.html?Australia.png">
    <img border="0" src="Australia.png" width="50" height="50"></A>

    <input type=submit value="View Details">
    </form>

and my DisplayProduct.html is,

XML

<html>
    <head>
        <title> Separate Product </title>
        <script language="JavaScript" type="text/javascript">
            if (location.search)
            {
                var image_filename = location.search.substring(1)
                //document.write('<IMG SRC="' + image_filename + '">')
                document.write('<IMG "STYLE="position:absolute TOP:200px LEFT:300px" SRC="' + image_filename + '">')
            }
        </script>

        <script LANGUAGE="JavaScript">
            function getParams(){
                var idx = document.URL.indexOf('?');
                var params = new Array();
                if (idx != -1) {
                    var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
                    for (var i=0; i<pairs.length; i++){
                        nameVal = pairs[i].split('=');
                        params[nameVal[0]] = nameVal[1];
                    }
                }
                return params;
            }
            params = getParams();
            quantity = unescape(params["passquan"]);
            name = unescape(params["passname"]);
            price = unescape(params["passprice"]);

            document.write("Quantity = " + quantity + "<br>");
            document.write("Product Name = " + name + "<br>");
            document.write("Product Price = " + price + "<br>");
            </script>

    </head>
    <body>
        <a href="indexcornew.html"> Back </a>

    </body>
</html>

i am able to pass values and image separately. but how to pass both images and values at the same time to another html page.

Posted 29-Jul-13 1:18am

SanjeevJayaram

Add a Solution

Comments

Prasad Khandekar 29-Jul-13 8:31am

Hello Sanjeev,

Are you trying to create this for a HTML based demo system? Your first page is correctly coded. In order to pass the image include a hidden filed containing the name of the image as shown below.

<input type="hidden" name="imgFile" value="Australia.png"/>

This will result in a GET url in which imgFile will be one of the query parameter. You can use following javascript to retrieve values from the query string.

function parseQueryString() {
var args = document.location.search.substring(1).split('&'); // Omit first ? and then remaining string is split at & character
var jsonArgs = {};
var arg, pair;
for (i = 0; i < args.length; i++) {
arg = unescape(args[i]);

if (arg.indexOf('=') == -1) {
jsonArgs[arg.trim()] = true;
} else {
pair = arg.split('=');
jsonArgs[pair[0].trim()] = pair[1].trim();
}
}
return jsonArgs;
}

You can retrieve desired parameter value as shown below.

var jp = parseQueryString();
var imgFile = jp.imgFile;

Regards,

SanjeevJayaram 1-Aug-13 0:56am

Thanks bro it works.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Naz_Firdouse · Answer 1 · 2013-07-29T02:07:00

Solution 1

have a look at this
Passing variables with forms[^]

Posted 29-Jul-13 2:07am

Naz_Firdouse

Comments

SanjeevJayaram 29-Jul-13 8:26am

I am able to pass values to another html page to another and also image. But my problem is how to pass both at the same time.(ie) by clicking one button.

Naz_Firdouse 29-Jul-13 8:43am

In the above example, the author is accessing username using Request.Form("username") and color using Request.Form ("favoritecolor").so you can follow the same