Write a jQuery code to display form data onto the browser.
Answer :
File Name : jquery.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<title>SP Creation</title>
</head>
<body>
<div class="container">
<div class="col">
<form id="form">
<div class="col-md-3">
<label for="name">Name</label>
</div>
<div class="col">
<input type="text" name="name" id="name" class="form-control">
</div>
<div class="col-md-3">
<label for="add">Address</label>
</div>
<div class="col">
<input type="text" name="add" id="add" class="form-control">
</div>
<div class="col">
<label for="sel">Select Option</label>
</div>
<div class="col">
<select name="sel" id="sel" class="form-control">
<option value="India">India</option>
<option value="US">US</option>
<option value="UK">UK</option>
</select>
</div>
<div class="col" id="sel1">
</div>
<button id="submit" type="submit">SUBMIT</button>
</form>
<table class="table table-bordered" id="table">
<tr>
<th>NAME</th>
<th>Address</th>
<th>Country</th>
</tr>
</table>
</div>
</div>
<script>
$(document).ready(function(){
$('#form').submit(function(e){
e.preventDefault();
var name = $('#name').val();
var add = $('#add').val();
var sel = $('#sel').val();
$('#table').append("<tr>"+"+<td>"+name+"</td>"+"<td>"+add+"</td>"+"<td>"+sel+"</td>"+"</tr>");
});
});
</script>
</body>
</html>
Write a jQuery code to display form data onto the browser.
Reviewed by technical_saurabh
on
April 30, 2021
Rating:
Reviewed by technical_saurabh
on
April 30, 2021
Rating:
No comments:
Post a Comment