DEV Community

PRIYA K
PRIYA K

Posted on • Edited on

javascript

Get ElementById() ,get ElemenyByTagname()
1

Take copy of Guhan

Take separate words from paragraph 

<p id ="data"> GUhan </p>

document.getElementById("data").innerHTML
Enter fullscreen mode Exit fullscreen mode

2

By value

Take text from browser which is already typed in browser 

<input id ="data">  </input>

document.getElementById("data").value
Enter fullscreen mode Exit fullscreen mode

3

move input to paragraph 

Step 1: enter data
Chennai in (form)
<input id="from">

step 2: click the button
submit

step3: store value in box(memory)

step4:move data into innerHTML
<p id="to"> chennai </p>
Enter fullscreen mode Exit fullscreen mode 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src=""></script>
    <style>
        input{width:40%;height:40px;}h2,p{color:red;}
        button{width:40%;height:40px;
        background-color: blue;color:white};
    </style>
</head>
<body>
    <h2> Select By Id</h2>
            <input id="from" placeholder="Enter Data"><br><br>
            <button>submit</button>
            <p id ="to"> </p>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src=""></script>
    <style>
        input{width:40%;height:40px;}h2,p{color:red;}
        button{width:40%;height:40px;
        background-color: blue;color:white};
    </style>
</head>
<body>
    <h2> Select By Id</h2>
            <input id="from" placeholder="Enter Data"><br><br>
            <button onclick="check()">submit</button>
            <p id ="to"> </p>
            <script>
                function check()
                {
                    box=document.getElementById("from").value;
                    document.getElementById("to").innerHTML = box;
                }
            </script>


</body>
</html>
Enter fullscreen mode Exit fullscreen mode

4 move more input to paragraph

Dom Select by tag name

form

step1: enter first name
priya
step2:enter last name
saraswathi
step3: enter country
india
submit

stores values in memory as array

box
box[0]
box[1]
box[2]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            margin: auto;
            width: 600px;
            height: auto;
        }

        input {
            width: 100%;
            height: 40px;
            color: red;
            font-size: 18px;
        }

        h2 {
            color: green;
        }

        p {
            color: blue;
            font-size: 18px;
        }

        button {
            width: 100%;
            height: 40px;
            font-size: 18px;
            background-color: blue;
            color: white;
        }
    </style>
</head>

<body>
    <div>
        <h2>Select By Tag Name</h2>

        <input placeholder="Enter First Name"><br><br>
        <input placeholder="Enter Last Name"><br><br>
        <input placeholder="Enter Country Name"><br><br>

        <button onclick="check()">Submit</button>

        <p></p>
        <p></p>
        <p></p>
    </div>

    <script>
        function check() {
            let box = document.getElementsByTagName("input");
            let data = document.getElementsByTagName("p");

            data[0].innerHTML = box[0].value;
            data[1].innerHTML = box[1].value;
            data[2].innerHTML = box[2].value;
        }
    </script>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

output

Select By Tag Name
enter first name: guhan
enter last name: ganesan
enter country name: india
submit

guhan
ganesan
india

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            margin: auto;
            width: 600px;
            height: auto;
        }

        input {
            width: 100%;
            height: 40px;
            color: red;
            font-size: 18px;
        }

        h2 {
            color: green;
        }

        p {
            color: blue;
            font-size: 18px;
        }

        button {
            width: 100%;
            height: 40px;
            font-size: 18px;
            background-color: blue;
            color: white;
        }
    </style>
</head>

<body>
    <div>
        <h2>Select By Tag Name</h2>

        <input placeholder="Enter First Name"><br><br>
        <input placeholder="Enter Last Name"><br><br>
        <input placeholder="Enter Country Name"><br><br>

        <button onclick="check()">Submit</button>

        <p></p>
        <p></p>
        <p></p>
    </div>

    <script>
        function check()
                {
                    box=document.getElementByTagName("input");
                    data=document.getElementByTagName("p");

                    for(i=0;i<box.length;i++)
                {
                    data[i].innerHTML = box[i].value;
                    console.log(i);
                }
    </script>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

5

select by tag name from id 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            margin: auto;
            width: 600px;
            height: auto;
        }

        input {
            width: 100%;
            height: 40px;
            color: red;
            font-size: 18px;
        }

        h2 {
            color: green;
        }

        p {
            color: blue;
            font-size: 18px;
        }

        button {
            width: 100%;
            height: 40px;
            font-size: 18px;
            background-color: blue;
            color: white;
        }
    </style>
