How to identify buttons created using a loop. Please assist - html

Following is the code, where the button Generate Key is getting created dynamically. For each record I get from the table, I create a button against it on the page. I want to capture which button was clicked and then use the values in that row to manipulate something.
<table border="1" width="100%" cellpadding="0" cellspacing="0">
<tr>
<th>File ID</th>
<th>Generate Key</th>
</tr>
<%
Connection con = DbConnector.getConnection();
PreparedStatement pstm = null;
String sql = "select u.uniquserid, t.filename, t.status, t.cloud, t.date_, t.report, t.FileID from transaction t join user u on u.userid = t.user order by t.date_ desc;";
pstm = con.prepareStatement(sql);
ResultSet rs = pstm.executeQuery();
while (rs.next()) { %>
<tr>
<td><%=rs.getString(7)%></td>
<% if (rs.getString(3).contains("s")) {%>
<%request.getSession().setAttribute("PassFID", rs.getString(7));%>
<td><input type="button" value='Generate Key' onclick=""></input></td>
<%} else {%>
<td></td>
<%}%>
</tr>
<%}%>
</table>

Use jquery to do your task.
Change your html code to these lines of code.
<form method="post" action="#" name="Form" id="Form" >
<input type="button" value="one" id="One"/>
<input type="button" value="two" id="Two"/>
</form>
And add these lines in your script
$('input:button').click(function() {
alert($(this).val());
var value=$(this).val();
var url='hello?good=';
url+=value;
$("#Form").attr("action",url);
$("#Form").submit();
});
You can use jquery 1.7.1 and above. Hope this helps you. Happy Coding :)

Related

Issue with button in a Html/Css table and Mysql

I have a small problem. Right now I'm programming a website, which is connected to a mysql database.
I created a table filled with products, which are stored in the database. Each row has a Button "Add to Cart" but how do I exactly get the specific item for it? I already have the function addtoCart(string articleName) but I don't know how to get the name of the product.
This is what I've got so far:
<table id="Products">
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Stock</th>
</tr>
<%
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/shop", "root", "12345");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("SELECT* FROM products WHERE category='shisha'");
while(rs.next()){
int id = rs.getInt("articleID");
String pname = rs.getString("productName");
String description= rs.getString("description");
float price = rs.getFloat("price");
int stock = rs.getInt("stock");
%>
<tr>
<td><%out.print(id);%></td>
<td><%out.print(pname);%></td>
<td><%out.print(description);%></td>
<td><%out.print(price);%></td>
<td><%out.print(stock);%></td>
<td> </td>
<td><input type="text" placeholder="How much ?" name="quantity" required> </td>
<td> <input class="button" type = "submit" value="Add to cart"> </td>
</tr>
<%
}
%>
</table>
So it generates a row for each product with its own button.... I want to call the function addtoCart(string articleName) but how do I get the product name of the row the button is in?
Using Jquery you could add a class and data attribute to your button, you could then get the value like so.
<input class="button" data-product="<%out.print(pname);%>" type = "submit" value="Add to cart">
$('.button').click(function(){
var product = $(this).data("product");
addtoCart(product);
});
I hope this helps.
Thanks
add it to the button. Instead of making the button a submit button, create a
<button onclick="addToCart(%out.print(id);%);">Add to cart</button>
then get the product information in a function called addToCart

get column data and insert into a row with id given in another column - sql nodejs

