Take ids of text boxes in an html growing table - html

I have made code for auto generated text boxes in an HTML growing table. I want to save values from these text boxes to a mysql database using netbeans but I don't know how I get the ids of each text box while they are auto generating..
My code is here..please help me if there is any solution for this problem..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Tue, 24 Mar 2015 06:41:28 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var rowCount = 1;
function addMoreRows(frm) {
rowCount ++;
var recRow = '<p id="rowCount'+rowCount+'"><tr><td><input name="name" type="text" size="17%" maxlength="120" /></td><td><input name="email" type="text" maxlength="120" style="margin: 4px 5px 0 5px;"/></td><td><input name="mobile" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td></tr> <img src="./image/close.png" /></p>';
jQuery('#addedRows').append(recRow);
}
function removeRow(removeNum) {
jQuery('#rowCount'+removeNum).remove();
}
</script>
</head>
<body>
<table rules="all" style="background:#fff;">
<tr>
<td style="font-size:14px;" >Name</td>
<td style="font-size:14px;">Email</td>
<td style="font-size:14px;">Mobile</td>
<td><span style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;" onclick="addMoreRows(this.form);">
<img style=" padding-left: 12px;" src="./image/add.png" />
</span>
</td>
</tr>
<form action="" method="POST">
<tr id="rowId">
<td><input type="text" name="name" size="17%"/></td>
<td><input type="text" name="email" /></td>
<td><input type="text" name="mobile" /></td>
</form>
</table>
<div id="addedRows"></div>
</td>
</tr>
<td><input type="submit"></td>
</table>
</body>
</html>

Related

HTML file change to REACT

I'm wondering if it's possible to change this HTML code to make it fit into React.For example is if I try to put this HTML code into the REACT app. I also included the code for Node.js and MongoDB. Does it require a lot of change for the HTML code to make it fit in React? Is it necessary to include script and import DOM in the method to include it in REACT App?
This is home.ejs code use for upload and download files.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>Upload Files</h2>
<form action="/" method="POST" enctype="multipart/form-data">
<input type="file" name="pic"><br>
<input type="submit" value="Upload">
</form><br><br><br><br>
<h2>Download Files</h2>
<table>
<thead>
<tr>
<td>
image
</td>
<td>
download
</td>
</tr>
</thead>
<tbody>
<% for(var i=0; i < data.length > 0; i++) {%>
<tr>
<td><img src="<%= data[i].picspath %>" style="width:100px; height:100px;"></td>
<td>
<form action="/download/<%= data[i]._id %>" method="GET">
<input type="submit" value="Download">
</form>
</td>
</tr>
<% } %>
</tbody>
</table>
</body>
</html>

sure just follow the following steps
Replace the opening and closing < html > tags with a < div > tag.
Replace the opening and closing < head > tags with a <React.Fragment>
tag.
Replace the opening and closing < body > tags with a < div > tag.
Replace the <% and %> tags with curly braces { and } to indicate
that the code between them is JavaScript.
Replace the <%= and %>tags with curly braces { and } to indicate that the code between them is an expression that should be rendered as a string.
<div>
<React.Fragment>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</React.Fragment>
<div>
<h2>Upload Files</h2>
<form action="/" method="POST" enctype="multipart/form-data">
<input type="file" name="pic" /><br />
<input type="submit" value="Upload" />
</form>
<br /><br /><br /><br />
<h2>Download Files</h2>
<table>
<thead>
<tr>
<td>image</td>
<td>download</td>
</tr>
</thead>
<tbody>
{data.map((item) => {
return (
<tr>
<td>
<img src={item.picspath} style={{ width: "100px", height: "100px" }} />
</td>
<td>
<form action={`/download/${item._id}`} method="GET">
<input type="submit" value="Download" />
</form>
</td>
</tr>)
})}
</tbody>
</table>
</div>
</div>

How to display multiple data from local storage

