We Keep Coding

how to pass table row Data from jsp to servlet on click function

/*Script Function */
i want to store table data value in script variable and it will send data in servlet
<script>
$(document).ready(function () {
$('#edit').click(function () {
var id=$(this).attr('#id');
var studentName= $(this).attr('#id');
var age= $('#age').val();
$.ajax({
type:'POST',
data:{
id: id,
studentName:studentName,
age:age
},
url:'EditStudent'
});
});
});
</script>
this is showing data from servlet and further i want to send table data in script variable
<c:forEach items="${studentList}" var="student">
<tr>
<td id="id" ><c:out value="${student.roll_no}"/></td>
<td contenteditable="true" id="studentName" ><c:out value="${student.studentName}"/></td>
<td contenteditable="true" id="age"><c:out value="${student.age}"/></td>
<td> Delete</td>
<%--<td>Edit--%>
<td><input type="button" id="edit" value="edit">
</td>
</tr>
</c:forEach>

the id in <input type="button" id="edit" value="edit"> need to be unique , here since you are using c:forEach it will create multiple rows where the id will be same.
Instead of id use class . Sa,e need to be there for other tds also.
<c:forEach items="${studentList}" var="student">
<tr>
<td class="id" ><c:out value="${student.roll_no}"/></td>
<td contenteditable="true" class="studentName" ><c:out value="${student.studentName}"/></td>
<td contenteditable="true" class="age"><c:out value="${student.age}"/></td>
<td> Delete</td>
<%--<td>Edit--%>
<td><input type="button" class="edit" value="edit">
</td>
</tr>
</c:forEach>
In js
$(document).ready(function () {
$('.edit').click(function () {
var id=$(this).closest('.id');
var studentName= $(this).closest('.studentName');
var age= $(this).closest('.age');;
$.ajax({
type:'POST',
data:{
id: id,
studentName:studentName,
age:age
},
url:'EditStudent'
});
});
});

using the class not Id
<c:forEach items="${studentList}" var="student">
<tr class="tr">
<td class="id" id="id" ><c:out value="${student.roll_no}"/></td>
<td contenteditable="true" class="studentName" ><c:out value="${student.studentName}"/></td>
<td contenteditable="true" class="age"><c:out value="${student.age}"/></td>
<td> Delete</td>
<td> <input type="button" id="edit" class="edit" value="edit"> </td>
</tr>
</c:forEach>
<script>
$(document).ready(function () {
$('.edit').click(function () {
var id = $(this).closest(".tr").find('.id').text();
var studentName = $(this).closest(".tr").find(".studentName").text();
var age = $(this).closest(".tr").find(".age").text();
$.post("EditStudent", {
id: id,
studentName: studentName,
age: age
});
});
});
</script>

Javascript validation : compare string in dropdown list with other column in a table