</head>

<body>

    <h2>Select By Tag Name</h2>

    <input placeholder="Enter Id"><br><br>

    <!-- Inputs inside this div so getElementsByTagName works -->
    <div id="mydiv">
        <input placeholder="Enter First Name"><br><br>
        <input placeholder="Enter Last Name"><br><br>
        <input placeholder="Enter Country Name"><br><br>
    </div>

    <button onclick="check()">Submit</button>

    <p></p>
    <p></p>
    <p></p>

    <script>
        function check() {
            let area = document.getElementById("mydiv");
            let box = area.getElementsByTagName("input");
            let data = document.getElementsByTagName("p");

            data[0].innerHTML = box[0].value;
            data[1].innerHTML = box[1].value;
            data[2].innerHTML = box[2].value;
        }
    </script>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

output
enter id: 1234
enter first name:priya
enter last name:saraswathi
enter country:india

priya
saraswathi
india

6...

print hour 


<body>

    <h2>Javascript Date</h2>

    <p id="p1"> </p>
    <button onclick="start()">start</button>
    <button onclick="stop()">stop</button>


    <script>
        date = new Date();
        hour = date.getHours();

        x=document.getElementById("p1");
        x.innerHTML = hour;
    </script>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

7

print minute 


<body>

    <h2>Javascript Date</h2>

    <p id="p1"> </p>
    <button onclick="start()">start</button>
    <button onclick="stop()">stop</button>


    <script>
        date = new Date();
        hour = date.getHours();
        minute = date.getMinutes();

        x=document.getElementById("p1");
        x.innerHTML = minute;
    </script>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

8

print second 


<body>

    <h2>Javascript Date</h2>

    <p id="p1"> </p>
    <button onclick="start()">start</button>
    <button onclick="stop()">stop</button>


    <script>
        date = new Date();
        hour = date.getHours();
        minute = date.getMiutes();
        second = date.getSeconds();
        timing = date.toLcaleTimeString();

        x=document.getElementById("p1");
        x.innerHTML = timing;


    </script>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

9

date,set interval clear interval 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            margin: auto;
            width: 600px;
            height: auto;
        }

        h2 {
            color: green;
        }

        p {
            color: blue;
            font-size: 30px;
            font-weight: bold;
        }

        button {
            width: 150px;
            height: 40px;
            font-size: 18px;
            background-color: blue;
            color: white;
            margin-right: 10px;
        }
    </style>
</head>

<body>

    <h2>Javascript Date</h2>

    <p id="p1"></p>
    <button onclick="start()">Start</button>
    <button onclick="stop()">Stop</button>

    <script>
        let clear; // for interval reference

        function changeColor() {
            let date = new Date();
            let timing = date.toLocaleTimeString();
            let second = date.getSeconds();

            let x = document.getElementById("p1");
            x.innerHTML = timing;

            if (second % 2 == 0) {
                x.style.color = "red";
            } else {
                x.style.color = "blue";
            }
        }

        function start() {
            clear = setInterval(changeColor, 1000);
        }

        function stop() {
            clearInterval(clear);
        }
    </script>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

10

paste text into html element

create element


pass text "hi javascript"
in html body ,in div tag we are appending the "hi javascript" using element.appendchild(text)

ans
document.createElement("p")
document.createTextNode("Hi Javascript")

code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            margin: auto;
            width: 600px;
            height: auto;
        }

        h2 {
            color: green;
        }

        p {
            color: blue;
            font-size: 30px;
            font-weight: bold;
        }

        button {
            width: 150px;
            height: 40px;
            font-size: 18px;
            background-color: blue;
            color: white;
            margin-right: 10px;
        }
    </style>
</head>

<body>

    <h2>Create New HTML Element </h2>
    <div id = "mydiv">

    </div>
    <input placeholder="Enter data" id="myinput"><br><br>
    <button onclick="create()">submit</button>
    <script>
        function create()
        {
            value = document.getElementById("myinput").value;
            element = document.createElement("p");
            text = document.createTextNode(value);
            element.appendChild(text);
            mydiv=document.getElementById("mydiv");
            mydiv.appendChild(element);
        }
    </script>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

11

chat app 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat App</title>

    <style>
        .container {
            margin: auto;
            width: 600px;
        }

        .box {
            padding: 10px;
            margin: 10px 0;
        }

        #mydiv {
            min-height: 200px;
            border: 2px solid black;
            margin-top: 10px;
        }

        li {
            font-size: 20px;
            list-style: none;
            margin: 5px 0;
        }
    </style>
