Scribd Logo
Upload

Welcome to Scribd!

  • 3 views

    rn4 js8

    Uploaded by

    newsneha775
    This document contains the code for a web page that implements various form events. The page contains different form elements like text inputs, dropdowns, textareas. It demonstrates keypress, keyup, keydown, change, focus, blur, select, submit and reset events. When the corresponding events are triggered on these elements, predefined JavaScript functions are called to handle the events and display the output.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    rn4 js8

    Uploaded by

    newsneha775
    3 views7 pages
    This document contains the code for a web page that implements various form events. The page contains different form elements like text inputs, dropdowns, textareas. It demonstrates keypress, keyup, keydown, change, focus, blur, select, submit and reset events. When the corresponding events are triggered on these elements, predefined JavaScript functions are called to handle the events and display the output.

    Original Description:

    practical of javascript

    Original Title

    rn4_js8

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document contains the code for a web page that implements various form events. The page contains different form elements like text inputs, dropdowns, textareas. It demonstrates keypress, keyup, keydown, change, focus, blur, select, submit and reset events. When the corresponding events are triggered on these elements, predefined JavaScript functions are called to handle the events and display the output.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    3 views7 pages

    rn4 js8

    Uploaded by

    newsneha775
    This document contains the code for a web page that implements various form events. The page contains different form elements like text inputs, dropdowns, textareas. It demonstrates keypress, keyup, keydown, change, focus, blur, select, submit and reset events. When the corresponding events are triggered on these elements, predefined JavaScript functions are called to handle the events and display the output.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 7

    Practical No 8 : Create web page to implement form Event.

    part II

    <!DOCTYPE html>

    <html>

    <head>

    <title>Experiment 8</title>

    <style>

    body

    background-image: url('slider-left-dec.png');

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: fixed;

    margin: 0;

    padding: 0;

    .container

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-gap: 20px;

    .eventOutput

    background-color: #f4f4f4;

    padding: 20px;

    margin: 20px;

    border: 1px solid #ccc;

    border-radius: 5px;

    label

    {
    display: block;

    font-weight: bold;

    margin-bottom: 5px;

    #submit, #reset

    width: 20%;

    padding: 6px;

    margin: 8px;

    background-color: black;

    color: #fff;

    border: none;

    border-radius: 4px;

    cursor: pointer;

    #colorBox

    widh: 600px;

    height: 180px;

    background-color: black;

    transition: background-color 1s ease;

    </style>

    </head>

    <body onload="onLoad()">

    <h1 style="color: white;"><center>FORM EVENTS PART-II</center></h1></div>

    <div class="container">

    <div class="eventOutput">

    <h3 style="margin: 0;">KEYPRESS EVENT</h3><br>

    <label for="text">Type something:</label>

    <input type="text" id="textInput" onkeypress="onKeyPress()">


    <p id="output"></p>

    </div>

    <div class="eventOutput">

    <h3 style="margin: 0;">KEYUP & KEYDOWN EVENT</h3><br>

    <input type="text" id="textInput" onkeyup="onKeyUp(event)"


    onkeydown="onKeyDown(event)">

    <p id="keyOutput"></p>

    </div>

    <div class="eventOutput">

    <h3 style="margin: 0;">CHANGE EVENT</h3><br>


    <label for="colorSelect">Select a color:</label>

    <select id="mySelect" onchange="onChange()">

    <option value="Red">Red</option>

    <option value="Green">Green</option>

    <option value="Blue">Blue</option>

    <option value="Black">Black</option>

    </select>

    <p id="demo"></p>

    </div>

    <div class="eventOutput">

    <h3 style="margin: 0;">FOCUS & BLUR EVENT</h3><br>

    <label for="name">Enter your name:</label>

    <input type="text" id="myInput" onfocus="onFocus()" onblur="onBlur()">


    </div>

    <div class="eventOutput" >

    <h3 style="margin: 0;">SELECT EVENT</h3><br>

    <label for="textArea">Text Area:</label>

    <div style="flex-direction: column; align-items: center;">

    <textarea id="textArea" rows="4" cols="40" onmouseup="onSelect()">Select some


    text in this textarea.</textarea>

    </div>

    <p><b>Selected text: </b><span id="selectedText"></span></p>


    </div>

    <div class="eventOutput">

    <h3 style="margin: 0;">SUBMIT & RESET EVENT</h3><br>

    <form id="myForm" onsubmit="return onSubmit();" onreset="onReset();">


    <h3 style="margin: 0;">Submit a Form</h3><br>

    <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>

    <input type="submit" id="submit" value="Submit" style="margin: 0;">

    <input type="reset" id="reset" value="Reset" style="margin: 0;">

    </form>

    </div>

    </div>

    <center>

    <div class="eventOutput">

    <h3 style="margin: 0;">ONLOAD & ONUNLOAD EVENT</h3><br>

    <div id="colorBox"></div>

    </div>

    </center>

    <script type="text/javascript">

    function onLoad()

    const colorBox = document.getElementById('colorBox');

    colorBox.style.backgroundColor = '#676767';

    function onUnLoad(event)

    const confirmationMessage = "You have unsaved changes. Are you sure you want to leave
    this page?";
    (event || window.event).returnValue = confirmationMessage;

    return confirmationMessage;

    window.onbeforeunload = onUnLoad;

    function onKeyPress()

    var inputText = document.getElementById("textInput").value;

    document.getElementById("output").innerHTML = "<strong>You typed: </strong>" +


    inputText;

    function onKeyUp(event)

    var key = event.key;

    document.getElementById("keyOutput").innerHTML = "<strong>Key Up: </strong>"


    + key;

    function onKeyDown(event)

    var key = event.key;

    document.getElementById("keyOutput").innerHTML = "<strong>Key Down: </strong>


    " + key;

    function onChange()

    let x = document.getElementById("mySelect").value;

    document.getElementById("demo").innerHTML = "You selected: " + x;

    function onSelect()

    const textArea = document.getElementById('textArea');

    const selectedTextSpan = document.getElementById('selectedText');


    const selectedText = window.getSelection().toString;

    selectedTextSpan.textContent = selectedText;

    function onFocus()

    document.getElementById("myInput").style.background = "#BEBEBE";

    function onBlur()

    document.getElementById("myInput").style.background = "#676767";

    function onSubmit()

    const nameInput = document.getElementById('name');

    const emailInput = document.getElementById('email');

    if (nameInput.value.trim() === '' || emailInput.value.trim() === '')

    alert('Please fill in all the required fields.');

    return false;

    alert('Form submitted successfully!');

    return false;

    function onReset()

    alert("Form has been reset!");

    </script>

    </body>

    </html>

    You might also like