I would like to make a validation form before submitting a form. In my case my data is in a table like this:
<form name ="myForm" onsubmit="return validateForm()" action="generateSchedule" class="sky-form">
<header><br><center>Generate Schedule</center></header>
<center>
<fieldset>
<section>
<label class="select">
<% //Connection to db
String query="select s.studentID, s.studentName,s.projecttitle,s.lecturerID, l.lecturerID, l.lecturerFullname from student s JOIN lecturer l ON s.lecturerID = l.lecturerID where ROWNUM<=30";
ResultSet rs=stmt.executeQuery(query);
int i=1;
%>
<table id="t01">
<tr>
<th>No.</th>
<th>Student name</th>
<th>Project title</th>
<th>Supervisor name</th>
<th>Examiner </th>
</tr>
<% while(rs.next()){ %>
<tr>
<td><%= i++ %>.</td>
<td>
<input type="hidden" name="studentID" style="" value=<%=rs.getString("studentID") %>">
<%=rs.getString("studentName") %>
</td>
<td><%= rs.getString("projectTitle") %></td>
<td>
<input id="supervisor" type="hidden" name="supervisorID" style="" value="<%=rs.getString("lecturerID") %>"> <%=rs.getString("lecturerFullname")%>
</td>
<td>
<select id="examinerID" name="examinerID" onchange="checkLecturer()">
<option selected disabled>Examiners Name</option>
<%
try{ //Connection to db again
String query1="select lecturerID, lecturerFullname from lecturer ";
ResultSet rs1=stmt1.executeQuery(query1);
while(rs1.next())
{ %>
<option value="<%=rs1.getString("lecturerID") %>"> <%=rs1.getString("lecturerFullname") %></option>
<% }
//closing connection }
catch (Throwable theException) {
//exception statement } %></select>
</td></tr>
<% }
//close connection again }
catch (Throwable lln) {
//catch statement}
%>
</table>
<button type="submit" name="submit" class="button"> Generate schedule</button><br><br>
</center>
</label>
</section>
</fieldset></center>
I am sorry the codes are long and messy because I am still new at this. I am aware it is not good to combine JAVA in JSP.
Based on above codes, the column student name, project title and supervisor name comes from the first query. Then in examiner column, there will be drop down menu dynamically generated using second query.
This is how it looks like. Sorry I had to blur out the data:
The Javascript:
<script>
function validateForm() {
return checkLecturer();
}
function checkLecturer() {
var ex = document.forms["myForm"]["examiner"].value;
var sv = document.forms["myForm"]["supervisor"].value;
if (sv === ex) {
document.getElementById("examiner").className = 'error';
return false;
}
else {
document.getElementById("examiner").className = '';
return true;
}
}
</script>
CSS:
<style>
.error {
border:1px solid red;
}
</style>
I want the form dropdown list for examinerID turns red if the user choose same value of supervisorID. I am wondering why my codes is not working..
UPDATE 16 MAY 2016
I am copying the same exact code as you what you did... It worked perfectly...
#Ansari answer still getting blue border

There were lot of things which is erroneous in your case, which are as below:
select elements option tag does not have id and onkeyup attributes/events. They can have only below 4 attributes and few global events as attributes:
You cannot have same ids for different elements. id has to be unique per page. In your case you had it in option tags.
CSS styles works for option tag only on few browsers. So if you want to achieve it completely you can use select jquery plugins which are numerously present in google when you search, which will have plenty of options/features to set. Otherwise you have to include any element to display your error messages.
You need to get the selected value from select element which will not work with document.forms["myForm"]["examiner"].value;, because of above reasons.
You haven't closed your <table> element. Not sure if this is the copy paste issue.
Below is the solution that I would suggest according to your requirements, few modified..
function validateForm() {
return checkLecturer();
}
function checkLecturer() {
var e = document.getElementById("examinerID");
var ex = e.options[e.selectedIndex].value;
var sv = document.forms["myForm"]["supervisor"].value;
if (sv === ex) {
document.getElementById("examiner").className = 'error';
document.getElementById("examiner").style.display = 'block';
return false;
} else {
document.getElementById("examiner").style.display = 'none';
document.getElementById("examiner").className = '';
return true;
}
}
.error {
color: red;
}
<form name="myForm" onsubmit="return validateForm()" action="generateSchedule" class="sky-form">
<table id="t01">
<tr>
<th>No.</th>
<th>Student name</th>
<th>Project title</th>
<th>Supervisor name</th>
<th>Examiner</th>
</tr>
<tr>
<td>1.</td>
<td>abc</td>
<td>def</td>
<td>
<input id="supervisor" type="hidden" name="supervisorID" value="Kent" />
</td>
<td>
<select id="examinerID" id="lecturerFullname" onchange="checkLecturer()">
<option value="Suzy">Suzy</option>
<option value="Kent">Kent</option>
<option value="John">John</option>
</select>
</td>
</tr>
</table>
<button name="submit" class="button">SUBMIT</button>
<div id="examiner" style="display:none">
Both are same
</div>
</form>
Here is the external fiddle solution

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Test
</title>
<style>
.error {
border: 1px solid red;
}
</style>
<script type="text/javascript">
function validateForm() {
return checkLecturer();
}
function checkLecturer() {
var e = document.getElementById("examinerID");
var ex = e.options[e.selectedIndex].innerHTML;
var sv = document.forms["myForm"]["supervisorID"].value;
if (sv === ex) {
document.getElementById('ddldiv').className = "error";
alert("you can\'t select " + ex);
return false;
}
else {
document.getElementById('ddldiv').className = "";
return true;
}
}
window.onload = function () {
document.getElementById('examinerID').onchange = function () {
checkLecturer();
};
};
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm();" action="generateSchedule" class="sky-form">
<table id="t01">
<tr>
<th>No.</th>
<th>Student name</th>
<th>Project title</th>
<th>Supervisor name</th>
<th>Examiner </th>
</tr>
<tr>
<td>1.</td>
<td>abc</td>
<td>def</td>
<td>
<input id="supervisor" type="hidden" name="supervisorID" value="Kent" />
</td>
<td>
<div id="ddldiv" style="width: 150px; height: 22px;">
<select name="examinerID" id="lecturerFullname" style="width: 150px; height: 30px;">
<option id="examiner" onkeyup="checkLecturer()">Suzy</option>
<option id="examiner" onkeyup="checkLecturer()">Kent</option>
<option id="examiner" onkeyup="checkLecturer()">John</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" class="button" value="Submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
use this e.options[e.selectedIndex].innerHTML in place of e.options[e.selectedIndex].value as value is null or not defined.
so try this script:-
<script type="text/javascript">
function validateForm() {
return checkLecturer();
}
function checkLecturer() {
var e = document.getElementById("examinerID");
var ex = e.options[e.selectedIndex].innerHTML;
var sv = document.forms["myForm"]["supervisorID"].value;
if (sv === ex) {
document.getElementById('ddldiv').className = "error";
alert("you can\'t select " + ex);
return false;
}
else {
document.getElementById('ddldiv').className = "";
return true;
}
}
window.onload = function () {
document.getElementById('examinerID').onchange = function () {
checkLecturer();
};
};
</script>
and use this HTML
<form name="myForm" onsubmit="return validateForm()" action="generateSchedule" class="sky-form">
<table id="t01">
<tr>
<th>No.</th>
<th>Student name</th>
<th>Project title</th>
<th>Supervisor name</th>
<th>Examiner </th>
</tr>
<tr>
<td>1.</td>
<td>abc</td>
<td>def</td>
<td>
<input id="supervisor" type="hidden" name="supervisorID" value="Kent" /></td>
<td>
<div id="ddldiv" style="width:150px;height:22px;">
<select name="examinerID" id="lecturerFullname" style="width:150px;height:30px;">
<option id="examiner" onkeyup="checkLecturer()">Suzy</option>
<option id="examiner" onkeyup="checkLecturer()">Kent</option>
<option id="examiner" onkeyup="checkLecturer()">John</option>
</select>
</div>
</td>
</tr>
<button type="submit" name="submit" class="button">SUBMIT </button>
</table>
</form>
Hope this will help.

How to append json values to html[value]

I have Json like this. How to append the json values into html input values.
[{"user_id":"180",
"firstname":"anandhsp",
"lastname":"sp",
"email":"xyz#gmail.com",
"mobile":"9000000000",
"gender":null,
"hashcode":"2XXg3dfyuxjO9C4OvaWw",
"username":"anandhsp21",
"password":"64c20f8bb630eb5cb329fdd609c807b7:J6",
"emailverify":"TRUE",
"company_name":"xxx",
"address":"Chennai",
"city":"Chennai",
"state":"Tamilnadu",
"pincode":"637001",
"phone":"1234567890",
"website":"hello",
"nature":"hello",
"no_employe":"23",
"year":"2015",
"type":"Proprietor",
"authorized_person":"Anandh Sp",
"status":"",
"created":"2015-06-26 10:48:09",
"modified":"2015-06-11 11:24:39",
"logdate":"2015-06-26 05:18:09",
"lognum":"3",
"reload_acl_flag":"0",
"is_active":"1",
"extra":"N;",
"rp_token":null,
"rp_token_created_at":null,
"app_name":"",
"api_key":""}]
Html code
<div id="register_form" class="fieldset subgroupregister_form">
<div class="hor-scroll">
<table class="form-list" cellspacing="0">
<tbody>
<tr class="tr_tag">
<tr class="tr_application_id">
<tr class="tr_customer_id">
<tr class="tr_company_name">
<tr class="tr_address">
<td class="label">
<td class="value">
<input id="address" class=" input-text required-entry" type="text" value="" name="address">
</td>
</tr>
<tr class="tr_city">
<tr class="tr_state">
<tr class="tr_pincode">
<tr class="tr_mobile">
<tr class="tr_phone">
<tr class="tr_website">
<tr class="tr_nature">
<tr class="tr_no_employe">
<tr class="tr_year">
<tr class="tr_type">
<tr class="tr_authorized_person">
<tr class="tr_status">
</tbody>
</table>
</div>
</div>
</div>
I need to append the above values into input value
For example
<input id="address" class=" input-text required-entry" type="text" value="chennai" name="address">
I tried these Codes.But I did't got output.
jQuery('.ac_results ul li').bind('click',function(e)
{
var text = $(this).text();
jQuery.ajax({
type: 'get',
url: BASE_URL + 'admin/index/user_id',
data: {email: text},
dataType:'json',
success: function (data) {
var data = data[0];
$('#address').value = data.address;
$('#city').value = data.city;
$('#state').value = data.state;
$('#pincode').value = data.pincode;
$('#mobile').value = data.mobile;
$('#phone').value = data.phone;
$('#website').value = data.website;
$('#email').value = data.email;
$('#nature').value = data.nature;
$('#year').value = data.year;
$('#no_employe').value = data.no_employe;
$('#type').value = data.type;
$('#authorized_person').value = data.authorized_person;
}
});
});
Thanks In advance

Try val() function:
$('input').val(obj.item);
Check the following example
var obj = { test: 'test' }
$('#add').on('click', function() {
$('#inp').val(obj.test);
});
$('#res').on('click', function() {
alert($('#inp').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="inp" type="hidden" />
<button id="add">Add value</button>
<button id="res">Show input</button>

Tried Every Thing But Still Getting OBJECT NOT FOUND error in Xamp when i hit submit button?

I was following some tutorials about ecommerce site in PHP and MySQL.
But when i hit submit button I get OBJECT NOT FOUND ERROR.
Below is the code,please guide me. Directories etc. are fine. I've also tried enclosing the button in seprate form tag but nothing worked.
<?php
include("includes/db.php");
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Add Products</title>
</head>
<body bgcolor="#3B6AD8">
<form method="post" action="insert_product" enctype="multipart/form-data">
<table width="700" height="650" align="center" border="2" bgcolor="#F3F3F3">
<tr>
<td colspan="2">
<h2 align="center">Insert Product Here</h2>
</td>
</tr>
<tr>
<td><b>Product Title</b></td>
<td><input type="text" name="product_title" /></td>
</tr>
<tr>
<td><b>Product Category</b></td>
<td>
<select name="product_cat">
<option>Select a Category</option>
<?php
$get_categories = "SELECT * FROM categories";
$run_categories = mysqli_query($con,$get_categories);
while($row_categories =mysqli_fetch_array($run_categories) ) {
$cat_id = $row_categories['cat_ID'];
$cat_title = $row_categories ['cat_title'];
echo "<option value='$cat_id'>$cat_title</option>";
}
?>
</td>
</select>
<tr>
<td><b>Product Brand</b></td>
<td><select name="product_brand">
<option>Select a Category</option>
<?php
$get_brands = "SELECT * FROM brands";
$run_brands = mysqli_query($con,$get_brands);
while($row_brands =mysqli_fetch_array($run_brands) ) {
$brand_id = $row_brands['brand_ID'];
$brand_title = $row_brands['brand_title'];
echo "<option value='$brand_id'>$brand_title</option>";
}
?>
</td>
</select>
</td>
</tr>
<tr>
<td><b>Product Image 1</b></td>
<td>
<input type="file" name="product_img1" />
</td>
</tr>
<tr>
<td><b>Product Image 2</b></td>
<td>
<input type="file" name="product_img2" />
</td>
</tr>
<tr>
<td><b>Product Image 3</b></td>
<td>
<input type="file" name="product_img3" />
</td>
</tr>
<tr>
<td><b>Product Price</b></td>
<td>
<input type="text" name="product_price" />
</td>
</tr>
<tr>
<td><b>Product Description</b></td>
<td>
<textarea name="product_desc" cols="30" rows="5"></textarea>
</td>
</tr>
<tr>
<td>Product Keywords</td>
<td>
<input type="text" name="product_keywords" />
</td>
</tr>
<tr align="center">
<td colspan="2">
<form method="post">
<input type="submit" name="add_product" value="Add Product"/>
</form>
</td>
</tr>
</table>
</form>
</body>
</html>
<?php
if(isset($_POST['add_product'])){
//text data variables
$product_title = $_POST['product_title'];
$product_cat = $_POST['product_cat'];
$product_brand = $_POST['product_brand'];
$product_price = $_POST['product_price'];
$product_desc = $_POST['product_desc'];
$product_keywords = $_POST['product_keywords'];
$product_status = 'on';
//Produt Images
$product_img1 = $_FILES['product_img1']['name'];
$product_img2 = $_FILES['product_img2']['name'];
$product_img3 = $_FILES['product_img3']['name'];
//Image Temp Names
$temp_name1 = $_FILES['product_img1']['tmp_name'];
$temp_name2 = $_FILES['product_img2']['tmp_name'];
$temp_name3 = $_FILES['product_img3']['tmp_name'];
if($product_title=="" OR $product_cat=="" OR $product_brand=="" OR $product_price=="" OR $product_desc=="" OR $product_keywords=="" OR $product_img1==""){
echo "<script>alert('Please Fill All The Fields')</script>";
exit();
}
else {
move_uploaded_file($temp_name1,"product_images/product_img1");
move_uploaded_file($temp_name2,"product_images/product_img2");
move_uploaded_file($temp_name3,"product_images/product_img3");
$insert_product_query = "INSERT INTO products(category_ID,brand_ID,date,product_title,product_img1,
product_img2,product_img3,product_price,product_desc,product_status)
values ('$product_cat','$brand_id',
NOW,'$product_title','$product_img1','$product_img2','$product_img3','$product_price','$product_desc',
'$product_status')";
$run_products = mysqli_query($con,$insert_product_query);
if ($run_products){
/*echo "<script>alert('Product inserted successfully')</script>";*/
}
}
}
?>

try to put an extension to your form action="insert_product" ... like .php or .asp .. Also, reform your title to something more like "Object not found on form submit."
Try this:
<form method="post" enctype="multipart/form-data">

Ther are two problems:-
The problem is you write form contains only submit button.Try to remove <form method="post">before button
You write all your code in same page but in form your action is insert_product which have no extension like .php.It's totally wrong
so try to do any one of these two.
a) either define it action= insert_product.php and make a file with that name and put your last form processing code in that file.
b) Or remove form action attribute and write like <form method="post" enctype="multipart/form-data">.
Try 1 point and 2 nd b) point at-once. And check once.

Ajax output html comment

I have a simple ajax call but doesen't work perfectly!
index.php (situated in / )
<?php
require 'files/config.php';
require 'files/functions.php';
include 'files/variabili.php';
?>
<script>
$(document).ready(function() {
$('#cerca-amico').on('keyup', function(e) {
if (e.which === 13) {
e.preventDefault();
$('#cerca_amico').trigger('click');
}
var dati = $("#form-cerca-amico").serialize();
$.ajax({
type: "POST",
url: "inc/friends.php",
data: dati,
dataType: "html",
success: function(msg){ $("#ShowFriends").html(msg); },
error: function(){ alert("Ricerca fallita, riprovare..."); }
});
});
});
</script>
<?php
include "inc/testpage.php";
?>
testpage.php (situated in /inc/)
<table width="100%">
<tr>
<td rowspan="2" width="150" align="center" valign="top">
<?
$q="SELECT * FROM amico WHERE (user1='$_SESSION[valid_user]' OR user2='$_SESSION[valid_user]') AND accetta='s'";
$q_r=mysql_query($q);
$num=mysql_num_rows($q_r);
if($num<1)
echo "Non hai amici.";
else{
?>
<form id="form-cerca-amico" onSubmit="return false;">
<input name="cerca-amico" type="text" placeholder="Cerca amici..." id="cerca-amico" autocomplete="off">
<br><br>
<input type="hidden" id="cerca_amico" value="Cerca">
</form>
<div id="ShowFriends"></div>
<?
}
?>
</td>
<td height="400" align="center" valign="top">
chat
</td>
</tr>
<tr>
<td align="center">
<form method="POST">
<textarea id="ChatField"></textarea><input type="submit" value="Invia" id="ChatInput">
</form>
</td>
</tr>
</table>
and friends.php (situated in /inc/)
<?
require 'files/config.php';
require 'files/functions.php';
include 'files/variabili.php';
$nome=urldecode($_POST['cerca-amico']);
echo $nome;
?>
When I write " hello " on the input " look - friend " I should receive as output in the div # ShowFriends . But I never get results , I noticed that viewing the source code I get all the content of the page friends.php between comments .
Specifically :
<div id="ShowFriends">
<!--?
require 'files/config.php';
require 'files/functions.php';
include 'files/variabili.php';
$nome=urldecode($_POST['cerca-amico']);
echo $nome;
?-->
</div>
Any solutions? I have no idea...

<div id="ShowFriends">
<?php
require 'files/config.php';
require 'files/functions.php';
include 'files/variabili.php';
$nome=urldecode($_POST['cerca-amico']);
echo $nome;
?>
</div>