CODEWITHSUNDEEP
javascripthtmlcoldfusion
user1218175
user1218175

Reputation: 1

Simple html/javascript

Basically, i have a bunch of images, and when I click on an image it sends the image ID, to a javascript function, that sets a value which is then processed later when I submit the form so that it goes to the next page (where I can query that value in coldfusion).

Oops, forgot the question: Basically, it doesnt do what I want it too. The variable with the values are not being sent to the next page it seems!

<html>
<head>

<Script type="text/javascript">

function recordClick(imageid)
{ 
var myfield = document.getElementById("numSend").value = imageid
}
</script>

</head>

<body>
<FORM action="nextPage.cfm" method="post">

<img src="1.png" NAME="image1" onclick="recordClick(1)"
<img src="2.png" NAME="image2" onclick="recordClick(2)"
<img src="3.png" NAME="image3" onclick="recordClick(3)"

<input type="hidden" id="numSend"/>
<input type="submit" value="Done"/>
</FORM>

</body>
</html>

Upvotes: 0

Views: 142

Answers (2)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

Your <img> tags are not properly closed. Also your hidden input doesn't have a name attribute so nothing will be sent to the server when you submit the form. Try like this:

<html>
<head>
    <title>test</title>
    <script type="text/javascript">
    function recordClick(imageid) { 
        var numSend = document.getElementById("numSend");
        numSend.value = numSend + imageid.toString();
    }
    </script>
</head>
<body>
    <form action="nextPage.cfm" method="post">
        <img src="1.png" name="image1" onclick="recordClick(1)" alt="" />
        <img src="2.png" name="image2" onclick="recordClick(2)" alt="" />
        <img src="3.png" name="image3" onclick="recordClick(3)" alt="" />

        <input type="hidden" id="numSend" name="numSend" />
        <input type="submit" value="Done" />
    </form>
</body>
</html>

Upvotes: 2

Rafael
Rafael

Reputation: 18522

I see one problem with the code – the hidden field doesn't have a name attribute, so the value won't be sent.

But apart from that, there is a possibility to achieve the same result without using JavaScript, but only plain HTML + CSS. Just look at this fiddle: http://jsfiddle.net/VVD3y/

if you don't click any icon, you will be just redirected to google. If you select one of the icons and click Done, you will be redirected to google with the query stackoverflow, google or mozilla. Just change the NAME attribute of every radio button, and in VALUE attributes put your image IDs.

If you'd like to send multiple values, just replace the radio buttons with checkboxes.

Upvotes: 1

Related Questions