Update input field in svelte component

I try to receive outputs from Amazons MTurk. My code is written in Svelte.

<script lang="ts">
    import { onMount } from "svelte";
    let clickP = {
        x: -1, 
        y: -1
    };
    let randomId = Math.random().toString(36).substring(7);
    let assignmentId = "";
    onMount(() => {
        const urlParams = new URLSearchParams(window.location.search);
        assignmentId = urlParams.get("assignmentId") || "";
        console.log("Assignment ID:", assignmentId); // Debugging output
    });
    const submitForm = () => {
        const form = document.getElementById("mturk_form");
        if (assignmentId !== ""){
            form.submit();
            alert("Form submitted!");
        } else {
            alert("Assignment ID missing!");
        }
    };

</script>
<main>
        <form 
            name="mturk_form" 
            method="POST" 
            id="mturk_form" 
            action="https://workersandbox.mturk.com/mturk/externalSubmit"
        >
            <input type="hidden" value={assignmentId} name="assignmentId" />
            <div class="coordinates">
                <label>x:
                <input 
                    id={'x_' + randomId}
                    name={'taskId_' + $currentTaskStore.taskId + '_frameIndex_' + frameIndex + '_x'} 
                    type="text"
                    bind:value={clickP.x}
                /></label>
                <button type="button" on:click={submitForm}>Submit</button>
</main>

Although my input fields configured correctly with the form, I get only the field test, and the fields marked as variable-feed from the index file.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script type="module" src="/src/main.js"></script>
        <script src="https://s3.amazonaws.com/mturk-public/externalHIT_v1.js" type="text/javascript"></script>
        <title>Questions</title>
    </head>
    <body>

        <div style="height: 0; width: 0; opacity: 0;">
            <code class="variable-feed">
                ${id_1} :;: ${frameCount_1}
            </code>
            <code class="variable-feed">
                ${id_2} :;: ${frameCount_2}
            </code>
            <code class="variable-feed">
                ${id_3} :;: ${frameCount_3}
            </code>
            <code class="variable-feed">
                ${id_4} :;: ${frameCount_4}
            </code>
            <code class="variable-feed">
                ${id_5} :;: ${frameCount_5}
            </code>
        </div>



        <div id="app"></div>
        <input style="height: 0;" type="hidden" name="test"></input>
        <!----    important commands for Amazon MTurk ----------------->
        <script language="Javascript">
            turkSetAssignmentID();
        </script>
        <!------------------------------------------------------------->
    </body>

    
</html>

I expect the output to include a x column with value -1, in this case. What should I do to get the outputs?

Solution

To update an input field in a Svelte component, you can use the bind directive to create a two-way binding between the input field and a variable in your component's script.

Here's an example:

svelte
<script>
  let name = 'World';
</script>

<input bind:value={name} />

In this example, the bind:value directive creates a two-way binding between the value property of the input field and the name variable in the script. When the user types something in the input field, the name variable will be updated automatically.

If you want to update the input field programmatically, you can simply update the name variable in your script, and the input field will be updated automatically.

For example:

svelte
<script>
  let name = 'World';

  function updateName() {
    name = 'New Name';
  }
</script