Jquery – Populate 123FormBuilder Field with value

Without knowing 123FormBuilder, I find .attr("value", s) strange: I would use .val(s), which is the correct way to set values of input elements in jQuery (see, for instance, "Difference between attr() and val() in jQuery".

Double-check the $rvSpot selector is correct, and is targeting the right element. And make sure the value attribute is directly on the input element, and there are no other scripts or form validation that might be resetting the value to 0 on submission.

I would also use .on( "change" [, eventData ], handler) (since the .change() handler API is deprecated) to trigger the change event after setting the value. That is important, as some forms listen to the change event to register that a value has been updated.

+------------------+           +-----------------+
| User Interaction | --click-> | makeSelection() |
+------------------+           +-----------------+
         |                                     |
         |                                     |
         v                                     v
+------------------+           +------------------+
| Update $rvSpot   |           | startCountdown() |
+------------------+           +------------------+

Your updated code would be:

// rest of your code

function makeSelection(e){
  // existing code
  $.post("https://myurl.tld/take-spot.php", { land: l, spot: s }, function(results){
    el.addClass("selected");
    $rvSpot.val(s).trigger("change"); // use trigger to programmatically trigger the change event
    console.log($rvSpot.val()); // for debugging
    startCountdown();
  });
}

// rest of your code

// Bind change event handler to $rvSpot if needed elsewhere in the code
$rvSpot.on("change", function() {
  // Handler code here
});

That should properly update the value of $rvSpot and notify any other event listeners that the value has changed.

Remember to verify the name and ID attributes of the input element to make sure the form will recognize the input when the form is submitted.

Another approach would be described in How to Prefill Form Fields: 123FormBuilder supports prefilling form fields by constructing a customized URL with parameters that correspond to the form field IDs and the values you want to prefill. That is useful when you want to direct users to a form with some fields already filled in, based on known information.

However, this method differs from the approach you have been using, which involves setting the value of a form field dynamically using JavaScript after the form has already loaded in the user’s browser.

Based on the 123FormBuilder documentation, the form fields are not directly filled by manipulating the DOM elements with jQuery (as you were trying to do with $rvSpot.val(s).trigger("change")). Instead, you would construct a URL with the form’s field IDs and the desired prefill values as query parameters.

For the scenario described in your JavaScript code, it seems that you want to update a form field in real-time as a user interacts with the form, rather than prefilling it via URL before the form loads. So…, the prefill URL method from the 123FormBuilder documentation does not apply directly to your situation.

In your JavaScript code, when you are setting the value of the input dynamically and want the form to recognize this when submitted, you need to make sure:

1. the JavaScript code correctly updates the value of the input field.
2. any event listeners that the form builder relies on to detect changes are triggered.
3. the form’s submission process recognizes the dynamically set values.

If the form submission does not recognize the JavaScript-updated values, it might be due to the form builder’s internal mechanisms that track changes or validate inputs, which could be expecting user input events that are not being replicated by the JavaScript .trigger("change") method.

The handler ($rvSpot.on("change", function() {...}) mentioned above is related to point 2.
An example would be

$rvSpot.on("change", function() {
  // That is the handler code that will run every time the value of $rvSpot changes.
  var newValue = $(this).val();
  
  // You might want to perform some validation, logging, or other functionality when the value changes.
  console.log("New parking spot selected:", newValue);

  // If the form relies on some validation or additional processing on change events,
  // you would include that logic here. For example:
  validateParkingSpot(newValue); // A hypothetical function to validate the selection.
  
  // Or, if you need to enable/disable a submit button based on this value:
  var isFormValid = newValue !== "0" && newValue !== ""; // Simple validation check.
  $("#submit-button").prop("disabled", !isFormValid); // Enable/disable the button.
});

That would be how you make sure the form’s submission process recognizes the dynamically set values because the handler makes sure all the steps, from validation to enabling the submission button, are processed whenever the input value changes, whether that change comes from the user directly or from a script.

.attr("value") is not a good method, yet I tried .val() and did not get improved results; so I was trying alternates.

Inspecting the Input element, it has focus and blur events bound to it from 123Forms. I do not see any for change.

I suspect you are right that there is some higher form validation that I need to find. It seems just adding the value to the Input is not enough to get it to be accepted.

If the input element has focus and blur events bound to it, it is possible that 123FormBuilder uses these events as part of its validation or state management system. The lack of a direct change event handler does not necessarily mean that changes to the input value will not be detected, but it does suggest that the form may rely on focus and blur events to trigger its internal change detection mechanisms.

After setting the value with .val(), you could try triggering both focus and blur events to mimic a user interaction:

$rvSpot.val(s).trigger("focus").trigger("blur");

That is similar to Mark Schultheiss‘s comment:

Perhaps just change $rvSpot.trigger("focus").attr("value", s).trigger("blur"); to fill the value first, then trigger the triggers i.e. $rvSpot.val(s).trigger("focus").trigger("blur");

This should mimic a user selecting a value: the input gets the value (val(s)), the user "focuses" on the input (trigger("focus")), and then moves away from it (trigger("blur")). If the form builder is looking for these events to validate or process the input, this sequence would be more likely to be recognized as a legitimate user action.

The form might have additional event handlers attached to its fields for validation or other purposes. You can inspect the element in the browser’s developer tools to see if there are event listeners that are not immediately visible in the code.

If the form builder is using a more complex mechanism to track changes, you might need to use a MutationObserver to monitor changes to the input element and react accordingly.

Make sure the input field has a name attribute that corresponds with what the server expects. Form data is typically keyed by the name attribute when submitted.

If all else fails and you have control over the server-side logic, consider updating the value directly on the server after the form is submitted. That would be a less elegant solution and should only be used if no other options work.