javascript input field form code example

Example 1: using javascript when i ' m iterate localstorage current input value my DOM its Add multiple value or perivous value of localstorage ?

//featch data from form
// class Book{
//     constructor(givenNAme , givenAuthor , givenType){
//         this.name = givenNAme;
//         this.author = givenAuthor;
//         this.type = givenType;
//     }
// }

// display function 

class Display {
    
    // add to UI
        add = () =>{

        let w  = localStorage.getItem('localkey');
        if (w == null){
        
            localObj = [] ; 
        }else{

            localObj = JSON.parse(w);
        }        
        let data ;
        localObj.forEach((element) => {
           
            data = `<tr>
                    <td>${element.lname}</td>
                    <td>${element.lauthor}</td>
                    <td>${element.ltype}</td>
                    </tr>`
        });
        
        let tablebody  = document.getElementById('tablebody');
        if (localObj.length > 0 ){
            
            tablebody.innerHTML += data;    

        } else{
            tablebody.innerHTML  = `There Is No Book Added Please Add`;
        }
        
     }

    // clear form
    clear = () => {
        let myform  = document.getElementById('libraryForm');
        myform.reset();
    
    }


}



let addBook = document.getElementById('addme');

// create black array 


addBook.addEventListener('click', (e) => {

    let name = document.getElementById('bookName').value;
    let author = document.getElementById('author').value; 
    let type = '';

    if(fiction.checked){
    type = fiction.value;
    }
    else if(programing.checked){
    type = programing.value;
    }
    else if(cooking.checked){
    type = cooking.value;
    }

    let w  = localStorage.getItem('localkey');
        if (w == null){

            localObj = [];
        }else{

            localObj = JSON.parse(w);
        }

    let mylocal = {
        lname:name,
        lauthor:author,
        ltype:type
    }
    console.log(mylocal.lname);

   

  
    localObj.push(mylocal)
    
    localStorage.setItem('localkey' , JSON.stringify(localObj));



    // let myBook = new Book(name, author, type);
    // console.log(myBook);
    let bookdisplay = new Display();
    bookdisplay.add();
    bookdisplay.clear();



    e.preventDefault();
    
});


function codeAddress() {
    
  
    add = () =>{
        
            let w  = JSON.parse(localStorage.getItem('localkey'));
            w.forEach((element)=>{
            
                    let tablebody  = document.getElementById('tablebody');
                       let  data = `<tr>
                                    <td>${element.lname}</td>
                                    <td>${element.lauthor}</td>
                                    <td>${element.ltype}</td>
                                </tr>`
                       tablebody.innerHTML += data;    
                });
            
            
             }
      add();       

        }

window.onload = codeAddress;

Example 2: how to take input from form and display in javascript

<html>
<head>
<title>Form Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {
  DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=300,height=200')
  message = "<ul><li><b>NAME: </b>" + document.form1.yourname.value;
  message += "<li><b>ADDRESS: </b>" + document.form1.address.value;
  message += "<li><b>PHONE: </b>" + document.form1.phone.value + "</ul>";
  DispWin.document.write(message);
}
</script>
</head>
<body>
<h1>Form Example</h1>
Enter the following information. When you press the Display button,
the data you entered will be displayed in a pop-up window.
<form name="form1">
<p><b>Name:</b> <input TYPE="TEXT" SIZE="20" NAME="yourname">
</p>
<p><b>Address:</b> <input TYPE="TEXT" SIZE="30" NAME="address">
</p>
<p><b>Phone: </b> <input TYPE="TEXT" SIZE="15" NAME="phone">
</p>
<p><input TYPE="BUTTON" VALUE="Display" onClick="display();"></p>
</form>
</body>
</html>

Tags:

Javascript Example

Recent Posts