https://github.com/naritapandhe/reusablejavascriptcomponent

A reusable form component
https://github.com/naritapandhe/reusablejavascriptcomponent

Last synced: 6 months ago
JSON representation

A reusable form component

• Host: GitHub
• URL: https://github.com/naritapandhe/reusablejavascriptcomponent
• Owner: naritapandhe
• Created: 2016-03-26T02:27:31.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2016-03-26T20:28:05.000Z (almost 10 years ago)
• Last Synced: 2025-02-25T15:52:27.084Z (10 months ago)
• Language: JavaScript
• Size: 39.1 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# reusableJavascriptComponent

A reusable form component.

This component promotes following functionalities:

 - The initial state of the component should be an empty input box and an ADD button.

 - If the user enters text to the input box, clicking ADD should add that text to a list.

 - There should be a way to delete a list element.

 - On form submit, the list elements are submitted as a json.

Inorder to use this element on your page, follow the below steps:

- Add the below html on your page:

	  

        Show me the component

      

      

      

- For the functionality to work, add the below javascript in your page too: 

	(function() {

    var sa = new ReusableForm({

              wrapper : document.getElementById("reusableComponentForm"),

              type : "default",

              });

    window.onclick = function (e) {

        e.preventDefault();

        if (e.target.className == 'reusableComponentData-deleteElement') {

            sa.deleteElement(e);

        }

    }

    // cache vars

    var btn_reusableComponent = document.getElementById("reusableComponentButtons");

   

   // show default

    btn_reusableComponent.addEventListener( "click", function(e) {

      e.preventDefault();

      sa.show();

    });

  })();

- Once you load the page, click on the button which says, "Show me the component" to perform all the actions.

- When you submit the form, all the list elements are submitted as a JSON.