JavaScript to change value of textbox

Question

This code is for an unsubscribe form, where I need to toggle whether or not a checkbox is checked on initial start, and then change values based on a user's selection.

Basically, I'm passing a value into the html through our email platform. If the value is I, the checkbox should be checked and the value I. Conversely, if the value is O, the checkbox should not be checked and the value O.

For the data to be passed back into our email platform I have to use a hidden input to capture the value, otherwise it won't actually send the I or O back.

The JavaScript, which I have as a tag in the head (HTML Email)

var initValue = function() {
    var permStat = document.getElementById("emailPref").value
    if(permStat === "I"){
      document.getElementById("checkbox").checked = true;
    } else {
      document.getElementById("checkbox").checked = false;
    }
  }
  var changeValue = function(){
    var optValue = document.getElementById("checkbox").value;
    if(optValue === "I"){
      document.getElementById("checkbox").value = "O";
      document.getElementById("emailPref").value = "O";
      document.getElementById("checkbox").checked = false;
    } else {
      document.getElementById("checkbox").value = "I";
      document.getElementById("emailPref").value = "I";
      document.getElementById("checkbox").checked = true;
    }
  }

The visible label for toggling the style (using CSS only)

<input type="checkbox" id="checkbox" name="emailPerm" value="$EMAIL_PERMISSION_STATUS_$" onload="initValue();" onclick="changeValue()">
<label class="toggle" for="checkbox"></label>

And the hidden input, the one that passes data back to our email platform

<input type="hidden" id="emailPref" name="EMAIL_PERMISSION_STATUS_" value="$EMAIL_PERMISSION_STATUS_$">

Additional info

On loading with I value, it appears as this (which would be the "O" value):

On clicking, after this state, the value does set to "O" and the styling remains the same. On a second click, the value goes back to "I" and displays properly:

**I apologize in advance if this is an obvious mistake, since I typically cannot use JavaScript in HTML emails but since this is technically presented as a landing page, it works.

Thanks!

If you're setting the hidden input with data from the Server aren't you able to simply create an input that's checked depending on that same data? — zfrisch
– zfrisch, Commented Dec 22, 2017 at 16:57
@zfrisch yes, that is what the initValue function is aiming to do. It's pulling in the value of that and supposed to be adjusting the value of checked, but it isn't — Almost_Ashleigh
– Almost_Ashleigh, Commented Dec 22, 2017 at 17:05

gforce301 · Accepted Answer · 2017-12-22 16:58:38Z

1

The problem is that onload is not a valid attribute for a checkbox. Because of this your initValue never runs. Add a script tag like so below your elements.

<script>
// self executing function here
(function() {
    initValue();
})();
</script>

answered Dec 22, 2017 at 16:58

gforce301

2,9841 gold badge22 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript to change value of textbox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related