newautocapture_pkg

newautocapture_pkg documentation created By Poorna

This is main purpose is caputure the html elements ids then send it throught the rest api for the backend

features and limitations

1. Ignore html element ids(if igonre elements data not send to backend)
2. Support html elements ara input ,checkbox,radion (All neccessery fields ara available and doesn't supoort to lable element)
3. All crud operations ara available (Inbuild REST api system)

step 1 - npm install newautocapture_pkg

step 2 - import {captureFormData, createData, deleteData, readData, updateData } from 'newautocapture_pkg';

step 3 -

Below example user can get idea how to use this library

import { captureFormData, createData, deleteData, ignoreIds, readData, updateData } from 'newautocapture_pkg'; import React, { useRef } from 'react';

const MyForm = () => { const formRef = useRef(null);

const handleSubmit = async (e) => {
    e.preventDefault();
    const url = 'http://localhost:3001/create'; // Replace with your backend URL
    try {
        const formData = captureFormData(formRef);
        ignoreIds(formData, ['empID']); // Ignore 'empID' from formData
        const data = await createData(url, formData);
        console.log('Data created successfully:', data);
    } catch (error) {
        console.error('Error creating data:', error);
    }
};

const handleUpdate = async (e) => {
    e.preventDefault();
    const url = 'http://localhost:3001/update'; // Replace with your backend URL 
    //also can send id with a url `http://localhost:3001/update/${id}`
    try {
        const formData = captureFormData(formRef);
        ignoreIds(formData, ['username']); // Ignore 'username' from formData
        const data = await updateData(url, formData);
        console.log('Data updated successfully:', data);
    } catch (error) {
        console.error('Error updating data:', error);
    }
};

const handleDelete =  async (e) =>{
    const id = 2;

    const url = `http://localhost:3001/delete/${id}`; // Replace with your backend URL
    try {
        const data = await deleteData(url);
        console.log('Data updated successfully:', data);
    } catch (error) {
        console.error('Error updating data:', error);
    }
}

const handleRead = async (e) =>{  

    const url = 'http://localhost:3001/read'; // Replace with your backend URL
     //also can send id with a url `http://localhost:3001/read/${id}`
    try {
        
        const data = await readData(url);
        console.log('Data deleted successfully:', data);
    } catch (error) {
        console.error('Error updating data:', error);
    }

}

return (
    <div>
        <form ref={formRef}>
            <input type="text" id="empID" name="empID" placeholder="ID" /><br />
            <input type="text" id="username" name="username" placeholder="Username" /><br />
            <input type="password" id="password" name="password" placeholder="Password" /><br />
            <input type="radio" id="genderM" name="gender" value="M" /> Male
            <input type="radio" id="genderF" name="gender" value="F" /> Female<br />
            <input type="checkbox" id="subscribe" name="subscribe" value="yes" /> Subscribe<br />
            <select id="role" name="role"><br />
                <option >select role</option>
                <option value="admin">Admin</option>
                <option value="user">User</option>
            </select><br />
            <button type="button" onClick={handleSubmit}>Create</button>
            <button type="button" onClick={handleUpdate}>Update</button>
            <button type="button" onClick={handleDelete}>Delete</button>
            <button type="button" onClick={handleRead}>Read</button>
        </form>
    </div>
);

};

export default MyForm;