I'm new in Thymeleaf and try to create a contenteditable table.
So for now I have table where I put Users after adding (using controller). When I press the button "Edit" colums become editable (by using "contenteditable="true"), then I want to VALIDATE text that I'm putting over there and after successful validation save it by pressing on the button "Save" (change to "contenteditable="false"). When you see "Edit", "Save" is hidden.
I tried to create a trivial validation for Name, Phone and Email but it's not working... And also I have this on "MyFirstName" and otherss: "Argument type HTMLElement is not assignable to parameter type string" (probably there is the problem). And I don't know how to validate length of Phone Number here as well..
If you have any ideas how to make it works, please, help me, cause I'm trying very long time..
P.S. I can only use this HTML page and insert there JS-code.
Thank you!!
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Users</title>
</head>
<body>
...
<table id="myTable">
<tr th:each ="user : ${users}">
<td th:text="${user.id}" ></td> <input type="text" id="message"/>
<td th:text="${user.firstName}" id="firstName" contenteditable="false" ></td>
<td th:text="${user.lastName}" id="lastName" contenteditable="false" ></td>
<td th:text="${user.phoneNumber}" id="phoneNumber" contenteditable="false" ></td>
<td th:text="${user.email}" id="email" contenteditable="false" ></td>
<td>
<button type="button" id="edit_button" onclick="Edit()">Edit</button>
<button type="button" id="save_button" style="display: none" onclick="Save()">Save</button>
</td>
<script type="text/javascript">
$("#edit_button").click(function () {
$("#edit_button").hide();
$("#save_button").show();
});
</script>
<script type="text/javascript">
function Edit() {
let editable = document.querySelectorAll("[contenteditable=false]")
editable[0].setAttribute("contenteditable", true);
editable[1].setAttribute("contenteditable", true);
editable[2].setAttribute("contenteditable", true);
editable[3].setAttribute("contenteditable", true);
}
function Save() {
let editable = document.querySelectorAll("[contenteditable=true]");
let myFirstName = document.getElementById("firstName");
let myLastName = document.getElementById("LastName");
let myPhoneNumber = document.getElementById("phoneNumber");
let myEmail = document.getElementById("email");
let re1 = /^[a-zA-Z]+$/;
let valid1 = re1.test(myFirstName);
let re2 = /^[a-zA-Z]+$/;
let valid2 = re2.test(mySurName);
let re3 = /^\d[\d\(\)\ -]{4,14}\d$/;
let valid3 = re3.test(myPhone);
let re4 = /^[\w-\.]+#[\w-]+\.[a-z]{2,4}$/;
let valid4 = re4.test(myEmail);
if (valid1 && valid2 && valid3 && valid4){
$("#save_button").hide();
$("#edit_button").show();
editable[0].setAttribute("contenteditable", false);
editable[1].setAttribute("contenteditable", false);
editable[2].setAttribute("contenteditable", false);
editable[3].setAttribute("contenteditable", false);
} else {
alert('Type correct information!');
}
}
</script>
</tr>
</table>
</body>
</html>
Related
Hi guys im a grade 10 student and was asked to create a basic like calculator to solve for the area of the triangle, but i really dont know how.I can do it with the use of a radio button but my teacher said to do it without the radio input. My codes works fine but if i press clear and input a value to the base and height, it will say syntax error...please can you help me? also whenever i dont put a value on base and height,it says 0 instead of syntax error,so please help me....(also sorry about earlier, im just new to this site)
this is my code:
<html>
<head>
<title>hfsabfhsabfihs</title>
</head>
<body>
<script type="text/javascript">
<!--
function checkbutton() {
var num1 = document.getElementById("input1").value;
var num2 = document.getElementById("input2").value;
if (document.form1.checked == false) {
alert("Syntax Error")
} else {
alert(num1 * num2 / 2);
}
}
function clearbutton() {
document.form1.checked = false;
var num1 = document.getElementById("input1").value = "";
var num2 = document.getElementById("input2").value = "";
}
//-->
</script>
<form name="form1">
<table>
<tr>
<td>Base</td>
<td><input type="text" id="input1" /></td>
</tr>
<tr>
<td>Height</td>
<td><input type="text" id="input2" /></td>
</tr>
</table>
<input type="button" value="Compute" onclick="checkbutton()">
<input type="button" value="Clear" onclick="clearbutton()">
</body>
</html>
problem is on clear function function
function clearbutton()
{
// document.form1.checked= false;
var num1 = document.getElementById("input1").value="";
var num2 = document.getElementById("input2").value="";
}
you are getting this error because you have set a variable here i.e form1.checked. either remove this variable or change its value on calculation function
Hope the below code helps:
// vairbale
const baseInput = document.querySelector("#input1")
const heightInput = document.querySelector("#input2")
const coputeBTn = document.querySelector("#Compute")
const areaTriangle = (base, height) =>{
let total =""
let error = false
let errorMessage = ""
if(base != "" && height != ""){
error = false
total = base * height / 2
}else{
error = true
errorMessage = "Please fill all inputs."
return errorMessage
}
return total
}
// Calling Function
coputeBTn.addEventListener("click", ()=>{
console.log(areaTriangle(Number(baseInput.value), Number(heightInput.value)))
})
<!doctype HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form name="form1">
<table>
<tr>
<td>Base</td>
<td><input type="text" id="input1" /></td>
</tr>
<tr>
<td>Height</td>
<td><input type="text" id="input2" /></td>
</tr>
</table>
<input type="button" id="Compute" value="Compute">
<input type="button" value="Clear" onclick="clearbutton()">
</form>
</body>
</html>
I'm having trouble figuring out how to do this, and well, need help.
I'm trying to put my information into an array that's going to be shown and always be able to grow. I need help deleting specific entries into it, either by searching for one or by pointing a mouse and deleting it,
Is there any nice easy way to do it?
<!doctype html>
<html lang="sv">
<body>
<head>
<meta charset="UTF-8">
</title>
</head>
<body>
<input type="text" placeholder="Förnamn" id="name" autofocus>
<input type="date" id="pnummer" autofocus>
<input type="text" placeholder="Efternamn" id="enamn" autofocus>
<input type="button" value="mata in" onclick="register()">
<input type="button" value="visa" onclick="show()">
<script type="text/javascript">
array=[]
function register()
{
var fnamn = document.getElementById("name").value;
var enamn = document.getElementById("enamn").value;
var pnummer = document.getElementById("pnummer").value;
var p1 = new Person(fnamn,pnummer,enamn);
array.push(p1);
}
function Person(fnamn, pnummer, enamn)
{
this.fnamn=fnamn;
this.pnummer=pnummer;
this.enamn=enamn;
this.visa=function()
{
var panel ="Förnamn:"+" "+this.fnamn+" "+"Efternamn:"+" "+this.enamn+" "+"Personnummer:"+" "+this.pnummer+"<br>";
return panel;
}
}
function show(){
var showperson=document.getElementById("new");
showperson.innerHTML="";
var i=0;
while (array.length>i)
{
showperson.innerHTML+=array[i].visa()
i++;
}
}
</script>
<p id="new"></p>
<div id="panel"></div>
</body>
</html>
I am not 100% sure what you're trying to do or what some of those words mean but is this what you're trying to do?
var peopleTracker = {};
var peopleCounter = 0;
function addPerson()
{
// get the values
var firstName = document.getElementById("firstName").value.trim();
var lastName = document.getElementById("lastName").value.trim();
var birthday = document.getElementById("birthday").value.trim();
// make sure none are blank
if(firstName == "" || lastName == "" || birthday == "") return;
// give each person an ID so we can remove them later
var personID = ++peopleCounter;
peopleTracker[personID] = {
"firstName" : firstName,
"lastName" : lastName,
"birthday" : birthday
};
// add the person to the table
var row = document.getElementById("peopleList").insertRow();
row.insertCell().innerText = firstName;
row.insertCell().innerText = lastName;
row.insertCell().innerText = birthday;
row.insertCell().innerHTML = 'remove';
}
// delete a user from the tracker and remove the row
function removePerson(row, personID)
{
delete peopleTracker[personID];
row.parentNode.removeChild(row);
}
<!doctype html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<title>the dingo ate my baby</title>
</head>
<body>
<input type="text" placeholder="First Name" id="firstName" autofocus>
<input type="text" placeholder="Sur Name" id="lastName" autofocus>
<input type="date" id="birthday" autofocus>
<input type="button" value="Add Person" onclick="addPerson()">
<br /><br />
<table border="1">
<thead>
<tr>
<th>First Name</th>
<th>Sur Name</th>
<th>Birthday</th>
<th>Action</th>
</tr>
</thead>
<tbody id="peopleList"></tbody>
</table>
</body>
</html>
A few thoughts:
If you're going to use an array to delete then you're going to need to use some unique ID to be able to find the person you want to delete. You cannot use the array index because that will change as you remove people from the array.
By using an object to store the users you can delete by using a unique ID that changes for each user added.
I jQuery is an option, you could find the index of your clicked <div> and delete the element with something like the following function:
$( "div.someIdYouGiveIt" ).click(function() {
var index = $( "div.someClassYouGiveIt" ).index( this );
array.splice(index, 1);
});
I am new to UI design. I have created Captcha, Please anyone give me an idea to validate Captcha using JavaScript.Thanks in advance. I have added my code below.
Code for getting new Captcha:
<html>
<head>
<script language="javascript" type="text/javascript">
function getCaptcha() {
var chars = "0Aa1Bb2Cc3Dd4Ee5Ff6Gg7Hh8Ii9Jj0Kk1Ll2Mm3Nn4Oo5Pp6Qq7Rr8Ss9Tt0Uu1Vv2Ww3Xx4Yy5Zz";
var string_length = 5;
var captchastring = '';
for (var i=0; i<string_length; i++) {
var rnum = Math.floor(Math.random() * chars.length);
captchastring += chars.substring(rnum,rnum+1);
}
document.getElementById("randomfield").innerHTML = captchastring;
}
</script>
<style>
HTML Code:
</head>
<body onload="getCaptcha();">
<form name="randform">
<table style="border:1px solid #ecece4">
<tr><td colspan="2" align="center"><strong>Contact Us Form</strong></td></tr>
<tr><td>Enter Captcha Code</td><td><input type="text" id="txtcode"/></td></tr>
<tr>
<td>
</td>
<td>
<div id="captcha">
<div id="captcha_gen">
<label align="center" id="randomfield"></label>
</div>
</div><input type="button" value="Refresh" onClick="getCaptcha();"/></td></tr>
<tr><td colspan="2" align="center"><input type="button" value="Submit"/></td></tr>
</table>
</form>
</body>
<html>
function validateCaptcha()
{
var chr = document.getElementById("tbxCaptcha").value;
var cap = document.getElementById("randomfield").innerHTML;
if (chr==cap)
{
return true;
}
else
{
alert ("Please enter valid verification code");
return false;
}
}
I'm making a recipe calculator for my coursework. I have reached the stage where it will correctly validate everything and make a new row in a table. Sadly in the if statement within the recipe function, it always goes true for isNaN? No matter what I put? Can anyone help me with this?
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<script type="text/javascript">
// Declare all variables
var ingredient = document.getElementById("ingredient").value;
var amount = document.getElementById("number").value;
var unit = document.getElementById("unit").value;
var ingredientcount = 0
// The save function
function save(){
var verified = true;
while(verified){
var name = prompt("What's the name of the recipe?")
var serves = prompt("How many people does it serve?")
if(serves === "" || name === "" || isNaN(serves)=== true)
{
alert("You have to enter a name, followed by the number of people it serves. Try again.")
verified = false;
}
else{
alert("sucess!");
// array(ingredient,amount,unit,name,serves)
return;
}
}
}
// The function to valiate the data and manage everything
function recipe(){
if(ingredient === ""|| amount === "" || unit === "Select Unit"){
alert("You must fill in all fields.")
}
else if(isNaN(amount)){
alert("You have to enter a number in the amount field")
}
else{
alert("hey!")
alert(recipe[1][2] + recipe[1][1])
var totalamount = amount + " "+ unit
insRow(ingredient, totalamount) // post(0,*123456*,"Fish")
ingredientcount ++;
alert(ingredientcount);
}
}
</script>
</head>
<body>
<h1>Recipe Name</h1>
<h2>Serves many people </h2>
<table border="1" id="table" >
<tr>
<td>
<input type="text" id="ingredient" placeholder="Enter an Ingredient">
</td>
<td>
<input type="text" id="number" placeholder="Enter an amount">
<select id="unit">
<option>Select Unit</option>
<option>Grams</option>
<option>Mililitres</option>
<option>Number</option>
</select>
</td>
<td>
<button type="button" onclick="recipe()">Add</button>
<button type="button" onclick="save()">Save</button>
</td>
</tr>
<th>Ingredient</th>
<th>Amount</th>
<th> </th>
</table>
</body>
</html>
The problem is that you are setting the values of ingredient, amount, and unit when the page loads, not when the Add button is pushed. You need to move those assignments to the recipe() function.
I have written a function in Javascript which will be fired on page load.
The function works fine for the first time. But if I come back to index page after visiting other pages, it does not work properly.
It does work correctly upto a certain point but skips code after that.
following is my function
<script>function populate() {
//alert("The Flag is "+$('#flag').val());
val =document.getElementById('flag').value;
xml =document.getElementById('xml').value;
alert(xml);
if (val === "M") {
if (window.ActiveXObject) {
doc = new ActiveXObject('Microsoft.XMLDOM');
doc.async = 'false';
doc.loadXML(xml);
alert("ActiveX");
} else {
var parser = new DOMParser();
doc = parser.parseFromString(xml, 'text/xml');
// alert("DOMparser");
}
alert("Value true");
/* upto here function works correctly each time
* I have also seen the values of both val and xml are coming correctly
*/
passportNo = doc
.getElementsByTagName('PASSPORT_NO')[0].childNodes[0].nodeValue;
//alert('passportNo ' + passportNo);
document.getElementById('passportNo').value = passportNo;
pass_type = doc.getElementsByTagName('PASS_TYPE')[0].childNodes[0].nodeValue;
// alert("Pass_type = " + pass_type);
if (pass_type === "I") {
document.getElementById('in').checked = true;
} else if (pass_type === "O") {
document.getElementById('out').checked = true;
}
jobNo = doc.getElementsByTagName('JOB_NO')[0].childNodes[0].nodeValue;
//alert("jobNo = "+jobNo);
document.getElementById('job_no').value = jobNo;
jobDt = doc.getElementsByTagName('JOB_DT')[0].childNodes[0].nodeValue;
//alert("jobDT "+jobDt);
document.getElementById('DT').value = jobDt;
//Clear xml
nationality =doc.getElementsByTagName('NATIONALITY')[0].childNodes[0].nodeValue;
document.getElementById('nationality2').value = nationality;
element = document.getElementById('nationality');
element.value = nationality;
}
} </script> `
and this is how I am calling it
<body onload="populate()">
<table width="1270" align="center">
<tr>
<td width="1010" height="46" colspan="3" align="center"><h1>Currency
Declaration Form</h1></td>
</tr>
</table>
<input type="hidden" id="flag" value="<%=code%>" />
<input type="hidden" id="xml" value="<%=xml%>" />
<form name="myForm" action="Entry.do" method="post"
onsubmit="return validateAll()" class = "autocompleteOff">
<table width="1042">
<tr class="heading">
</tr>
<tr>
<td width="256" align="left"><input type="radio" name="inout"
id="in" value="I" /> <label>INCOMING </label> <input type="radio"
name="inout" id="out" value="O" /> <label>OUTGOING </label></td>
<td width="774" align="right"><label>JobNo/DT</label> <input
type="text" name="job_no" id="job_no" readonly="readonly"
tabindex="-1" /> <input type="text" name="DT" id="DT"
readonly="readonly" tabindex="-1" value="<%=Convert.getSysDate()%>" /></td>
</tr>
</table>`
I can't see neither passportNo id neither PASSPORT_NO tag (getElementsByTagName) in your HTML code. Same problem with pass_type, nationality and many other elements. Do you miss some code? Or, maybe, this is dynamic output from PHP (for example) and after first run it returns different HTML?