Dynamically changing string - correct value not being submitted?

Question

I recently posted another question about how to add content to a string (Dynamically change string with JS?), and I made progress on that front but it seems the updated variable is not being submitted. Am I missing something?

Here is my code:

<script type="text/javascript">
    var selections = 'Gender, ';
    jQuery(".add-to-form").click(function () {
      var title = jQuery(this).attr("title");
      selections += title + ', ';
      console.log(selections);
    });
    var ss_form = {'account': 'XYZ', 'formID': 'XYZ'};
    ss_form.width = '100%';
    ss_form.height = '1000';
    ss_form.domain = 'app-XYZ.marketingautomation.services';
    ss_form.hidden = {'field_XXXXX': selections }; 
</script>

This works great in that the correct values are showing up in the console log, but when I submit the form and look in SharpSpring the only value getting through is the initial variable value (Gender, ). Do I need to somehow refresh the variable value in the hidden field?

All help is appreciated, thank you!

Curious as to what you mean by the hidden field. Does it just not display but does exist on the DOM? If it isn't on the DOM this very well is the cause to why your value isn't being updated. If it doesn't exist on the DOM jQuery can't select or update it. — Dylan Wright, Mar 16 '18 at 20:05
So the hidden field doesn't actually 'show', but the ss_form.hidden part submits the value based on the field ID (the _XXXXX part). Basically the ss_form.hidden = {'field_XXXXX': selections }; is submitting just the initial value I set for selections (Gender, ) and nothing that was added with the click functions. — user8792133, Mar 16 '18 at 20:13

trincot · Answer 1 · 2018-03-16T20:37:37.870

1

The following line is executed on page load:

ss_form.hidden = {'field_XXXXX': selections };

This assigns the value of selections as it is at that moment. The field_XXXXX property is a separate variable that will not change when you assign a different value to selections later.

So when the click event fires, and you assign a new (longer) value to selections, then only that variable changes. It is not connected to the property above.

How to solve? Just do another assignment to the ss_form.hidden.field_XXXXX property within the click handler:

jQuery(".add-to-form").click(function () {
  var title = jQuery(this).attr("title");
  selections += title + ', ';
  ss_form.hidden.field_XXXXX = selections; // <-------
  console.log(selections);
});

I assume that ss_form.hidden is some API driven way to set a hidden input element, and that this works. If not, make sure to identify the input element that needs to get a new value, which could look like this:

$('#id_of_hidden_input').val(selections);

edited Mar 16 '18 at 20:37

answered Mar 16 '18 at 20:10

trincot

317,000
35
244
286

Thank you very much! Unfortunately I'm hitting another roadblock with this method in that now the hidden field isn't being registered at all and no data is being submitted. I can't target the value of the input itself because it's an iframe loaded with the SharpSpring JS embed – user8792133 Mar 16 '18 at 20:30
What about `ss_form.hidden.field_XXXXX = selections`, does that work better? – trincot Mar 16 '18 at 20:36
Sorry I just realized my response was confusing. I tried adding that to the click function but now SharpSpring isn't recognizing the hidden field at all. I think it needs to be outside the click function so it's recognized on page load? – user8792133 Mar 16 '18 at 20:41
Yes, it needs to be like you had it, but then add the line inside the click handler as I wrote in the above comment (I also updated the answer in that direction) – trincot Mar 17 '18 at 07:26

Dynamically changing string - correct value not being submitted?

1 Answers1