Changing checkbox state when input is changed

Get Help
, , ,
1

Hello
I am trying to create an onchange event that will change a checkbox state when a text box is populated. Below is a simplified version of what I am trying to accomplish. The end result will be a conditional which will show or hide a page based on the state of the check boxes.

I looked at gform_input_change. Not sure if that is the proper function, but I can’t figure out how to adapt my script if it is.

<DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Form</title>
</head>

<body>
<form>

<input type="text" name="fm1" id="fm1" onchange="uncheck('fm1', 'fm1_check')" />
<input type="checkbox" name="fm1_check" id="fm1_check" value="yes" checked />
<br /><br />
<input type="text" name="fm2" id="fm2" onchange="uncheck('fm2', 'fm2_check')" />
<input type="checkbox" name="fm2_check" id="fm2_check" value="yes" checked />
<br /><br />
<input type="text" name="fm3" id="fm3" onchange="uncheck('fm3', 'fm3_check')" />
<input type="checkbox" name="fm3_check" id="fm3_check" value="yes" checked />

</form>

<script>
function uncheck(txtboxid, chkboxid){
	if(document.getElementById(txtboxid).value != ""){
		document.getElementById(chkboxid).checked = false;
	} // end if
} // end function
</script>

</body>
</html>
2

Since modifying the input markup to add an onchange attribute isn’t super easy with Gravity Forms, the best (and probably preferable method anyways) is to use a selector to target the Single Line Text fields and bind the function that unchecks the associated checkbox that way.

Here’s an example:

1 Like
3

I will check this out today to see if it works. Thank you for your reply.

2 Likes
4

Unfortunately this did not work. Or I didn’t know where to place the code. I placed it at the top of the form inside an html element inside script tags.

5

Got an example of your form markup? Maybe a form export?

6

You should use something like the input event listener to trigger your function. A sample snippet for you below. Should help.

document.addEventListener("input", function (e) {
        var currentId = e.target.id;
        if (e.target.className === "textarea") { // change this class to your class
        var checkbox = document.getElementById('my_checkbox'); // change Id to your id
        checkbox.checked = "false";
        }
})
7

How do I apply this to form elements within Gravity Forms?

8

Well, the simplest way to do this would be by adding an HTML field to your form and wrapping the snippet with some

<script> </script> // tags

I am a little confused though why you are sharing HTML. Are you using Gravity Forms? Typically, to my knowledge, you can’t simply add onclick events directly to the form elements like you are doing.

The snippet I shared should help you get going. It basically will uncheck a checked checkbox if someone enters a character into your input type = text input.

You can do more with it of course but it should at least help you get started.

You can also open Google Developer Console, specifically “console” to add the above snippet and test. If you add the snippet to the console and hit return, you can then type text into your text input and see if you get the desired behavior.

With the input event listener, there is no need to directly add any onclick events to the HTML aspect of your form. It’s a better practice to not have Javascript inside your HTML. So the event listener “event” will trigger the function similar to the onclick event, except without needing to add JS to the form’s markup itself.

9

The only reason for the HTML file was to show what I was trying to accomplish with the checkboxes.

10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.