Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 386
  • Last Modified:

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

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
spl2381
Asked:
spl2381
  • 2
2 Solutions
 
eguilhermeCommented:
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
 
spl2381Author Commented:
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
 
eguilhermeCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now