I am trying to make a button that cleans specific fields of my page. This is what I have, but it does not work. Not sure what else to do. Some folks tried to help me on the commends of another topic but since I could not make it work I opened this new question.
Thanks
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Landing Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('.clear').on('click', function () {
$('#inputFirstName').val('');
$('#inputLastName').val('');
$('#inputEmail').val('');
});
</script>
<style>
#formTable {
/*border: 1px solid black;*/
margin: 0 auto;
}
#outer {
width: 100%;
height: 700px;
display: flex;
align-items: center;
/*background-color: gray;*/
}
#inner {
width: 300px;
height: 350px;
margin: 0 auto;
/*background-color: yellow;*/
}
</style>
</h:head>
<h:body>
<div id="outer">
<div id="inner">
<h:form class="signupform">
<p>Sign-up for more:</p>
<table id="formTable">
<tr>
<td>First Name:</td>
<td><h:inputText id="inputFirstName" value="#{visitor.firstName}"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td><h:inputText id="inputLastName" value="#{visitor.lastName}"/></td>
</tr>
<tr>
<td>Email:</td>
<td><h:inputText id="inputEmail" value="#{visitor.email}"/></td>
</tr>
</table>
<p><h:commandButton id="submit" value="Submit" action="#{visitor.registerVisitor()}"/>
<h:outputText id="outputText" value="#{visitor.result}"/></p>
</h:form>
<button class="clear">Clear</button>
</div>
</div>
</h:body>
</html>
You're calling $('.clear') before the elements exist.
Therefore, you're adding the event handler to an empty set.
You need to run your <script> block after the elements.
Maybe you can try, instead of:
<script>
$('.clear').on('click', function () {
$('#inputFirstName').val('');
$('#inputLastName').val('');
$('#inputEmail').val('');
});
</script>
Instead have:
<script>
$(document).ready(function () {
$('.clear').on('click', function () {
$('#inputFirstName').val('');
$('#inputLastName').val('');
$('#inputEmail').val('');
});
});
</script>
Related
I would like to create a table in html that adds a column (starting number of columns: 1) every time a user clicks on it.
So Ideally if a user clicks on the table 6 times the table should look like this:
here's my HTML and js:
<!DOCTYPE html>
<html>
<body>
<head>
<title></title>
<script link src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css">
<link rel = "stylesheet" type" type="text/css" href = "style.css">
<script src="jquery-ui.min.js"></script>
<table id = "table" style="width: 100%; height: 100px; border-style: solid">
<tr>
<th class = "column"></th>
</tr>
</head>
</body>
</html>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#table").click(function()
{
var column = document.createElement("TH")
column.className = "column";
document.getElementById("table").appendChild(column);
});
});
</script>
Instead what happens when the user clicks 6 times is this:
It seems like a new row is being created when the user clicks. Is there a way I can fix this?
Here you go with a solution
$(document).ready(function() {
$("#table").click(function(){
$(this).find('tr').append("<th class='column'></th>");
});
});
.column {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id = "table" style="width: 100%; height: 100px; border-style: solid">
<tr>
<th class = "column"></th>
</tr>
</table>
Hope this will help you.
<!DOCTYPE html>
<html>
<head>
<title>Add Coulmn</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.head {
border: 1px solid ;
background:#AEB6BF;
}
.column {
border: 1px solid ;
background:#EAEDED;
}
</style>
<script>
$(document).ready(function() {
$("#btnAdd").click(function(){
var CoulmnCount=$("table > tbody > tr:first > td").length+1;
$("#table").find('thead').find('tr').append("<th class='head'>header"+CoulmnCount+"</th>");
$("#table").find('tbody').find('tr').append("<td class='column'>Coulmn1"+CoulmnCount+"</td>");
});
});
</script>
</head>
<body>
<input type="submit" value="Add Coulmn" id="btnAdd">
<table id = "table" style="width: 100%; height: 30px; border-style: solid">
<thead>
<tr>
<th class = "head">Header1</th>
</tr>
</thead>
<tbody>
<tr>
<td class = "column">Coulmn1</td>
</tr>
</tbody>
</table>
</body>
</html>
I am trying to hide/reveal table rows based on checking a checkbox.
Here it is http://dbdev2.pharmacy.arizona.edu/wideproblem.html
How do I get the hidden row to properly display at the width of the table? I've even tried setting it as a css attribute for that row, and it doesn't work.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The Case of the Squished Row</title>
<style>
table {
border: 1px solid black;
width: 600px;
}
tr {border:1px solid black;}
tr.anote {width:600px;}
th {
border:1px solid black;
width:50%;
}
td {
border: 1px solid black;
width: 25%;
}
</style>
<script type="text/javascript">
function ShowRow(msg){
var thecheck = document.getElementById("showcheck");
var thebox= document.getElementById("showbox");
var thenote= document.getElementById("shownote");
if (thecheck.checked){
thebox.innerHTML=msg;
thebox.style.color='red';
thenote.style.display='block';
}
else {
thebox.innerHTML='This is a checkbox';
thebox.style.color='black';
thenote.style.display='none';
}
}
</script>
</head>
<body>
<h1>The Case of the Squished Row</h1>
<br><br>
<h2> using display:none CSS property</h2>
<table>
<tbody id="topline">
<tr><th id="showbox">This is a checkbox</th>
<td><input type="checkbox" id="showcheck" onclick="ShowRow('Note is DISPLAY:BLOCK')"></td>
<td>this is filler</td></tr>
</tbody>
<tbody id="shownote" style="display:none">
<tr class="anote"><th>This is a note</th><td>Hey! The box is checked!</td><td>this is filler</td></tr>
</tbody>
<tbody id="botline">
<tr><th>Big Filler</th><td>Little filler</td><td>this is filler</td></tr>
</tbody>
</table>
</body>
</html>
You have to use "table-row-group", not "block" as the value of the "display" property when showing the table row group (the <tbody>).
I am making a (for fun :P) a lock screen using Firefox browser and my own made webpage. what i did is install a R-kiosk adds on to force Firefox to launch in full screen, made my webpage its homepage, and set it to run at start up. My code works fine in my laptop, but i had a problem. If the browser size or screen size is changed, so does... well... everything. the text box will be positioned far from where i want. the button is just as misplaced. so far this is what i've come up:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LogIn</title>
<style>
body{margin:0; padding: 0;}
.bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000;
}
table {
width: 100%;
border: 0;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
function cia(){
if ((document.getElementById('pass').value == "amethyst")){
document.getElementById('audio').play();
document.login.src="loading.gif";
setTimeout('window.close()',8000);
}
else{
alert('Error! Invalid combination. Please try again.');
location.reload();
}
}
</script>
</head>
<body><div align="center"><img src="img.jpg" class="bg"/></div><form name="formL" id="formL"><table>
<tr><td height="413">  </td></tr>
<tr>
<td width="49%" height="45"> </td>
<td width="51%"><input id= "un" type="text" value="MidGuardiaN"/></td>
</tr>
<tr>
<td width="49%"> </td>
<td width="51%"><input id="pass" name="pass" type="password" value="" autofocus="autofocus" onKeydown="Javascript: if (event.keyCode==13)cia();"/></td>
</tr>
</table>
<table>
<tr>
<td width="49%"> </td>
<td width="51%"><a href="javascript:;" onClick="cia()" > <img name="login" src="login.png"/></a></td>
</tr>
</table>
</form>
<audio id="audio" src="welcome.mp3" ></audio>
</body>
</html>
Hope you can help me improve this. thanks.
You need to research Responsive Web Design.
I have a script that works to switch between two popups that are triggered by an onmouseover event. One feature of this is that the popup persists until the next onmouseover event. I want to have many of these and so the popup to be hidden can not be 'hard coded' as in my script. Is there a way to store in a variable the id of the popup that needs to be undisplayed the next time the popup function is called?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function popup(show,hide){
show.style.display="block"
hide.style.display="none"
}
</script>
<style type="text/css">
.pop {
position: absolute;
display: none;
top: 50px;
left: 200px;
width: 300px;
}
</style>
</head>
<body>
<table><tr>
<td onmouseover="popup(pop1,pop2)">Show popup 1</td>
<td onmouseover="popup(pop2,pop1)">Show popup 2</td>
</tr></table>
<div class="pop" id="pop1">This is popup 1</div>
<div class="pop" id="pop2">Popup 2 is here</div>
</body>
</html>
or go to http://www.salemharvest.org/Utilities/TestingPHP/testingpopupdivs5.php
One way to generalize it is to use element index to show the associated popup. This will require that the popup elements (pop class elements) is contained by an element, in order to make both the popper and the popup element indexes mapped equally like two arrays of same length.
When showing a popup, the popup element is saved in a variable which will be used later when the mouse is on a different popper element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
addEventListener("DOMContentLoaded", function() {
var lastPopup = null;
function showit(ev) {
var popups = document.getElementById("popups").children;
eleToShow = popups[ev.target.cellIndex];
if (lastPopup && (lastPopup !== eleToShow)) lastPopup.style.display = "none";
eleToShow.style.display = "block";
lastPopup = eleToShow;
}
var poppers = document.getElementById("poppers").cells, i;
for (i = 0; i < poppers.length; i++) {
poppers[i].addEventListener("mouseover", showit, false);
}
}, false);
</script>
<style type="text/css">
.pop {
position: absolute;
display: none;
top: 50px;
left: 200px;
width: 300px;
}
</style>
</head>
<body>
<table><tr id="poppers">
<td>Show popup 1</td>
<td>Show popup 2</td>
</tr></table>
<div id="popups">
<div class="pop">This is popup 1</div>
<div class="pop">Popup 2 is here</div>
</div>
</body>
</html>
I probably should have started with this, but my poppers will actually be rows, not cells. I tried what seemed like simple modifications of Jay's code to do it with rows. I changed it to index rows and then used rowIndex to find the popups, but I am missing something.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
// function by Jay at stackoverflow
addEventListener("DOMContentLoaded", function() {
var lastPopup = null;
function showit(ev) {
var popups = document.getElementById("popups").children;
eleToShow = popups[ev.target.rowIndex];
if (lastPopup && (lastPopup !== eleToShow)) lastPopup.style.display = "none";
eleToShow.style.display = "block";
lastPopup = eleToShow;
}
var poppers = document.getElementById("poppers").rows, i;
for (i = 0; i < poppers.length; i++) {
poppers[i].addEventListener("mouseover", showit, false);
}
}, false);
</script>
<style type="text/css">
.pop {
position: absolute;
display: none;
top: 100px;
left: 200px;
width: 300px;
}
</style>
</head>
<body>
<table id="poppers">
<tr><td>Show popup 1</td></tr>
<tr><td>Show popup 2</td></tr>
<tr><td>Show popup 3</td></tr>
</table>
<div id="popups">
<div class="pop">This is popup 1</div>
<div class="pop">Popup 2 is here</div>
<div class="pop">And then popup 3</div>
</div>
</body>
</html>
I'm trying to set the default focus on an input box when the page loads (example: google).
My page is very simple, yet I can't figure out how to do this.
This is what I've got so far:
<html>
<head>
<title>Password Protected Page</title>
<script type="text/javascript">
function FocusOnInput()
{
document.getElementById("PasswordInput").focus();
}
</script>
<style type="text/css" media="screen">
body, html {height: 100%; padding: 0px; margin: 0px;}
#outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
#middle {vertical-align: middle}
#centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
</style>
</head>
<body onload="FocusOnInput()">
<table id="outer" cellpadding="0" cellspacing="0">
<tr><td id="middle">
<div id="centered">
<form action="verify.php" method="post">
<input type="password" name="PasswordInput"/>
</form>
</div>
</td></tr>
</table>
</body>
</html>
How come that doesn't work while this works fine?
<html>
<head>
<script type="text/javascript">
function FocusOnInput()
{
document.getElementById("InputID").focus();
}
</script>
</head>
<body onload="FocusOnInput()">
<form>
<input type="text" id="InputID">
</form>
</body>
</html>
Help is much appreciated :-)
And you can use HTML5's autofocus attribute (works in all current browsers except IE9 and below). Only call your script if it's IE9 or earlier, or an older version of other browsers.
<input type="text" name="fname" autofocus>
This line:
<input type="password" name="PasswordInput"/>
should have an id attribute, like so:
<input type="password" name="PasswordInput" id="PasswordInput"/>
This is one of the common issues with IE and fix for this is simple.
Add .focus() twice to the input.
Fix :-
function FocusOnInput() {
var element = document.getElementById('txtContactMobileNo');
element.focus();
setTimeout(function () { element.focus(); }, 1);
}
And call FocusOnInput() on $(document).ready(function () {.....};
You could also use:
<body onload="focusOnInput()">
<form name="passwordForm" action="verify.php" method="post">
<input name="passwordInput" type="password" />
</form>
</body>
And then in your JavaScript:
function focusOnInput() {
document.forms["passwordForm"]["passwordInput"].focus();
}