How to set a form input value?

[burfbari]

Hi,

I have a alpinejs w/Precognition form inside a modal window with a text field say color. I am able to set its value by the help of jQuery by doing something like $('[name="color"]').val(colorNameValue);.

For some reason, the form is not picking the value... and posts null everytime the form is submitting. I am not able to figure out why...

[twd3]

I am wondering how to get this done as well. I was just using vanilla js to try and set the page that the form was submitted on with the script below. I could see the value getting set but it never came through.

<script>
            document.addEventListener('DOMContentLoaded', function() {
                const dynamicValue = "{{ permalink }}";
                const hiddenField = document.getElementById("page_form_submitted_from");
                hiddenField.value = dynamicValue;
            });
</script>

[burfbari]

I had to implement a workaround to achieve this.
Declared a variable in x-data on a parent div which listened for the new value. Then I used this new value to change the form input value at the time of submission. Something like below...

<div x-data="{colName: 'none'}">
    <div x-on:foo.window="colName=$event.detail">
        {{ form:new_form attr:x-ref="form" js="alpine" }}
        
...
init() {
    $refs.form.addEventListener("submit", evt => {
        this.form.col_name=this.colName;
        

[twd3]

Shoot, I think the answer is here: https://peak.1902.studio/features/forms.html#submit-additional-data

[twd3]

Well, I tried adding x-init for hidden field but now it gives me "Uncaught TypeError: form.validate is not a function"