I'm trying to keep the data saved on the submit.html page. The data is being stored on localstorage, i want the entered data to be in the table for always whenever i visit that page. Currently it is visible on the time of submit event only. when i go back to submit.html page with another entry, the previous data was gone.
Here's the code:
1, index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="form.css" />
<title>Save Later</title>
</head>
<body>
<div class="alert"></div>
<form id="save-later-form" action="result.html" onsubmit="callme()" method="POST">
<h3>Simple Save Later Form</h3>
<label for="email"><b>Email</b></label>
<input type="text" id="Email" placeholder="Enter Email" name="email" required>
<div class="inline" style="display: flex; ">
<div style="display: flex; flex-direction: column;">
<label for="First name"><b>First name</b></label>
<input id="Firstname" type="text" placeholder="First name" name="First name" required>
</div>
<div style="display: flex; flex-direction: column; margin-left:320px;">
<label for="Last name"><b>Last name</b></label>
<input id="Lastname" type="text" placeholder="Last name" name="Last name" required>
</div>
</div>
<label for="Business"><b>Business</b></label>
<select id="Business" name="Business">
<option value="Food & Beverage">Food & Beverage</option>
<option value="Restaurants">Restaurants</option>
<option value="Pet Shops">Pet Shops</option>
<option value="Fashion Boutique">Fashion Boutique</option>
</select>
<label for="Description">Description</label>
<textarea name="Description" id="Description" placeholder="Describe yourself in 100 words"></textarea>
<button type="submit" id="submit">SUBMIT</button>
<button type="submit" id="save">SAVE</button>
</form>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
2, Index.JS
function getData() {
return JSON.parse(localStorage.getItem('data') || "[]");
}
function callme() {
const data = getData();
const obj = Object.assign(...["Email", "Firstname", "Business"].map(prop =>
({
[prop]: document.getElementById(prop).value
})));
localStorage.setItem('data', JSON.stringify(data.concat(obj)));
}
3, Result.html
<!DOCTYPE html>
<html>
<head>
<title>Detail Page</title>
</head>
<body>
<h1>User Detail Page</h1>
<div id="result-table">
<table border="1">
<tr>
<th>Email</td>
<th>Firstname</td>
<th>Lastname</th>
<th>Business</td>
<th>Description</td>
</tr>
<tr>
<td id="first"></td>
<td id="second"></td>
<td id="third"></td>
<td id="fourth"></td>
<td id="fifth"></td>
</tr>
</table>
<br>
</div>
<script>
window.onload = function() {
document.getElementById('first').innerText = localStorage.getItem('Email');
document.getElementById('second').innerText = localStorage.getItem('Firstname');
document.getElementById('third').innerText = localStorage.getItem('Lastname');
document.getElementById('fourth').innerText = localStorage.getItem('Business');
document.getElementById('fifth').innerText = localStorage.getItem('Description');
};
</script>
<form action="/index.html">
<button>Go Back</button>
</form>
</body>
</html>
I managed to save data to local storage as JSON, but cannot parse multiple data to Result page, currently if resubmitted, data would be overwritten rather than adding new to table. Please any help is appreciated
Result page:

You need to put everything in only one page, as follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> your title </title>
<style>
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 16px;
}
body.onForm table,
body.onTable form { display: none }
label {
display : block;
margin-bottom : .2rem;
}
label b {
display : block;
font-size : .8rem;
}
label textarea {
width : 20rem;
height : 5rem;
}
table {
background-color: darkslategrey;
border-collapse : separate;
border-spacing : 1px;
margin : 1rem;
}
table caption {
padding : .4rem;
caption-side : bottom;
text-align : right;
}
th {
background-color : #7cc0e7;
padding : .2rem .3rem;
}
td {
background-color : white;
padding : .2rem .3rem;
}
</style>
</head>
<body class="onForm">
<form name="save-later-form">
<label>
<b>Email</b>
<input type="text" name="Email" placeholder="Enter Email"required value="">
</label>
<label>
<b>First name</b>
<input type="text" name="Firstname" placeholder="First name" required value="">
</label>
<label>
<b>Last name</b>
<input type="text" name="Lastname" placeholder="Last name" required value="">
</label>
<label>
<b>Business</b>
<select name="Business">
<option value="Food & Beverage" > Food & Beverage </option>
<option value="Restaurants" > Restaurants </option>
<option value="Pet Shops" > Pet Shops </option>
<option value="Fashion Boutique"> Fashion Boutique </option>
</select>
</label>
<label>
<b>Description</b>
<textarea name="Description" placeholder="Describe yourself in 100 words"></textarea>
</label>
<button type="reset" > reset </button>
<button type="submit"> Submit </button>
<button type="button" id="go-Table-Btn"> go 2 table </button>
</form>
<table id="t-business">
<caption><button id="go-form-Btn"> go 2 form</button></caption>
<thead>
<tr><th>Email</th><th>Firstname</th><th>Lastname</th><th>Business</th><th>Description</th></tr>
</thead>
<tbody></tbody>
</table>
</table>
<script>
const
saveLaterForm = document.forms['save-later-form']
, goTableBtn = document.querySelector('#go-Table-Btn')
, goFormBtn = document.querySelector('#go-form-Btn')
, ElmsOrder = ['Email','Firstname','Lastname','Business','Description']
, ls_business = JSON.parse( localStorage.getItem('ls_business') || '[]')
, tBusinessB = document.querySelector('#t-business tbody')
;
saveLaterForm.onsubmit = e =>
{
e.preventDefault()
let formInputs = Object.fromEntries( new FormData(saveLaterForm).entries() )
ls_business.push(formInputs)
addRow( formInputs )
localStorage.setItem('ls_business',JSON.stringify(ls_business))
document.body.classList.replace('onForm','onTable')
saveLaterForm.reset()
}
for (let lsRow of ls_business) addRow( lsRow )
function addRow( elms )
{
let row = tBusinessB.insertRow()
for (let elName of ElmsOrder) row.insertCell().textContent = elms[elName]
}
goTableBtn.onclick =_=> document.body.classList.replace('onForm','onTable')
goFormBtn.onclick =_=> document.body.classList.replace('onTable','onForm')
</script>
</body>
</html>

