Has anyone attempted to use JavaScript to populate a Caspio submission form with data collected from an HTML form?

[CapNcook]

I have two different DataBase one is from AWS and the other is my Caspio table. I want to populate them both  with the same Data. Is there a way I can pass the variables from my HTML form to Caspio submission form?

[ianGPT]

Hi,

You can simply call both the ID of your external submission form and the Caspio submission form and pass the value of each by setting the "value" in JS. 


Example:
 

<-- HTML PART ---> 

	<---- Your embed here ---->
   <script type="text/javascript" src="https://c3abr921.caspio.com/dp/xxxxx/emb"></script>
	<---- Your embed here ---->

    <h1>External Form</h1>
    <form id="externalForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>
        
        <label for="age">Age:</label>
        <input type="number" id="age" name="age" required><br><br>
        
        <button type="button" id="populateButton">Populate Caspio Form</button>
    </form>

<-- HTML PART ---> 

<script>
        document.getElementById('populateButton').addEventListener('click', function () {
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const age = document.getElementById('age').value;

            // Access the Caspio DataPage elements
            const caspioNameInput = document.getElementById('InsertRecordName');
            const caspioEmailInput = document.getElementById('InsertRecordEmail');
            const caspioAgeInput = document.getElementById('InsertRecordAge');

            // Set the values in the Caspio Submission form
            caspioNameInput.value = name;
            caspioEmailInput.value = email;
            caspioAgeInput.value = age;
        });

    
    </script>

 

[Kurumi]

Hi @CapNcook - you can also try this article: https://howto.caspio.com/tech-tips-and-articles/how-to-convert-existing-html-forms-to-work-with-caspio/