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>
Related
I cant get any of the buttons using onclick to recognise the functions. I get an error "cant find variable". Im very new to all this and at a loss. It doesn't matter which button I click I have the same issues with all of them.
in the below code,
I click on <button onclick="show_admin()">Admin</button> which should call function show_admin().. What am I doing wrong please.
Inspector output
const char main_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset='UTF-8'">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="refresh" content="500; url=/">
<title>System Settings</title>
<body onload="show_admin()">
<div class="banner">
<h1>X Controller</h1>
</div>
<div class="split left">
<div class="centered">
These are my button
<button onclick="show_admin()">Admin</button>
<br/>
<button onclick="show_wifi()">WIFI</button>
<br/>
<button onclick="show_tags()">Tags</button>
<br/>
</div>
</div>
<div class="split right">
<div class="centered" id="showdata">
</div>
</div>
</body>
<script>
These are my functions
function show_admin() {var table_data = <h1>Admin Settings</h1><br/>%s<br/>
<form action="/ADMINSetting" method="POST">
<table><tr>
<td> User Name </td> <td> <input type="String" name="UserName" placeholder="%s"></td>
</tr><tr>
<td> Password </td> <td> <input type="String" name="UserPass" placeholder="%s">
</td></tr></table>
<input type="submit" value="Update Admin Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
function show_wifi() { var table_data = <h1>WIFI Settings</h1><br/>%s<br/>
<form action="/WIFISetting" method="POST">
<table>
<tr>
<td> SSID Network </td> <td> <input type="String" name="WifiSsid" placeholder="%s"></td>
</tr><tr>
<td> SSID Password </td> <td> <input type="String" name="SsidPass" placeholder="%s"></td>
</tr>
</table>
<input type="submit" value="Update Wifi Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
function show_tags() { let table_data = <h1>Tag Settings</h1><br/>%s<br/>
<form action="/DEVICESetting" method="POST">
<table>
<tr>
<td> Access Tag 1 </td> <td> <input type="String" name="TAG1" placeholder="%s"></td>
</tr>
<tr>
<td> Access Tag 2 </td> <td> <input type="String" name="TAG2" placeholder="%s"></td>
</tr>
<tr>
<td> Cleaner Tag 1 </td> <td> <input type="String" name="CTAG1" placeholder="%s"></td>
</tr>
</table>
<input type="submit" value="Update BLE Tag Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
</script>
</body>
</html>
)=====";
I have tried rearranging the function and moving its position. with no luck
Unless you have JSX installed, You can't just stick HTML elements into JavaScript like that. You will need to use quotes around all the HTML.
It looks like you're reusing the same tags anyway, why not stick all those tags into the HTML portion and update the values in Javascript? You can also update the CSS through JavaScript and set display:none if you want to hide an unused element.
I added the below to the html section
<div class="split right">
<div class="centered" id="showdata">
<form id="adminForm">
<table>
<tr>
<td> User Name </td>
<td>
<input type="String" name="UserName" placeholder="%s">
</td>
</tr>
<tr>
<td> Password </td>
<td>
<input type="String" name="UserPass" placeholder="%s">
</td>
</tr>
</table>
<input type="submit" value="Update Admin Details">
</form>
and the following to the script section
function admin(){
document.getElementById("wifiForm").style.display="none";
document.getElementById("tagForm").style.display="none";
document.getElementById("adminForm").style.display="block";
}
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
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>
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.
Can any one tell me whats wrong with the following code..
managerhomepage.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<frameset row="20%,80%">
<frame src="managerhomepage.jsp">
<frame src="signup.html">
</frameset>
</body>
</html>
managerhomepage.jsp
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!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>ManagerHomePage</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<% String[] name={"Raviteja","Pramod","Aadinarayana","Anusha","Ramireddy","Surendhra","Rajesh","Aruna"};%>
<center>
<div id="border"><div id="header">
<div id="logo-bg">
<div class="name">Ayansys</div>
<div class="tag">COMPANY SLOGAN</div>
</div>
</div>
<h1>MANAGER'S HOME PAGE</h1>
Select a SalesPerson from here <select name="salespersons">
<option></option>
<% for(int i=0;i<name.length;i++){
%><option><%=name[i]%></option><%
}%>
</select>
<input type="button" value="OK"/>
</center>
</body>
</html>
signup.html
<html>
<head>
<title>SIGNUP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="ts_picker.js">
</script>
</head>
<body>
<center>
<div id="border"><div id="header">
<div id="logo-bg">
<div class="name">Ayansys</div>
<div class="tag">COMPANY SLOGAN</div>
</div>
</div>
<div>
<h1>SIGNUP FORM</h1>
<form action="managerhomepage.html">
<table>
<tr><td>FIRST NAME</td><td><input type="text" name="fname" size="50"/></td></tr>
<tr><td>LAST NAME</td><td><input type="text" name="sname" size="50"/></td></tr>
<tr><td>DESIRED LOGIN NAME</td><td><input type="text" name="login" size="50"/></td></tr>
<tr><td>PASSWORD</td><td><input type="password" name="pwd" size="50"/></td></tr>
<tr><td>RE-TYPE PASSWORD</td><td><input type="password" name="repwd" size="50"/></td></tr>
<tr><td>GENDER</td><td><input type="radio" name="gender" value="Male"/>Male<input type="radio" name="gender" value="FeMale"/>Female</td></tr>
<tr><td>DATE OF BIRTH</td><td><form name="tstest">
<input type="text" readonly size="47" name="timestamp" value="">
<img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp">
</form></td></tr>
<tr><td>MAIL ID</td><td><input type="text" name="mail1" size="30">#<input type="text" name="mail2" size="11"></td></tr>
<tr><td>EMPLOYEE ID</td><td><input type="text" name="eid" size="50"></td></tr>
<tr><td>TYPE OF USER</td><td><input type="radio" name="manager"/>Manager<input type="radio" name="seniormanager"/>SeniorManager</td></td></tr>
<tr><td>ADDRESS</td><td><textarea rows="9" cols="40"></textarea></td></tr>
<tr><td>MOBILE NUMBER</td><td><input type="text" size="50" name="mobile"></td></tr>
<tr><td></td><td><input type="SUBMIT" name="submit" value="SUBMIT"> <input type="button" name="cancel" value="CANCEL"/></td></tr>
</table>
</div>
</form>
</br><div>Designed by:STUDY CENTER</div>
</div>
</center>
</body>
frameset is used instead of body, not inside it.
The attribute is rows, not row.
Validating would have told you this.
A frameset is used to establish a BODY, and should not be used inside of one.
Plus: You don't have a BASE target="" in your framed pages head(s).
And DIVS can be used to establish what you are trying to acheive, but referencing them can become complex quickly.
Also, naming your frames makes them much easier to deal with, and I see you've left their name references out of their declarations. There was alot of frameset debate when it was standardized, and if you are a professional author, I would suggest reading some of that information so you can see the advantages and disadvantages of framesets.
Now, with that being said, I would offer this suggestion:
IFRAME might work for you in this case, but because of the resourses and load times, esp. with building data tables, I would suggest another approach.