How to display a webpage inside <td> in a table in HTML?

Top.html
<!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">
<head>
<title>Top Page</title>
</head>
<body bgcolor="yellow">
<table border="0" width="100%">
<tr>
<td align="center" bgcolor="white">
<img src="./Img/Logo.jpg" alt="logo" />
</td>
<td align="center" bgcolor="white">
<h1 style="color: blue">Web Client Development</h1>
</td>
<td bgcolor="white" style="width: 500px; text-align: center">
<p>
<!-- <a href="./Forms/Pages/inputform.html" target="Content_Frame"
>User <br />
Logon</a
> -->
<a href="./Forms/Pages/userLogonForm.html" target=""
>User <br />
Logon</a
>
</p>
</td>
</tr>
</table>
</body>
</html>
In that 'user logon' area I want to open a UserLogon.html which goes like
UserLogon.html
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>User Logon Form</title>
<script type="text/javascript">
function submitCredentials() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
alert("Username: " + username + "\nPassword: " + password);
}
function resetCredentials() {
document.getElementById("userLogonForm").reset();
}
</script>
</head>
<body>
<form action="" id="userLogonForm">
<label for="username">Username : </label>
<input
type="text"
id="username"
name="username"
placeholder="Enter Username"
/>
<br /><br />
<label for="password">Password : </label>
<input
type="password"
id="password"
name="password"
placeholder="Enter Password"
/><br /><br />
<button type="button" onclick="submitCredentials()">Submit</button>
<button
type="button"
onclick="resetCredentials()"
style="margin-left: 100px"
>
Reset
</button>
</form>
</body>
</html>
My Top.html has three sections of <td> , One has a logo image, second one has a normal heading, the third is where I want to display my form which asks for username and password (UserLogon.html)
The problem is when I click on User Logon area it expands my UserLogon.html page for the entire area (I guess all three <td>), whereas I want to display that UserLogon.html form in my third <td> tag only. How do I keep the size fixed to that particular <td> only
Note: For the whole website I am using framesets

Table disappears in Firefox and Chrome