</head>

<body>

    <h2>Chatting between two persons</h2>

    <div class="container">

        <div class="box" style="background-color: #FCF78F;">
            <h2>Person A</h2>
            <input id="i1">
            <button onclick="sendsms()">Send</button>
        </div>

        <ul id="mydiv" class="box"></ul>

        <div class="box" style="background-color: #FC8FF2;">
            <h2 style="color:red;">Person B</h2>
            <input id="i2">
            <button onclick="sendsms()">Send</button>
        </div>

    </div>

    <script>
        function sendsms() {
            let value1 = document.getElementById("i1").value;
            let value2 = document.getElementById("i2").value;

            let mydiv = document.getElementById("mydiv");
            let element = document.createElement("li");

            if (value1 !== "") {
                // Person A message
                let text1 = document.createTextNode(value1);
                element.appendChild(text1);
                element.style.color = "blue";
                mydiv.appendChild(element);
                document.getElementById("i1").value = "";
            }

            else if (value2 !== "") {
                // Person B message
                let text2 = document.createTextNode(value2);
                element.appendChild(text2);
                element.style.color = "red";
                mydiv.appendChild(element);
                document.getElementById("i2").value = "";
            }
        }
    </script>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

12

Basic Calculator 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Calculator</title>

    <style>
        table {
            border: 8px solid #010BDF;
            background-color: #566950;
        }

        input {
            width: 370px;
            height: 40px;
            background-color: #CAF6D6;
            color: red;
            font-size: 18px;
        }

        button {
            width: 70px;
            height: 50px;
            font-size: 18px;
        }

        h2 {
            color: #02087C;
        }

        body {
            background-color: #47FE97;
        }
    </style>
</head>

<body>

    <h2>JavaScript Standard Calculator</h2>

    <table>
        <tr>
            <td colspan="5"><input id="i1"></td>
        </tr>

        <tr>
            <td><button onclick="send(1)">1</button></td>
            <td><button onclick="send(2)">2</button></td>
            <td><button onclick="send(3)">3</button></td>
            <td><button onclick="send(4)">4</button></td>
            <td><button onclick="send(5)">5</button></td>
        </tr>

        <tr>
            <td><button onclick="send(6)">6</button></td>
            <td><button onclick="send(7)">7</button></td>
            <td><button onclick="send(8)">8</button></td>
            <td><button onclick="send(9)">9</button></td>
            <td><button onclick="send(0)">0</button></td>
        </tr>

        <tr>
            <td><button onclick="send('+')"> + </button></td>
            <td><button onclick="send('-')"> - </button></td>
            <td><button onclick="send('/')"> / </button></td>
            <td><button onclick="send('*')"> * </button></td>
            <td><button onclick="send('=')"> = </button></td>
        </tr>

        <tr>
            <td><button onclick="send('log')"> log </button></td>
            <td><button onclick="send('√')"> √ </button></td>
            <td><button onclick="send('1/x')"> 1/x </button></td>
            <td><button onclick="send('.')"> . </button></td>
            <td><button onclick="send('AC')"> AC </button></td>
        </tr>

    </table>

    <script>
        function send(i) {
            let x = document.getElementById("i1");

            switch (i) {

                case 0: x.value += "0"; break;
                case 1: x.value += "1"; break;
                case 2: x.value += "2"; break;
                case 3: x.value += "3"; break;
                case 4: x.value += "4"; break;
                case 5: x.value += "5"; break;
                case 6: x.value += "6"; break;
                case 7: x.value += "7"; break;
                case 8: x.value += "8"; break;
                case 9: x.value += "9"; break;

                case '+': x.value += "+"; break;
                case '-': x.value += "-"; break;
                case '*': x.value += "*"; break;
                case '/': x.value += "/"; break;
                case '.': x.value += "."; break;

                case 'AC':
                    x.value = "";
                    break;

                case 'log':
                    x.value = Math.log10(x.value);
                    break;

                case '√':
                    x.value = Math.sqrt(x.value);
                    break;

                case '1/x':
                    x.value = 1 / x.value;
                    break;

                case '=':
                    x.value = eval(x.value);
                    break;
            }
        }
    </script>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

13

