Member Avatar for tyson.crouch

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
  • 143 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by fxm
Member Avatar for vsmash

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>
Member Avatar for tyson.crouch

@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

Member Avatar for fxm

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.

commented: Clear, concise, well explained +1
Member Avatar for tyson.crouch

@fxm - THANK YOU VERY MUCH
Works like a charm !!

Member Avatar for fxm

You're welcome.
Remember to mark this thread as solved.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.