0

G'day,

Hopefully someone here may be able to help me solve my little dilemma.

I have a check box set up, and along side it i have a text input. When a user enters a value into either text field i'd like to automatically check the given checkbox. If someone could point me in the right direction as to how to write javascript for this or something it would be much appreciated.

My Code is as follows;

<tr align='center' bgcolor='#D8D8D8'><td><input type='checkbox' name='attraction' value='Zoo' /> </td>
<td>Zoo</td> 
<td>22.0</td> 
<td>12.0</td> 
<td><input type='text' maxlength='3' name='adTick' size='5'></td> 
<td><input type='text' maxlength='3' name='chTick' size='5'></td>
3
Contributors
5
Replies
6
Views
7 Years
Discussion Span
Last Post by fxm
0

Well, if you don't want the user to be able to affect the checkbox, it should really be a hidden field.
But here y'go below anyway. Bear in mind that using this people can still check the box without filling the other fields unless you call the function from the checkbox field with onclick.

<script type='text/javascript'>
	function evalcheck(){
		var f = document.forms[0]; // or document.yourformname
		var str = '' + f.adTick.value + f.chTick.value;
		if (str==''){
				f.attraction.checked=false;
			}else{
				f.attraction.checked=true;
		}
	}


</script>

<tr align='center' bgcolor='#D8D8D8'><td><input type='checkbox' name='attraction' value='Zoo' /> </td><td>Zoo</td> <td>22.0</td> <td>12.0</td> <td><input type='text' maxlength='3' name='adTick' size='5'  onkeyup="evalcheck();"></td> <td><input type='text' maxlength='3' name='chTick' size='5' onkeyup="evalcheck();"></td>
0

@vsmash - Thank you very much for your help. Unfortunately the script you provided isn't working.

I was wondering if this could be because I have multiple checkbox's and text fields with the same name? I've done this so that i can process them as an array of items.

Thx

1

This

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <script type='text/javascript'>

function evalcheck(e) {
    e = e || event;
    var that = e.srcElement || e.target;

    if (that.name == 'adTick' || that.name == 'chTick') {
          
	var cInps = that.parentNode.parentNode.getElementsByTagName('input')

      if (that.value != '') {
		cInps[0].checked = true
      } else {
		if (cInps[1].value == '' && cInps[2].value == '') cInps[0].checked = false
	}
    }
}

document.onkeyup = evalcheck;

    </script>
    <title></title>
  </head>
  <body>
    <table>
      <tr align='center' bgcolor='#D8D8D8'>
        <td>
          <input type='checkbox' name='attraction' value='F'>
        </td>
        <td>
          F
        </td>
        <td>
          22.0
        </td>
        <td>
          12.0
        </td>
        <td>
          <input type='text' maxlength='3' name='adTick' size='5'>
        </td>
        <td>
          <input type='text' maxlength='3' name='chTick' size='5'>
        </td>
      </tr>
      <tr align='center' bgcolor='#D8D8D8'>
        <td>
          <input type='checkbox' name='attraction' value='X'>
        </td>
        <td>
          X
        </td>
        <td>
          33.0
        </td>
        <td>
          13.0
        </td>
        <td>
          <input type='text' maxlength='3' name='adTick' size='5'>
        </td>
        <td>
          <input type='text' maxlength='3' name='chTick' size='5'>
        </td>
      </tr>
      <tr align='center' bgcolor='#D8D8D8'>
        <td>
          <input type='checkbox' name='attraction' value='M'>
        </td>
        <td>
          M
        </td>
        <td>
          44.0
        </td>
        <td>
          14.0
        </td>
        <td>
          <input type='text' maxlength='3' name='adTick' size='5'>
        </td>
        <td>
          <input type='text' maxlength='3' name='chTick' size='5'>
        </td>
      </tr>
    </table>
  </body>
</html>

demonstrates a cross-browser solution to your problem that doesn't require unique names for all the elements; in fact, it assumes that the <input> names are consistent. It also requires counting the <input> elements in each TR accurately.

Votes + Comments
Clear, concise, well explained
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.