I have made a certain form with a table layout
the table is kind of like this below:
UAN NAME DESIGNATION No. of Days Present
87982 JOHN SALESMAN 25
now, the columns uan name and designation are already given (taken from the database) and the user only needs to put in the attendance.
the number of days will then be inserted into the database
in the row where UAN = 87892
The problem is that I am unable to figure out how to get the value of UAN from the page and use it to enter the number of days in the database.
could you give some idea how to accomplish this using nodejs??
I am using the ejs templating system and mysql database.
that's not the only problem.
I also want to enter the number of days present for all the different employees
where the number of days gets added to the row with their UAN number.
how am I supposed to do that?
any ideas??
here's the code for the attendance page
<!DOCTYPE HTML>
<html>
<head><title>attendance for employees</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<table>
<tr>
<th>Serial No.</th>
<th>UAN</th>
<th>Name</th>
<th>Designation</th>
<th>Attendance</th>
</tr>
<form action="/attendance-data" method="post">
<% var i=0 %>
<% rows.forEach(function(item){ %>
<% i=i+1 %>
<tr>
<td><%= i+"." %></td>
<td id="uan<%= i %>"> <%= item.uan %> </td>
<td><%= item.name %></td>
<td><%= item.designation %></td>
<td><input type="text" name="attendance <%= i %>" ></td>
</tr>
<% }); %>
</form>
</table>
</div>
<div>
<input type="button" value="submit" />
</div>
</body>
</html>
In order to get the data from the page and insert it into your database:
WHERE uan = '[data_from_html]', you will need to reference it by name. This can be accomplished when the user enters into the form how many days of attendance. The biggest issue you will have is that forms are tough to get working in correspondence to a table. You can put an entire table inside of a form but not the other way around necessarily.
Inside of your last td tag it would be best to place the entire form there with only one field visible and the rest hidden(you can still display as you were, just leave the other fields out of the form:
<td>
<form action='/attendance-data' method='post'>
<input type='hidden' id='uan<%= i %>' name='attendance' value ='<%= i %>'/>
<input type='hidden' name='item_name' value ='<%= i %>'/>
<input type='hidden' name='designation' value ='<%= item.designation %>'/>
<input type='text' name='attendance' value ='<%= i %>'/>
<input type="submit" value="Submit" />
</form>
</td>
Then inside of your routes in express:
app.post('/attendance-data', function(req, res) {
var uan = req.body.uan
var item_name = req.body.item_name
var designation = req.body.designation
var attendance = req.body.attendance
// Make sure they all contain some sort of value
var connString = new ConnectionString(
config.mysql.host,
config.mysql.port,
config.mysql.username,
config.mysql.password,
config.mysql.default_db
)
var MySqlConn = new MySqlConnection(connString)
// Proceed to do an update/insert into your db
MySqlConn.Connection.query("insert into [your_table] " +
"values(uan, item_name, designation, attendance) where uan='" + uan + "'",
function (err)
{
if (err)
{
console.log(err.stack)
throw err
}
// Otherwise success
res.status(200).send('blah')
})
}

Retrieve values from jsp table

I'm new to jsp and I'm trying to present the results of my database to a table in my jsp page. This looks like it works well as it presents all the elements correctly ! The problem is that I also want to to have a separate button and when I'm clicking it , I want the satatus of the line the button belongs to , to be converted from "unconfirmed" to "confirmed", but when I'm pressing it all the records turned to "confirmed" and not only the one the button belongs to !
My jsp code:
<table border="1">
<tr>
<th>Username</th>
<th>Role</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Phone</th>
<th>Status</th>
</tr>
<%
while(rs.next()){%>
<td> <%=rs.getString("username") %></td>
<td> <%=rs.getString("role") %></td>
<td> <%=rs.getString("firstname") %></td>
<td> <%=rs.getString("lastname") %></td>
<td> <%=rs.getString("email") %></td>
<td> <%=rs.getString("phone") %></td>
<td> <%=rs.getString("status") %></td>
<% if(rs.getString("status").equals("unconfirmed")){%>
<td><input type="button" name="users" onclick="<%Bean.changeStatus(rs.getString("username"));%>"</td>
<% }
else{ %>
<td>Check</td>
<% } %>
</tr>
<% } %>
</table>
And .java code:
public void changeStatus(String us){
ResultSet rs = null;
Statement state = null;
String query = null;
try{
state=this.getConn().createStatement();
query="update users set status='confirmed' where username='"+us+"'";
int rowsEffected = state.executeUpdate(query);
}catch(SQLException e){
}
}
Put a single listener on the table. When it gets a click from an input with a button that has a name of "unconfirmed" and value "unconfirmed", change its value to "confirmed". Get rid of the input's id (they aren't used for anything here), or make them all unique.
<script type="text/javascript">
function handleClick(evt) {
var node = evt.target || evt.srcElement;
if (node.name == 'unconfirmed') {
node.value = "confirmed";
}
}
</script>
<table id="table1" border="1" onclick="handleClick(event);">
<thead>
<tr>
<th>Select
</thead>
<tbody>
<tr>
<td>
<form name="f1" action="#" >
<input id="UnConfirmed1" type="submit" name="unconfirmed" value="UnConfirmed">
</form>
<tr>
<td>
<form name="f2" action="#" >
<input id="UnConfirmed2" type="submit" name="unconfirmed" value="UnConfirmed">
</form>
<tr>
<td>
<form name="f3" action="#" >
<input id="UnConfirmed3" type="submit" name="unconfirmed" value="onfirmed">
</form>
</tbody>
</table>

Two Buttons with two onclick events are not working

I want to have Edit and Delete button to delete DB records in one HTML page with JSP. I tried the below code. But only the first button is working ( Whichever I put on the top) and the second one is not working. Could any one help..?
<%# page import="java.sql.*" %>
<html>
<head>
<script language="javascript">
function edit(regno){
var f=document.form;
f.method="post";
f.action='edit.jsp?regno='+regno;
f.submit();
}
function delete(regno){
var f=document.form;
f.method="post";
f.action='delete.jsp?regno='+regno;
f.submit();
}
</script>
</head>
<body>
<form method="post" name="form">
<table border="1">
<tr><th>Name</th><th>Address</th><th>Edit</th><th>Delete</th></tr>
<%
Connection conn = null;
int sumcount=0;
Statement st;
try{
Class.forName ("sun.jdbc.odbc.JdbcOdbcDriver");
conn = DriverManager.getConnection("jdbc:odbc:mydb1");
String query = "select * from student";
st = conn.createStatement();
ResultSet rs = st.executeQuery(query);
%>
<%
while(rs.next()){
%>
<tr>
<td><%=rs.getString(2)%></td>
<td><%=rs.getString(3)%></td>
<td><input type="button" name="delete" value="Delete"
onclick="delete(<%=rs.getString(1)%>);"> </td>
<td><input type="button" name="edit" value="Edit"
onclick="edit(<%=rs.getString(1)%>);"> </td>
</tr>
<%
}
%>
<%
}
catch(Exception e){
e.printStackTrace();
}
%>
</table>
</form>
</body>
</html>
Demo: http://jsfiddle.net/6mGzj/
Below example works fine, you can check in console where form is sended after button is clicked.
<form method='post' id='form'>
<table>
<tr>
<td><input type='button' data-action='delete' data-regno='2' value='delete' /></td>
<td><input type='button' data-action='edit' data-regno='3' value='edit' /></td>
</tr>
</table>
</form>
var form = document.getElementById('form');
form.addEventListener('click', function(e) {
var type = e.target.getAttribute('data-action'),
regno = e.target.getAttribute('data-regno');
//console.log(type+'.jsp?regno='+regno);
form.action = type+'.jsp?regno='+regno;
form.submit();
}, false);
There is something wrong with values passed via onclick function in your code. You need to change it from
onclick="delete(<%=rs.getString(1)%>);"
to
onclick="delete('<%=rs.getString(1)%>');"
And check this regno in your javascript function by using either alert(regno); or console.log(regno);
And one more suggestion. You are using scriptlets in your jsp code. Its highly discouraged. you need to start learning JSTL and EL avoid using scriptlets. Hope this helps..

Insert of elements in a form using ASP and save into a DB

I create this richiesta.html:
<HTML>
<BODY>
<table border> //create a simple table
<tr>
<td>
<form ACTION="richiesta.asp"> //open the file richiesta.asp
<table> //start a table format
<tr><td><input name="cognome" size="20"/></tr> //contain a input text
</table>
</form>
</td>
</tr>
<td><input type="submit" value="Invia"></td><td> // contein a button to send value to DB
</table>
</BODY>
</HTML>
I create richiesta.asp:
<HTML>
<BODY>
<%
cognome = Request.Form("cognome")
%>
<%
Session.timeout = 1 //Check the session
If IsObject(Session("iscrizioni")) Then
Set conn = Session("iscrizioni")
Else
Set conn = Server.CreateObject("ADODB.Connection") //Check the connection
conn.open "iscrizioni"
Set Session("iscrizioni") = conn
End If
%>
<%
If Stato = "" Then
SQL="INSERT INTO iscrizioni (Cognome) VALUES ("SQL=SQL & "'" & cognome & "', "SQL=SQL ")
response.write(SQL) //
conn.execute(SQL) // Insert value
conn.close //Close the connection
%>
//
// End Page
I want to insert in the BD Anagrafica, table Anagrafica the name of a student.
DB structure:
HTML Form action should be a valid (relative/absolute) url and not a physical location.
Also the input control and submit button should be inside form for default form submit.
Please change your <form> tags action attribute
<form action="riciesta.asp" >
<table>
<tr><td><input name="cognome" size="20"/></td></tr>
<tr><td><input type="submit" value="submit"/></td></tr>
</table>
</form>