I have a table and when I load the page in Firefox or chrome its shifted off the screen to the the right leading to most of the table disappearing, the table should be located in the middle of the screen and seems to be overlapping on the right outside of the page area.
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Small North Run</title>
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<link rel="stylesheet" href="default.css" type="text/css">
<link rel="stylesheet" href="sponsor.css" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<h1>SMALL NORTH RUN</h1>
</header>
<nav>
<ul id="navlist">
<li>HOME</li>
<li>TRAINING REGIME</li>
<li>FORUM</li>
<li>SPONSOR</li>
<li>CONTACT</li>
</ul>
</nav>
<hr id="hrnav" />
<div id="content">
<p>This page allows you to sponsor a particular runner. Just simply select the name of the runner you wish to sponsor from the drop down list, then enter the amount you wish to donate followed by a brief message for the runner and then your name. Once making a donation the runner you have sponsored will be notified by email that you have made a donation.</p>
<br/>
<br/>
<br/>
<br/>
<form method="post" action="test.php">
<table>
<tr><td><label>Runner:</label></td>
<td>
<select name="fullname">
<?php do{?>
<option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
<?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
</select>
</td>
</tr>
<tr><td><label>Donation (£):</label></td><td><input type="text" maxlength="9" value="0.00" name="donation"/></td></tr>
<tr>
<td>
<label>Message:</label>
</td>
<td>
<textarea name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea>
</td>
</tr>
</tr>
<tr><td><label>Your Name:</label></td><td><input type="text" maxlength="30" name="donator"/></td></tr>
<tr>
<td>
<tr><td><input id="submit" type="submit" value="Confirm Donation"/></td></tr>
</table>
</form>
</div>
</div> <!-- END WRAPPER -->
</body>
</html>
CSS
#content { text-align: left; margin: 2px; padding: 10px; }
#content p { font: font: 12px/1.5 Verdana, sans-serif; float: left; }

try to add a doctype :
for example, here is the HTML5 doctype
<!DOCTYPE html>

It seems to work fine for me.
Maybe you have a problem in your css?
EDIT:
The float style on your P tag is causing the trouble.
A simple solution could be to use a defloating-break-div (I'm not sure what the proper name is) underneath your P tag:
<div style="float:none;">
<br />
</div>
This causes the rest of your code to resume the normal layout

1) You have some errors in table structure
2) If you need to center table, you can setup it margin-left and margin-right auto.
There is possible table code with align:
<table style='margin: 0 auto;'>
<tr>
<td><label>Runner:</label></td>
<td>
<select name="fullname">
<?php do{?>
<option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
<?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
</select>
</td>
</tr>
<tr>
<td><label>Donation (£):</label></td>
<td><input type="text" maxlength="9" value="0.00" name="donation"/></td>
</tr>
<tr>
<td><label>Message:</label></td>
<td><textarea name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea></td>
</tr>
<tr>
<td><label>Your Name:</label></td>
<td><input type="text" maxlength="30" name="donator"/></td>
</tr>
<tr>
<td><input id="submit" type="submit" value="Confirm Donation"/></td>
<td> </td>
</tr></table>
If you still have troubles: post somewhere full HTML and CSS code for detailed analysis.

100% width table cell

I have this table layout. I want to align the whole content to the right. So i'm using one cell with width: 100%;. Usually everything looks good and nice.
But there is something, which i don't understand. If the content in cell, which has colspan, becomes bigger than normal cell in this column (you can test this by clicking Click to test button), it brakes whole layout.
This happens on Chrome, Safari 4 and 5, IE8, but on Opera, FF and IE7 is OK.
Any ideas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<style type="text/css">
table { width: 100%; }
table td { border: 1px solid black; white-space: nowrap; }
.delimiter { width: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td><label>Row 1</label></td>
<td> </td>
<td><input type="text" value="Field 1" id="field1" size="25"></td>
<td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;"></td>
<td class="delimiter"> </td>
</tr>
<tr>
<td><label>Row 2</label></td>
<td> </td>
<td colspan="3"><input type="text" id="field2" value="Field 2" size="25"></td>
</tr>
</table>
</body>
</html>

I was not surprised when you said it worked in some browsers and not others. Welcome to the real world of developing a web app. I haven't gone down into the nitty gritty of checking why browsers are refreshing their layouts differently, as i've learned that it can be a black hole of time. Instead i put forth the following solution:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<style type="text/css">
table { width: 100%; }
table td { border: 1px solid black; white-space: nowrap; }
.delimiter { width: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td><label>Row 1</label></td>
<td> </td>
<td class="delimiter">
<table><tr>
<td><input type="text" value="Field 1" id="field1" size="25" /></td>
<td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;" /></td>
<td class="delimiter"> </td>
</tr></table>
</td>
</tr>
<tr>
<td><label>Row 2</label></td>
<td> </td>
<td>
<table><tr>
<td><input type="text" id="field2" value="Field 2" size="25" /></td>
<td class="delimiter"> </td>
</tr></table>
</td>
</tr>
</table>
</body>
</html>
I know it's not the prettiest solution, but as raw html it does work. Tested in Chrome and IE10.

Use W3C standards to be more save with crossbrowser coding. Beste solution for javascript code crossbrowser safty is to user jQuery. It's even more handy for this kind of tools/functionalities.