Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How do I make a click on an image link tick a checkbox on another html page?

Posted on 2008-10-08
3
Medium Priority
?
380 Views
Last Modified: 2008-10-08
Hi there!

I have 6 different images representing various house sizes here:

http://www.oxlund.net/storage/beregn-dit-pladsbehov.html

And then I have 6 different checkboxes representing the same sizes here:

http://www.oxlund.net/storage/bestil-opbevaring.html

When the user hovers over the house sizes and finds the size that suits him the best, he clicks on the image and a link appears below the text sending him to the order page where the appropriate checkbox has been ticked.

I assume it's supposed to be done with javascript, and i've searched everywhere for the solution, but with no luck.. Hope you can help me!!

I've attached the code for the images and for the checkboxes..

Thanks so much!
The Images:
 
                <ul class="TabbedPanelsTabGroup">
                  <li class="TabbedPanelsTab" onmouseover="TabbedPanels1.showPanel(this);"><img src="grafik/et-vaerelse.gif" /></li>
                  <li class="TabbedPanelsTab" onmouseover="TabbedPanels1.showPanel(this);"><img src="grafik/to-vaerelser.gif" /></li>
                  <li class="TabbedPanelsTab" onmouseover="TabbedPanels1.showPanel(this);"><img src="grafik/3_vaerelser.gif" /></li>
                  <li class="TabbedPanelsTab" onmouseover="TabbedPanels1.showPanel(this);"><img src="grafik/fire_vaerelser.gif" /></li>
                  <li class="TabbedPanelsTab" onmouseover="TabbedPanels1.showPanel(this);"><img src="grafik/fem-vaerelses.gif" /></li>
				  <li class="TabbedPanelsTab" onmouseover="TabbedPanels1.showPanel(this);"><img src="grafik/fem-vaerelses.gif" /></li>                
                </ul>
 
 
The Checkboxes:
 
             	<input class="check" name="" type="checkbox" value="" /><span class="check_value">3-5 m2</span> 
             	<input class="check" name="" type="checkbox" value="" /><span class="check_value">6-8 m2</span>  
				<input class="check" name="" type="checkbox" value="" /><span class="check_value">9-11 m2</span>  
				<input class="check" name="" type="checkbox" value="" /><span class="check_value">12-15 m2</span><br />  
				<input class="check" name="" type="checkbox" value="" /><span class="check_value">16-20 m2</span>
				<input class="check" name="" type="checkbox" value="" /><span class="check_value">over 21 m2</span>		
				<input class="check" name="" type="checkbox" value="" /><span class="check_value">Ønsker vejledning</span>

Open in new window

0
Comment
Question by:spl2381
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 10

Accepted Solution

by:
eguilherme earned 500 total points
ID: 22669977
on the beregn-dit-pladsbehov.html change this:

so that when the user clicks the img it will redirect to the other page with a parameter to know which house he clicked


                  <li class="TabbedPanelsTab" onmouseover="TabbedPanels1.showPanel(this);"><img onclick="window.location='bestil-opbevaring.html?h=1'" src="grafik/et-vaerelse.gif" /></li>
                  <li class="TabbedPanelsTab" onmouseover="TabbedPanels1.showPanel(this);"><img onclick="window.location='bestil-opbevaring.html?h=2'" src="grafik/to-vaerelser.gif" /></li>
                  <li class="TabbedPanelsTab" onmouseover="TabbedPanels1.showPanel(this);"><img onclick="window.location='bestil-opbevaring.html?h=3'" src="grafik/3_vaerelser.gif" /></li>
                  <li class="TabbedPanelsTab" onmouseover="TabbedPanels1.showPanel(this);"><img onclick="window.location='bestil-opbevaring.html?h=4'" src="grafik/fire_vaerelser.gif" /></li>
                  <li class="TabbedPanelsTab" onmouseover="TabbedPanels1.showPanel(this);"><img onclick="window.location='bestil-opbevaring.html?h=5'" src="grafik/fem-vaerelses.gif" /></li>
                                  <li class="TabbedPanelsTab" onmouseover="TabbedPanels1.showPanel(this);"><img onclick="window.location='bestil-opbevaring.html?h=6'" src="grafik/fem-vaerelses.gif" /></li>    

on the bestil-opbevaring.html add this at the <head> tag:

<script language="javascript">
function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}
function selChk()
{
     var id = gup('h')
     document.getElementById("chk_house_" + id).checked = true;
}
</script>

and on the body tag:

<body onload="selChk()">

and to finish, add those id's element to the checkboxes:

<input class="check" name="" type="checkbox" value="" id="chk_house_1"/><span class="check_value">3-5 m2</span>
                <input class="check" name="" type="checkbox" value="" id="chk_house_2" /><span class="check_value">6-8 m2</span>  
                                <input class="check" name="" type="checkbox" value="" id="chk_house_3" /><span class="check_value">9-11 m2</span>  
                                <input class="check" name="" type="checkbox" value="" id="chk_house_4" /><span class="check_value">12-15 m2</span><br />  
                                <input class="check" name="" type="checkbox" value="" id="chk_house_5" /><span class="check_value">16-20 m2</span>
                                <input class="check" name="" type="checkbox" value="" id="chk_house_6" /><span class="check_value">over 21 m2</span>            
                                <input class="check" name="" type="checkbox" value="" id="chk_house_7" /><span class="check_value">Ønsker vejledning</span>


ps. didnt test anything but i suppose it could work like this
0
 

Author Comment

by:spl2381
ID: 22670818
Hi eguilherme,

Thanks so much for the answer.. Works perfectly, except the <body onload="selChk()"> function breaks this other javascript file i have attached below. It's being used for clearing the textfields on focus, but stops clearing when i use the  <body onload="selChk()">. Any idea shat could be wrong?

Thanks again!
window.onload = formDefaultValues;
 
function formDefaultValues() {
  var fields = getElementsByClassName(document, "input", "javascript");
  if (!fields) {
    return;
  }
  var default_values = new Array();
  for (var i = 0; i < fields.length; i++) {
    fields[i].style.color = inactive_color;
    if (!default_values[fields[i].id]) {
      default_values[fields[i].id] = fields[i].value;
    }
    fields[i].onfocus = function() { 
      if (this.value == default_values[this.id]) {
        this.value = '';
        this.style.color = active_color;
      }
      this.onblur = function() {
        if (this.value == '') {
          this.style.color = inactive_color;
          this.value = default_values[this.id];
        }
      }
    }
  }
}
 
function getElementsByClassName(oElm, strTagName, strClassName){
  var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
  var arrReturnElements = new Array();
  strClassName = strClassName.replace(/\-/g, "\\-");
  var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
  var oElement;
  for (var i = 0; i < arrElements.length; i++) {
    oElement = arrElements[i];
    if (oRegExp.test(oElement.className)) {
      arrReturnElements.push(oElement);
    }
  }
  return (arrReturnElements);
}

Open in new window

0
 
LVL 10

Assisted Solution

by:eguilherme
eguilherme earned 500 total points
ID: 22674458
change the

<body onload="selChk()">

to

<body onload="selChk(); formDefaultValues()">  so that it will execute both functions, and then you can remove this line:

window.onload = formDefaultValues;
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will show, step by step, how to integrate R code into a R Sweave document
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question