Hi,
I'm not good at all at JavaScript but I'm trying, so bear with me.

What I want to do is that when I click on a <input type="text" /> tag the checkbox next to it should become checked. I've tried with the help of internet for a couple of hours but I just can't find how I interact with other objects properly to achieve what I want to accomplish.

I've tried with this code:

<table>
    <tr>
        <td><input type="text" onclick="boxTicker(this.form, 'change_user')"/></td><td><input id="change_user" type="checkbox" name="change_user"/></td>
    </tr>
</table>

and the javascript...

function boxTicker(formName, boxId){
	
	var box = eval("document.checkboxform.getElementById(boxId)");
		
	if (box.checked == false){
		box.checked = true;
		alert("Ticked!");
	}
}

But I honestly don't have a clue of what I'm doing. I would be very grateful for any help suggested!

Recommended Answers

All 7 Replies

Replace your javascript function by below one:

function boxTicker(formName, boxId){
	var box = formName.document.getElementById(boxId);
 
	if (box.checked == false){
		box.checked = true;
		alert("Ticked!");
	}
}

u have done a mistake the value is checked by getting it only so u have to get that from the textbox or any by this syntax
document.formname.textboxname.value...........use this syntax

Thanks for the replies but it still doesn't work. I didn't really understand what you meant prisonpassioner but I assumed you said I should try writing

document.formName.getElementById(boxId);

I did but nothing happened. I also did what you told me mail2saion but it had no effect. Can there be a problem with how I write the parameters on the function call?

<form name="edit" action="actions/mm-save_settings.php" method="post">
   <input type="text" onclick="boxTicker(this.form, 'change_user')"/><input id="change_user" type="checkbox" name="change_user"/>
</form>

Textboxes dont respond well to onclick
onchange onfocus onblur are the methods more commonly used
I would try the same <input> with the javascript attached to 'onfocus'

Still no result :/ Are you sure that the rest of my code is correct?

my version of the javascript

<script type='text/javascript'>
function boxTicker(formName, boxId){ 
var box = eval("document.getElementById(boxId)");
if (box.checked == false){ box.checked = true;
alert("Ticked!");
}
}</script>

getelementbyid is a singleton (there can only be a single element with 'id', no parent dom elements but document are required, you could function boxTicker(boxId){ } in this method onclick works(dunno why), onchange would be better, else you may submit a potentially blank form

my version of the javascript

<script type='text/javascript'>
function boxTicker(formName, boxId){ 
var box = eval("document.getElementById(boxId)");
if (box.checked == false){ box.checked = true;
alert("Ticked!");
}
}</script>

getelementbyid is a singleton (there can only be a single element with 'id', no parent dom elements but document are required, you could function boxTicker(boxId){ } in this method onclick works(dunno why), onchange would be better, else you may submit a potentially blank form

Thanks almostBob! that solved it! :D

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.