Scribd Logo
Upload

Welcome to Scribd!

  • Task1 - 31 - 07 (Solution) Form To Table

    Uploaded by

    SMILEY BHANUSHALI
    9 views2 pages
    The document contains a form with fields for a user's name, password, email, phone number, address, city, and gender. It includes a JavaScript function that validates the form fields are not blank and outputs the form data into an HTML table displayed on the page. The form is submitted by clicking a button that calls this validation and output function.

    Original Description:

    Original Title

    Task1_31_07(Solution)Form to Table

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains a form with fields for a user's name, password, email, phone number, address, city, and gender. It includes a JavaScript function that validates the form fields are not blank and outputs the form data into an HTML table displayed on the page. The form is submitted by clicking a button that calls this validation and output function.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    9 views2 pages

    Task1 - 31 - 07 (Solution) Form To Table

    Uploaded by

    SMILEY BHANUSHALI
    The document contains a form with fields for a user's name, password, email, phone number, address, city, and gender. It includes a JavaScript function that validates the form fields are not blank and outputs the form data into an HTML table displayed on the page. The form is submitted by clicking a button that calls this validation and output function.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 2

    <!

    DOCTYPE html>
    <html>
    <head>
    <title>Form to Table</title>
    </head>
    <body>
    <script>
    function showdata(form) {
    // alert("Function called");
    var name = form.uname.value;
    var password = form.upassword.value;
    var email = form.uemail.value;
    var code = form.country_code.value;
    var phone = form.uphone.value;
    var address = form.uaddress.value;
    var gender = form.gender.value;
    var city = form.ucity.value;

    // print in a table formate


    if (name == "" || password == "" || email == "" || address == "" ||
    city == "") {
    document.getElementById("msg").innerHTML = "Fields can not be
    blank";
    }else{
    document.getElementById("msg").innerHTML =
    "<table border = '1' width = '500px'>"+
    "<tr><td>Name :</td><td>" + name + "</td></tr>"+
    "<tr><td>Password :</td><td>" + password + "</td></tr>"+
    "<tr><td>Email address :</td><td>" + email + "</td></tr>"+
    "<tr><td>Email address :</td><td>" + code + "- " + phone +
    "</td></tr>"+
    "<tr><td>Address :</td><td>" + address + "</td></tr>"+
    "<tr><td>City :</td><td>" + city + "</td></tr>"+
    "<tr><td>Gender:</td><td>"+gender+"</td></tr>"+
    "</table>";
    }
    }
    </script>

    <!-- create form -->


    <form>
    <label>Name :</label>
    <input type="text" name="uname" placeholder="Enter Name"><br><br>

    <label>Password :</label>
    <input type="password" name="upassword" placeholder="Enter
    Password"><br><br>

    <label>Email address :</label>


    <input type="email" name="uemail" placeholder="Enter email"><br><br>

    <label>Phone :</label>
    <input type="text" name="country_code" value="+91" size="2">
    <input type="text" name="uphone" size="10" placeholder="Enter
    Number"><br><br>

    <label>Address :</label>
    <textarea name="uaddress" cols="30" rows="10" placeholder="Enter
    Address"></textarea><br><br>

    <label>Gender :</label><br>
    <input type="radio" value="Male" name="gender">Male<br>
    <input type="radio" value="Female" name="gender">Female<br>
    <input type="radio" value="Other" name="gender">Other<br><br>

    <label>City :</label>
    <select name="ucity">
    <option value="Gujarat">Gujarat</option>
    <option value="Mumbai">Mumbai</option>
    <option value="Delhi">Delhi</option>
    <option value="Bangalore">Banglore</option>
    <option value="Chennai">Chennai</option>
    <option value="Hyderabad">Hyderabad</option>
    <option value="Pune">Pune</option>
    <option value="Kolkata">Kolkata</option>
    </select><br><br>

    <button type="submit" onclick="showdata(this.form); return


    false;">Submit</button>
    </form>

    <p id="msg"></p>

    </body>
    </html>

    You might also like