Scribd
Upload
31 views2 pages

Task1 - 31 - 07 (Solution) Form To Table

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.

Uploaded by

SMILEY BHANUSHALI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
31 views2 pages

Task1 - 31 - 07 (Solution) Form To Table

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.

Uploaded by

SMILEY BHANUSHALI
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 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