Refresh Auto-Refresh Page Redirection 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{color:blue; font-size: 35px;}
        input{width: 40%;height: 40px;}
        button{width: 40%; height: 40px;
            background-color: blue;color:white;
            font-size: 22px;}
        body{background-color: #faf77B;}
    </style>
</head>
<body id="b1">
    <h2 id= "h2">refresh,Auto Refresh and Redirect the web page</h2>

    <input id="i1" placeholder="Assign Time To Refresh The Web Page"><br><br>
    <button onclick="Refresh()">click</button>

    <script>
        function Refresh()
        {
        time = document.getElementById("i1").value;
        time = parseInt(time);
        setTimeout("location.reload(true)",time*1000);
        console.log(window.location.href);
        if(setTimeout("location.reload(true)",time*1000))
        {
            document.getElementById("h2").style.color="red";
        }
        }
    </script>
</body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

14...

modify 13 by background colour 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{color:blue; font-size: 35px;}
        input{width: 40%;height: 40px;}
        button{width: 40%; height: 40px;
            background-color: blue;color:white;
            font-size: 22px;}
        body{background-color: #faf77B;}
    </style>
</head>
<body id="b1">
    <h2 id= "h2">refresh,Auto Refresh and Redirect the web page</h2>

    <input id="i1" placeholder="Assign Time To Refresh The Web Page"><br><br>
    <button onclick="Refresh()">click</button>

    <script>
        function Refresh()
        {
        time = document.getElementById("i1").value;
        time = parseInt(time); //60*5*2
        setTimeout("location.reload(true)",time*1000);
        console.log(window.location.href);
        if(setTimeout("location.reload(true)",time*1000))
        {
            document.getElementById("b1").style.backgroundColor="red";
        }
        }
    </script>
</body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{color:blue; font-size: 35px;}
        input{width: 40%;height: 40px;}
        button{width: 40%; height: 40px;
            background-color: blue;color:white;
            font-size: 22px;}
        body{background-color: #faf77B;}
    </style>
</head>
<body id="b1">
    <h2 id= "h2">refresh,Auto Refresh and Redirect the web page</h2>

    <input id="i1" placeholder="Assign Time To Refresh The Web Page"><br><br>
    <button onclick="Refresh()">click</button>

    <script>
        function Refresh()
        {
        // time = document.getElementById("i1").value;
        // time = parseInt(time); //60*5*2
        time = 3;
        setTimeout("location.reload(true)",time*1000);
        console.log(window.location.href);
        if(setTimeout("location.reload(true)",time*1000))
        {
            document.getElementById("b1").style.backgroundColor="red";
        }
        }
        setInterval(Refresh,3000);
    </script>
</body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

16

Redirection 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{color:blue; font-size: 35px;}
        input{width: 40%;height: 40px;}
        button{width: 40%; height: 40px;
            background-color: blue;color:white;
            font-size: 22px;}
        body{background-color: #faf77B;}
    </style>
</head>
<body id="b1">
    <h2 id= "h2">refresh,Auto Refresh and Redirect the web page</h2>

    <input id="i1" placeholder="Assign Time To Refresh The Web Page"><br><br>
    <button onclick="Refresh()">click</button>

    <script>
        function Refresh()
        {
        // time = document.getElementById("i1").value;
        // time = parseInt(time); //60*5*2
        time = 3;
        setTimeout("location.reload(true)",time*1000);
        console.log(window.location.href);
        if(setTimeout("location.assign('https://payilagam.com/')",time*1000))
        {
            document.getElementById("b1").style.backgroundColor="red";
        }
        }
        setInterval(Refresh,3000);
    </script>
</body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

17....

Alert , Confirm ,Prompt Box

Alert Box 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{color:blue; font-size: 35px;}
        p{width:40%;height:40px;color:red;font: size 25px;}
        button{width: 20%; height: 40px;
            background-color: blue;color:white;
            font-size: 22px;}
        body{background-color: #faf77B;}
    </style>
</head>
<body id="b1">
    <h2 id= "h2">Alert,Confirm,Prompt box...</h2>
    <p id="p1"></p>
    <button onclick="check()">click</button>

    <script>
        function check()
        {
        alert("Dont visit this page");
        }
    </script>
</body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

conform Box 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{color:blue; font-size: 35px;}
        p{width:40%;height:40px;color:red;font: size 25px;}
        button{width: 20%; height: 40px;
            background-color: blue;color:white;
            font-size: 22px;}
        body{background-color: #faf77B;}
    </style>
</head>
<body id="b1">
    <h2 id= "h2">Alert,Confirm,Prompt box...</h2>
    <p id="p1"></p>
    <button onclick="check()">click</button>

    <script>
        function check()
        {
        if(confirm("sure to proceed"))
        {
            document.getElementById("p1").innerHTML="ThankYou";
        }
        else
        {
            document.getElementById("p1").innerHTML="Oh! sorry!";
        }
        }
    </script>
</body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Prompt Box 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{color:blue; font-size: 35px;}
        p{width:40%;height:40px;color:red;font: size 25px;}
        button{width: 20%; height: 40px;
            background-color: blue;color:white;
            font-size: 22px;}
        body{background-color: #faf77B;}
    </style>
</head>
<body id="b1">
    <h2 id= "h2">Alert,Confirm,Prompt box...</h2>
    <p id="p1"></p>
    <button onclick="check()">click</button>

    <script>
        function check()
        {
        password = prompt("enter a password")
        if(password ==1234)
        {
            document.getElementById("p1").innerHTML="ThankYou";
        }
        else
        {
            document.getElementById("p1").innerHTML="Oh! sorry!";
        }
    }
    </script>
</body>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

18

ADD CLASS AND REMOVE CLASS 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{background-color: #8BFC6F;}
        input{background-color: #EAFAF1;color:blue;
            width:100%;height:35px;font-size:23px;}
        p{padding:6px;color:red;font-size: 22px;}
        h1{color:#030DE6;}
        table{border:0px solid blue;border-collapse: collapse;}

        td{
        border:0px solid blue;width:250;height:70;
        text-align: center;font-size: 30px;
        background-color: #cbb9b1;color:blue;
        text-align:left;padding: 10px;
        }
        .show{width:180px;font-size: 18px;
            height:30px;background-color: #001BDB;color:white;}
    </style>
</head>
<body>
    <h1> ADD CLASS AND REMOVE CLASS IN JAVASCRIPT</h1>
<table>
    <tr>
        <td> Name: </td>
        <td><input onmouseover="onMouseover(0)" onmouseout="onMouseout(0)"></input></td>
        <td> <p> </p> </td>
    </tr>

    <tr>
        <td> Father: </td>
        <td><input onmouseover="onMouseover(1)" onmouseout="onMouseout(1)"></input></td>
        <td> <p> </p> </td>
    </tr>

    <tr>
        <td> Mother: </td>
        <td><input onmouseover="onMouseover(2)" onmouseout="onMouseout(2)"></input></td>
        <td> <p> </p> </td>
    </tr>

    <tr>
        <td> Mobile:</td>
        <td><input onmouseover="onMouseover(3)" onmouseout="onMouseout(3)"></input></td>
        <td> <p> </p> </td>
    </tr>

</table>
<script>
    x = document.getElementsByTagName("input");
    y = document.getElementsByTagName("p");

    function onMouseover(i)
    {
        if(x[i].value=="")
    {
        y[i].innerHTML="Please fill this field";
        y[i].className="show";
    }

    }

    function onMouseout(i)
    {
        y[i].innerHTML="";
        y[i].classList.remove("show");
    }


</script>
Enter fullscreen mode Exit fullscreen mode

19

Application form validation 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{background-color: #8BFC6F;}
        input{background-color: #EAFAF1;color:blue;
            width:100%;height:35px;font-size:23px;}
        p{padding:6px;color:red;font-size: 22px;}
        h1{color:#030DE6;}
        table{border:0px solid blue;border-collapse: collapse;}

        td{
        border:0px solid blue;width:250;height:70;
        text-align: center;font-size: 30px;
        background-color: #cbb9b1;color:blue;
        text-align:left;padding: 10px;
        }
        span{color:red;}
    </style>
</head>
<body>
    <h1> JAVASCRIPT FORM VALIDATION </h1>
<form action="image.html" onsubmit="return check()" autocomplete="off">
<table align="center">
    <tr>
        <td> Name:<span>**</span>  </td>
        <td><input id ="name"/> </td>
    </tr>

    <tr>
        <td> Father: </td>
        <td><input /> </td>
    </tr>

    <tr>
        <td> Mother:</td>
        <td><input /> </td>
    </tr>

    <tr>
        <td> Mobile:<span>**</span>  </td>
        <td><input id ="mobile"/> </td>
    </tr>

    <tr>
        <td colspan="2"><input type="submit" value="signup"/> </td>
    </tr>
</table>
</form>
<script>
    function check()
    {
        name = document.getElementById("name").value;
        mobile = document.getElementById("mobile").value;
        if(name=="")
    {
        alert("Please fill the name");
        return false;
    }
    else if(mobile=="")
    {
        alert("Please fill the mobile");
        return false;
    }
    }

</script>


</table>
</form>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)