I have created a table with a search bar which will allow me to filter the data based on what I type in the search bar. The problem I have is with the reset button I created. What I want is for the search bar to be cleared and the table to return back to its original state showing all the data (NOT the filtered data)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/RichStyle.css">
<!-- Custom Made CSS -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/toggle.js"></script>
<script src="js/jquery%201.4.4.min.js"></script>
<!-- JS -->
<!-- Slide Toggle -->
<script type="text/javascript">
$(document).ready(
function() {
$('td p').slideUp();
$('td h2').click(
function(){
$(this).closest('tr').find('p').slideToggle();
}
);
}
);
</script>
<!-- Search Bar -->
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#search').keyup(function() {
searchTable($(this).val());
});
});
function searchTable(inputVal) {
var table = $('#searchTable');
table.find('tr').each(function(index, row) {
var allCells = $(row).find('td');
if (allCells.length > 0) {
var found = false;
allCells.each(function(index, td) {
var regExp = new RegExp(inputVal, 'i');
if (regExp.test($(td).text())) {
found = true;
return false;
}
});
if (found == true)
$(row).show();
else
$(row).hide();
}
});
}
</script>
<title>Report Page</title>
</head>
<body>
<div>
<p>
<form>
<label for="search"></label>
<input type="text" id="search" placeholder="Enter Search Term" />
<input type="reset" value="Reset" />
</form>
</p>
<table id="searchTable">
<thead>
<tr>
<th>User ID</th>
<th>Website</th>
<th>Hours Spent</th>
<th>Data Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><h2>Luke</h2></td>
<td><h3 id="Luke">
<script>
var website = ["Facebook", "Youtube"];
document.getElementById("Luke").innerHTML = website.length;
</script></h3><p>Facebook</p><p>Youtube</p></td>
<td><h3>2.5h</h3><p>2h</p><p>0.5h</p></td>
<td><h3>1.3gb</h3><p>3mb</p><p>1gb</p></td>
</tr>
<tr>
<td><h2>John</h2></td>
<td><h3 id="John">
<script>
var website = ["Youtube"];
document.getElementById("John").innerHTML = website.length;
</script></h3><p>Youtube</p></td>
<td><h3>3h</h3><p>3h</p></td>
<td><h3>1gb</h3><p>1gb</p></td>
</tr>
<tr>
<td><h2>Peter</h2></td>
<td><h3 id="Peter">
<script>
var website = ["Facebook", "Youtube"];
document.getElementById("Peter").innerHTML = website.length;
</script></h3><p>Facebook</p><p>Youtube</p></td>
<td><h3>1.75h</h3><p>1.5h</p><p>0.25h</p></td>
<td><h3>1.3gb</h3><p>3mb</p><p>1gb</p></td>
</tr>
</tbody>
</table>
</div>
<button onclick="window.print()">Print Report</button>
<!-- Javascript Coding - No Colours Displayed On Print Preview-->
<button>Save Report</button>
<!-- Save Button Does Not Work, Fix Needed-->
</body>
</html>
IF you want to use the <input type="reset" /> tag, the elements you can reset must be editable, i.e. you can type whatever you want into it, so
input type="text"
input type="password"
input type="email"
etc. . .
The above are editable.
So if what you want is that, you have no more data in your table you can use JQuery, here's an example using input reset
$(function(){ // this is === to document.ready
$("#the-table .ins").val("some value here ");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- the tags that you can enter text into can be reset if they resied within the same form that contains the reset button -->
<form action="some url" method="post">
First name: <input type="text" name="firstname" /> <br />
Surname: <input type="text" name="surname" /><br />
<input type="reset" value="Clear form" />
<input type="submit" value="Submit now" />
</form>
<hr />
With a table:
<!-- so when the page loads, we use JQuery to insert so value to your table -->
<form action="some url" method="post">
<table id="the-table">
<tr><td><input class="ins" type="text" /></td>
<td><input class="ins" type="text" /></td>
</tr>
</table>
<input type="reset" value="Clear form" />
</form>
and here's an example using jquery to clear the table data
$(function(){
$('#reset-btn').click(function(){
$('table tr').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>click on the table to remove data </h2>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<button id="reset-btn">reset data</button>
#esteban rincon is right, <input type="reset" value="Reset" /> can reset your form input but won't clear any other HTML content.
You need to clear by your self.
For example you can add id attribute in your reset button and add onClick event to clear your searchTable like $('#searchTable').empty();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/RichStyle.css">
<!-- Custom Made CSS -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/toggle.js"></script>
<script src="js/jquery%201.4.4.min.js"></script>
<!-- JS -->
<!-- Slide Toggle -->
<script type="text/javascript">
$(document).ready(
function() {
$('td p').slideUp();
$('td h2').click(
function() {
$(this).closest('tr').find('p').slideToggle();
}
);
}
);
</script>
<!-- Search Bar -->
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#search').keyup(function() {
searchTable($(this).val());
});
//Add this for reset click reset your search record
$('#resetAll').click(function() {
$('#searchTable tbody').empty();
});
});
function searchTable(inputVal) {
var table = $('#searchTable');
table.find('tr').each(function(index, row) {
var allCells = $(row).find('td');
if (allCells.length > 0) {
var found = false;
allCells.each(function(index, td) {
var regExp = new RegExp(inputVal, 'i');
if (regExp.test($(td).text())) {
found = true;
return false;
}
});
if (found == true)
$(row).show();
else
$(row).hide();
}
});
}
</script>
<title>Report Page</title>
</head>
<body>
<div>
<p>
<form>
<label for="search"></label>
<input type="text" id="search" placeholder="Enter Search Term" />
<!-- add id resetAll -->
<input id="resetAll" type="reset" value="Reset" />
</form>
</p>
<table id="searchTable">
<thead>
<tr>
<th>User ID</th>
<th>Website</th>
<th>Hours Spent</th>
<th>Data Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h2>Luke</h2>
</td>
<td>
<h3 id="Luke">
<script>
var website = ["Facebook", "Youtube"];
document.getElementById("Luke").innerHTML = website.length;
</script></h3>
<p>Facebook</p>
<p>Youtube</p>
</td>
<td>
<h3>2.5h</h3>
<p>2h</p>
<p>0.5h</p>
</td>
<td>
<h3>1.3gb</h3>
<p>3mb</p>
<p>1gb</p>
</td>
</tr>
<tr>
<td>
<h2>John</h2>
</td>
<td>
<h3 id="John">
<script>
var website = ["Youtube"];
document.getElementById("John").innerHTML = website.length;
</script></h3>
<p>Youtube</p>
</td>
<td>
<h3>3h</h3>
<p>3h</p>
</td>
<td>
<h3>1gb</h3>
<p>1gb</p>
</td>
</tr>
<tr>
<td>
<h2>Peter</h2>
</td>
<td>
<h3 id="Peter">
<script>
var website = ["Facebook", "Youtube"];
document.getElementById("Peter").innerHTML = website.length;
</script></h3>
<p>Facebook</p>
<p>Youtube</p>
</td>
<td>
<h3>1.75h</h3>
<p>1.5h</p>
<p>0.25h</p>
</td>
<td>
<h3>1.3gb</h3>
<p>3mb</p>
<p>1gb</p>
</td>
</tr>
</tbody>
</table>
</div>
<button onclick="window.print()">Print Report</button>
<!-- Javascript Coding - No Colours Displayed On Print Preview-->
<button>Save Report</button>
<!-- Save Button Does Not Work, Fix Needed-->
</body>
</html>
Related
help me, for the same result in textboxt result when i added value on textbox nilai 1 from popup,
I am confused what event should I use in java script for my case.
I tried using onChange event but it didn't work
here is my code
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form method='post' action='' name='myF'>
Nilai 1 : <input type=text name='nilai1' id='nilai1' size='20' onchange="sameresult()">
<a href="javascript:void(0);" NAME="My Window Name" title=" My title here "
onClick='javascript:window.open("pop_up.html","Ratting",
"width=550,height=170,left=150,top=200,toolbar=1,status=1,");'> Cari</a>
<br>
<br>
Result :<input type=text name='result' id='result' size='20'>
</form>
<script langauge="javascript">
function sameresult(){
var a = document.getElementById('nilai1');
var result = document.getElementById('result');
result.value = a.value;
}
</script>
</body>
</html>
pop_up.html
<html>
<head>
<script langauge="javascript">
function post_value(s){
opener.document.getElementById('nilai1').value = s;
self.close();
}
</script>
<title>Popup</title>
</head>
<body>
<table border='1'>
<tr>
<td>No</td>
<td>Value</td>
<td>Action</td>
</tr>
<tr>
<td>1</td>
<td>200</td>
<td>Select</td>
</tr>
<tr>
<td>2</td>
<td>300</td>
<td>Select</td>
</tr>
</form>
</body>
</html>
you can use onkeypress event like
Nilai 1 : <input type=text name='nilai1' id='nilai1' size='20' onkeypress="sameresult()">
I want to know how to display list of selected values in popup window as dropdown.
here is my clientview.jsp code
</head>
<body>
<jsp:include page="clientusrmapheader.jsp">
<jsp:param name="" value="true"/>
</jsp:include>
<div class="tcc" style="min-height:620px; width:100%;float:left;">
<form:form method="POST" modelAttribute="clientAccounts" action="/client_user_map.html">
<div id='baseDiv'>
<input type="submit" value="CLIENT-USER MAP"/>
<%# include file="/WEB-INF/views/clientusermap.jsp"%>
</div>
<table>
<thead>
<tr>
<th><span class="selectALLWrap"> <input type='checkbox' id='selectALL' onclick='selectALLQuestion()'></span><span>Select</span> </th>
<th class="sortable" id='clientName' >Client Name</th>
</tr>
</thead>
<tbody style="font-size: 18px;font-family: 'HelveticaNeue-Medium';">
<c:forEach items="${clientAccountsList}" var="clientAccount">
<tr>
<td><div class="checkBoxSel"><form:checkbox path="clientName" value="${clientAccount.clientName}"/> </div></td>
<td>${clientAccount.clientName}</td>
</tr>
</c:forEach>
</table>
</form:form>
</div>
</body>
when above code executes i get list of clients .. now i want to select few client and click on client-user map ... those values should dispaly as popup...
I have written another jsp where selected client appears..
here is clientusermap.jsp
<link rel="stylesheet" type="text/css" href="/css/clientusermap.css" />
<html>
<head>
<script>
$("#baseDiv").click(function(e) {
$("#popUpDiv").show();
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
</head>
<body>
<div class="tcc" style="min-height:620px; width:100%;float:left;">
<form:form modelAttribute="clientAccounts">
<table border="0">
<tr>
<tr>
<td class = "select">select user :
</td>
<td ALIGN="center">
<select>
</select>
</td>
</tr>
<tr>
<td class = "select">List of Clients :
</td>
<td ALIGN="center">
<div id="popUpDiv">
<form:select path="clientName" id="selectPopUp">
<form:option value="-1">Select</form:option>
<form:options items="${clientNameList}" />
</form:select>
</div>
</td>
</tr>
</TR>
</table>
</form:form>
<input TYPE="submit" VALUE="save">
<input TYPE="reset" VALUE="cancle">
</div>
</body>
</html>
Screen capture
I am a complete newb to JavaScript so I really don't know what the hell I'm doing. When I enter the quantities on my site and click the button, nothing shows up. Can anyone steer me into the right direction. Heres the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
function calculateTotal ()
{
var balls = parseInt(document.getElementById("soccerballquantity").value);
var jerseys = parseInt(document.getElementById("soccerjerseyquantity").value);
var cleats = parseInt(document.getElementById("soccercleatquantity").value);
var ballTotal = balls * 30;
var jerseyTotal = jerseys * 100;
var cleatTotal = cleats * 100;
var realTotal = ballTotal + jerseyTotal + cleatTotal;
document.getElementById("test").value=realTotal;
}
</script>
</head>
<body>
<h2>
<center>
Welcome to my Soccer Store
</center>
</h2>
<div>
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Soccer ball</td>
<td>$30</td>
<td><input type="text" value="test" id="soccerballquantity"></td>
</tr>
<tr>
<td>Soccer Jersey</td>
<td>$100</td>
<td><input type="text" value="test" id="soccerjerseyquantity"></td>
</tr>
<tr>
<td>Soccer Cleats</td>
<td>$200</td>
<td><input type="text" value="test" id="soccercleatquantity"></td>
</tr>
<tr>
<td> <input type="button" value="clickme" onclick="calculateTotal"> </td>
<td> <input type="text" value="test"> </td>
</tr>
</table>
<hr>
<p> <center> Spend $250 or more and get an extra %10 off!! </center> </p>
</div>
</body>
</html>
I know this is really sucky code. Any help would be appreciated.
2 problems:
you need to add () after calculateTotal in your onclick
your don't have an id="test" on the target field
Working fiddle: http://jsfiddle.net/Qn4Tv/
Currently, I have a two table rows with two textboxes. I want to buid a button which allows the user to add and subtract an author row depending on how many they want. Once they increase the amount of authors they need for input, the user clicks on the generate button, the input from the textboxes will be outputed at the bottom of the page. I was trying to pull this off with javascript and jQuery. I am a ten day old student with javascript and jQuery and feel as if I have bit off more than I can chew.
An example of what I want can be found at this lnk: http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/. However, I need the input from the textboxes outputed on the same page.
<!DOCTYPE html>
<head>
</head>
<body>
<table>
<tbody>
<tr>
<td>Author</td>
<td><input type="text" id="1" class="normalinput" placeholder="Last"></td>
<td><input type="text" id="2" class="normalinput" placeholder="First"></td>
</tr>
<tr>
<td>Second Author (If Any)</td>
<td><input type="text" id="3" class="normalinput" placeholder="Last"></td>
<td><input type="text" id="4" class="normalinput" placeholder="First"></td>
</tr>
</tbody>
</table>
<br>
<br>
<output id="20"></output>
<br>
<br>
</body>
</html>
<script type=text/javascript>
function myFunction()
{
var firstlast=document.getElementById("1").value;
if (firstlast==null || firstlast=="")
{
firstlast;
}
else if(firstlast!=null || firstlast!="")
{
firstlast=document.getElementById("1").value + ", ";
}
var firstfirst=document.getElementById("2").value;
if (firstfirst==null || firstfirst=="")
{
firstfirst;
}
else if(firstfirst!=null || firstfirst!="")
{
firstfirst=document.getElementById("2").value + ". ";
}
var secondlast=document.getElementById("3").value;
if (secondlast==null || secondlast=="")
{
secondlast;
}
else if(secondlast!=null || secondlast!="")
{
secondlast=document.getElementById("3").value + ", ";
}
document.getElementById("20").innerHTML = firstlast + firstfirst + secondlast;
}
</script>
The jQuery
//wait for the document to be ready
$(document).ready(function()
{
// when generate authors is clicked
$("#generate-authors").click(function()
{
// get the first author row in your table
var author = $(".author-row:first");
// for the amount of authors put into the text box
// insert a copy of the row after the last row
for(i = 0; i < parseInt($("#author-amount").val()); i++)
$(".author-row:last").after(author.clone());
});
// when output data is clicked
$("#output-data").click(function()
{
// go through all the author rows
$(".author-row").filter(function()
{
// add them to the output element
$("#output").append("<p>" + $(this).find("[placeholder=\"Last\"]").val() + ", " + $(this).find("[placeholder=\"First\"]").val() + ".</p>");
});
});
});
The html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
// put the script here
</script>
</head>
<body>
<input id="author-amount" type="text" />
<input id="generate-authors" type="button" value="Generate" />
<br />
<input id="output-data" type="button" value="Output Data" />
<table>
<tbody>
<tr class="author-row">
<td>Author</td>
<td><input type="text" id="1" class="normalinput" placeholder="Last"></td>
<td><input type="text" id="2" class="normalinput" placeholder="First"></td>
</tr>
</tbody>
</table>
<br />
<output id="output"></output>
</body>
</html>
See this Example might be this is that what you want
HTML
<table id="table">
<tbody>
<tr>
<td>Author</td>
<td><input type="text" id="1" class="normalinput" placeholder="Last"></td>
<td><input type="text" id="2" class="normalinput" placeholder="First"></td>
</tr>
<tr>
<td>Second Author (If Any)</td>
<td><input type="text" id="3" class="normalinput" placeholder="Last"></td>
<td><input type="text" id="4" class="normalinput" placeholder="First"></td>
</tr>
</tbody>
</table>
<input type="button" id="generat" value="add">
<input type="button" id="remove" value="remove">
<input type="button" id="display" value="display">
<output id="20"></output>
JS
$(document).ready(function(){
$("#generat").click(function(){
var clone = $("#table tr:first").clone();
$("#table tbody:last").append(clone);
});
$("#remove").click(function(){
$("#table tbody tr:last").remove();
});
$("#display").click(function(){
$("#20").html("");
$("table tr").each(function(){
$(this).find("input").each(function(){
$("#20").append(($(this).val()));
});
});
})
});
LINK
I am having a List in html page, which should get Updated on the Click of Button.
I am also having a textfield and Button. value entered in textfield should display in listbox on click of Button.
This is my Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function addsoap(form1)
{
if(document.form1.datafile.value=="")
{
alert("Select a File First");
}
else
{
var soap=document.getElementById("right1");
var newsoap=document.createElement('option');
newsoap.text=document.form1.datafile.value;
newsoap.value=document.form1.datafile.value;
soap.add(newsoap);
}
}
</script>
</head>
<body>
<table align='center'>
<form name="form1">
<tr>
<td>Please specify a file, or a set of files:<br>
<input type="file" name="datafile" size="40">
</td>
</tr>
<tr>
<td><input type=button value="ADD" onclick="addsoap(form1)" ></td>
</tr>
<tr>
<td align="right"><select id="right1" size="10" multiple>
<option>AAAAAAAAAAAAAAAAAAAAAAAAA</option>
</select></td>
</tr>
</form>
</table>
</body>
</html>
instead of .add method use .appendChild Method