addition.jsp
<form action="addition.jsp">
First Number
<input type="text" name="fno">
<br>
<br>Second Number
<input type="text" name="sno">
<br>
<br>Result
<input type="text" value="<%=Integer.parseInt(request.getParameter(" fno "))+Integer.parseInt(request.getParameter("sno ")) %>">
<br>
<br>
<input type="submit" value="ADD">
</form>
I want to display result in thrid textbox named Result on click of submit button.. i tried this code but getting error ..is there something am i missing..kindly help?
request.getParameter(" fno ") is string not a number therefore it will be a wrong format.
<%
String integer = request.getParameter("fno");
String integer1 = request.getParameter("sno");
int x = integer != null ? Integer.parseInt(integer) : 0;
int y = integer1 != null ? Integer.parseInt(integer1) : 0;
int z=x+y;
%>
<input type="text" name="integer" value="<%=z%>"/>
It can be achieved by simple java script as follow:
<html>
<body>
<form action="addition.jsp">
First Number
<input type="text" name="fno" id="fno"/>
<br>
<br>Second Number
<input type="text" name="sno" id="sno"/>
<br>
<br>Result
<input type="text" id="result"/>
<br>
<br>
<input type="button" value="ADD" onClick="setAddition();"/>
</form>
<script>
function setAddition()
{
var fno=document.getElementById("fno").value;
var sno=document.getElementById("sno").value;
document.getElementById("result").value=parseInt(fno)+parseInt(sno);
}
</script>
</body>
</html>
Related
I am trying to make a basic shop-billing JSP project. now when i type random product quantity with checkbox it giving error like below image. but when i checked-value with serial wise, it is not giving the error, it giving me the result what i desiring. I have also check it is empty or not. but can't able to get out of this error. how can i get rid out of it?
Code:
<%--
Document : order
Created on : Jun 15, 2019, 3:11:06 PM
Author : Riddhi
--%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%#page import="java.sql.*" %>
<!DOCTYPE html>
<html lang="en">
<%# include file="header.jsp" %>
<h2 class="text-center"> ShopBilling </h2>
<p><br/></p>
<%
String Host = "jdbc:mysql://localhost:3306/shopbilling";
Connection connection = null;
Statement statement = null;
ResultSet rs = null;
PreparedStatement ps=null;
Class.forName("com.mysql.jdbc.Driver").newInstance();
connection = DriverManager.getConnection(Host, "root", "");
StringBuilder sb = new StringBuilder();
%>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="row">
<div class="col-md-6"><h3>Product Details</h3></div>
<div class="col-md-6 text-right">
Back to Home
</div>
</div>
<p></p>
<form action="" method="post">
<%
String products[] = request.getParameterValues("products");
String items[] = request.getParameterValues("item_no");
int sum=0;
if (products!= null && items!= null && products.length != 0 && items.length != 0) {
for (int i = 0; i < products.length; i++) {
%> <%
statement = connection.createStatement();
String u=request.getParameter("u");
int num=Integer.parseInt(products[i]);
String Data = "select * from products_tbl where id='"+num+"'";
rs = statement.executeQuery(Data);
while (rs.next()) {
%>
<input type="hidden" name="id" value='<%=rs.getString("id")%>'/>
<div class="form-group">
<label for="product_name">Product Name: <%=rs.getString("product_name")%></label>
<input type="hidden" class="form-control" id="product_name" name="product_name" value='<%=rs.getString("product_name")%>'>
</div>
<div class="form-group">
<label for="product_price">Product Single Price: <%=rs.getString("product_price")%></label>
<input type="hidden" class="form-control" id="product_price" name="product_price" value='<%=rs.getString("product_price")%>'>
</div>
<div class="form-group">
<label for="product_name">Item Quantity: <% out.println(items[i]); %></label>
<input type="hidden" class="form-control" id="item_no" name="item_no" value='items[j]'>
</div>
<div class="form-group">
<label for="product_name">Product Total Price: <%
int num1=Integer.parseInt(items[i]);
int propri=Integer.parseInt(rs.getString("product_price"));
out.println(num1 * propri); int gtotal= num1 * propri; %></label>
<input type="hidden" class="form-control" id="item_no" name="item_no" value='items[j]'>
</div>
<hr>
<% sum= sum + gtotal; %>
<%
}
}
}
%>
<div class="form-group">
<label for="product_name">Grand Total: <%
out.println(sum); %></label>
<input type="hidden" class="form-control" id="item_no" name="item_no" value='items[j]'>
</div>
<button type="print" onclick="window.print();" class="btn btn-warning">Print</button>
</form>
</div>
</div>
<%# include file="footer.jsp" %>
</html>
I think the problem in your code is with <input type="text" name="item_no" /> because every row in your above code has checkbox , when you submit your form only selected checkbox is passed , but all <input type="text" name="item_no" /> is passed even the null where you didn't give any value , so when you iterate you get null value with that as well .Now ,to solve this do like below :
//give value to your check-box i.e id of that row
<input type="checkbox" name="products" value ='<%=rs.getString("id")%>' />
//pass that id with your input type i.e item_no_1 ..etc
<input type="text" name='item_no_<%=rs.getString("id")%>' />
And then to get only particular value of Product Quantity where you have selected Checkbox do like below :
String products[] = request.getParameterValues("products");
if (products!= null && items!= null && products.length != 0 && items.length != 0) {
for (int i = 0; i < products.length; i++) {
//your code
<div class="form-group">
<label for="product_name">Product Total Price: <%
//getting item value of that selected checkbox
int item_no=Integer.parseInt(request.getParameter("item_no_" + products[i]));
int propri=Integer.parseInt(rs.getString("product_price"));
out.println(num1 * propri); int gtotal= num1 * propri; %></label>
<input type="hidden" class="form-control" id="item_no" name="item_no" value='items[j]'>
</div>
I need to limit the maximum input value in the name = "name" field.
Real-time processing. The <input max = 100> constraint does not work.
How can I do that?
<script>
function showcost() {
document.getElementById("cost").value = document.getElementById('serviceslist').value;
}
function sum2() {
var x = document.getElementById('cost2').value;
var y = document.getElementById('amount2').value;
var total = (parseFloat(x) * parseFloat(y))/100;
document.getElementById("total2").value = total;
}
</script>
<br>
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-0">
<form>
<p>Procent:<input name="name" size="3" min=1 max=100 type="number" id="amount2" step=1 id="cost2" pattern="[0-9]" onchange="sum2()" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');" );" ></p>
<p>Результат:<input type="text" id="total2" value="0" disabled></p>
</form>
</div>
</div>
</div>
So, I have two questions in my HTML code. After submitting the button, my code should display whether question # 1 and # 2 is correct right after the specified number. But the "msg" just prints on question # 1. How do I make the "msg" prints on both number? Any help would be greatly appreciated. Thankies!
<html>
<head>
<script>
function checkAnswers(){
var retval = false;
for(i=0;i<document.myForm.q.length;i++){
if(document.myForm.q[i].value == "yes" && document.myForm.q[i].checked == true){
retval = true;
}
}
if(retval== true){
document.getElementById("msg").innerHTML="Correct Answer!";
}
else if(retval == false){
document.getElementById("msg").innerHTML="Wrong Answer!";
}
}
</script>
</head>
<body>
<form action="#" onsubmit="return checkAnswers(this)" name="myForm">
<h1>QUESTIONS<h1>
<h3>Question No. 1.) </h3> What is the world's number 1 shampoo?<br />
<input name="one" type="radio" value="yes" id="q"/>A. Hi</br>
<input name="one" type="radio" value="no" id="q"/>B. Hello</br>
<input name="one" type="radio" value="no" id="q"/>C. Ahh</br>
<input name="one" type="radio" value="no" id="q" />D. Kitkat</br>
<span id="msg"></span>
<br />
<h3>Question No. 2.) </h3> What is the world's number 1 shampoo?<br />
<input name="two" type="radio" value="no" id="q"/>A. Hi</br>
<input name="two" type="radio" value="yes" id="q"/>B. Hello</br>
<input name="two" type="radio" value="no" id="q"/>C. Ahh</br>
<input name="two" type="radio" value="no" id="q" />D. Kitkat</br>
<span id="msg"></span>
<input type="submit" name='submit' value="Submit">
<br />
<span id="score"></span><br />
</form>
</body>
</html>
See this fiddle!
I changed your id="msg" to name="msg", look at the javascript below to see why! (And because it's not a good idea to have multiple element with the same id)
I removed id="q" because we can already get all radio without it !
<!-- No need to pass 'this' inside checkAnswers because we won't use it ! -->
<form action="#" onsubmit="return checkAnswers()" name="myForm">
<h1>QUESTIONS<h1>
<h3>Question No. 1.) </h3> What is the world's number 1 shampoo?<br />
<input name="one" type="radio" value="yes"/>A. Hi</br>
<input name="one" type="radio" value="no"/>B. Hello</br>
<input name="one" type="radio" value="no"/>C. Ahh</br>
<input name="one" type="radio" value="no"/>D. Kitkat</br>
<span name="msg"></span>
<br />
<h3>Question No. 2.) </h3> What is the world's number 1 shampoo?<br />
<input name="two" type="radio" value="no"/>A. Hi</br>
<input name="two" type="radio" value="yes"/>B. Hello</br>
<input name="two" type="radio" value="no"/>C. Ahh</br>
<input name="two" type="radio" value="no"/>D. Kitkat</br>
<span name="msg"></span>
<input type="submit" name='submit' value="Submit">
<br />
<span id="score"></span><br />
</form>
This is your js, We create a list of unique radio name, then check their value and show the result:
function checkAnswers() {
var retval;
//This gets all radio !
var listRadio = document.querySelectorAll('input[type="radio"]');
//We need to loop only each group, not every radio
//This array will hold all the unique names !
var listNameRadioGroup = new Array();
//We loop all radio, when the name is not in the array, we add it
for (var i = 0; i < listRadio.length; i++) {
if (listNameRadioGroup.indexOf(listRadio[i].name) === -1)
listNameRadioGroup.push(listRadio[i].name);
}
//Then we only need to loop this new array to test each group
for (i = 0; i < listNameRadioGroup.length; i++) {
//We can access the value of the radio with .value on the element
//listNameRadioGroup[i] will return the current name to test
if (document.myForm[listNameRadioGroup[i]].value == "yes") {
retval = true;
//because msg is now a name, we can use getElementsByName and they will be in order !
//So we set the value to correct
document.getElementsByName("msg")[i].innerHTML = "Correct Answer!";
}
else {
retval = false;
document.getElementsByName("msg")[i].innerHTML = "Wrong Answer!";
}
}
return retval;
}
// i've edited your code a little and here it is. In your code, if you have choose the correct answer, and you change it, the "msg" doesn't change. it remains as "Correct answer!" even though it is a wrong answer. But thanks for your help!
<html>
<head>
<script>
function checkAnswers(){
var retval = false;
var inputs = document.getElementsByTagName('input');
for(i=0;i<inputs.length;i++){
var inputName = inputs[i].getAttribute('name');
var msg = document.getElementById('msg-' + inputName);
if(inputs[i].value == "yes" && inputs[i].checked == true){
msg.innerHTML = 'Correct Answer!';
}
else if(inputs[i].value == "yes" && inputs[i].checked != true){
msg.innerHTML = 'Wrong Answer!';
}
}
return false;
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return checkAnswers()">
<h1>QUESTIONS</h1>
<h3>Question No. 1.)</h3>What is the world's number 1 shampoo?
<br />
<input name="one" type="radio" value="yes" />A. Hi
<br />
<input name="one" type="radio" value="no" />B. Hello
<br />
<input name="one" type="radio" value="no" />C. Ahh
<br />
<input name="one" type="radio" value="no" />D. Kitkat
<br />
<span id="msg-one"></span>
<br />
<h3>Question No. 2.)</h3>What is the world's number 1 shampoo?
<br />
<input name="two" type="radio" value="no" />A. Hi
<br />
<input name="two" type="radio" value="yes" />B. Hello
<br />
<input name="two" type="radio" value="no" />C. Ahh
<br />
<input name="two" type="radio" value="no" />D. Kitkat
<br />
<span id="msg-two"></span>
<br/>
<input type="button" name='submit' value="Submit" />
</form>
</body>
</html>
In normal time you not put two time the same id but...your javascript/jquery need to look like that:
function checkAnswers(){
var retval = false;
for(i=0;i<document.myForm.q.length;i++){
if(document.myForm.q[i].value == "yes" && document.myForm.q[i].checked == true){
retval = true;
}
if(retval== true){
$("span[id=msg]")[i].innerHTML="Correct Answer!";
}
else if(retval == false){
$("span[id=msg]")[i].innerHTML="Wrong Answer!";
}
}
}
Because you need to loop all the msg span in your html and point at them.
I am currently developing a web site (Part of a university assignment)
I just put some input validation, although when I redirect due to an error from validation,
For example:
var x = document.getElementById("age").checked;
var y = document.getElementById("agreement").checked;
var z = document.getElementById("sex").value;
if(x != true & y != true & z == null)
{
response.sendRedirect("Register.jsp");
}
I was looking to have some sort of error message appear above the form, to tell the user that they have created an error within the form. (For example, if they did not enter their Gender or did not agree to either of the checkboxes). Also noted, I will change the validation code slightly to be more specific to the error in which the person has made.
Form:
<h3>Register as user</h3>
<form method="POST" action="Register">
<ul>
<li>First Name: <input type="text" name ="firstName"></li>
<li>Last Name: <input type = "text" name = "lastName"></li>
<li>Email Address: <input type = "email" name = "email"></li>
<li>Gender: Male <input type ="radio" name ="sex" value="male">
Female <input type ="radio" name ="sex" value="female"></li>
<li>User Name <input type="text" name="username"></li>
<li>Password <input type="password" name="password"></li>
<li>You must be 12 or over to register to this web site. Please check if you are over 12: <input type = "checkbox" name="age"></li>
<li>Please check this box to agree to the Terms and Conditions <input type ="checkbox" name="agreement"></li>
</ul>
<br/>
<input type="submit" value="Register">
</form>
Thank you for any help or advice you can give me, I really appreciate it as I am rather new to web development and I want to improve and understand techniques that web developers use.
var validate = function(form) {
var errors = [];
if (!form.sex[0].checked && !form.sex[1].checked) {
errors.push('Please select a gender');
}
if (!form.agreement.checked) {
errors.push('Please agree to T&C');
}
if (errors.length) {
alert(errors.join('\n'));
return false;
}
return true;
};
<h3>Register as user</h3>
<form method="POST" action="Register.jsp" onsubmit="return validate(this);">
<ul>
<li>First Name:
<input type="text" name="firstName">
</li>
<li>Last Name:
<input type="text" name="lastName">
</li>
<li>Email Address:
<input type="email" name="email">
</li>
<li>Gender: Male
<input type="radio" name="sex" value="male">Female
<input type="radio" name="sex" value="female">
</li>
<li>User Name
<input type="text" name="username">
</li>
<li>Password
<input type="password" name="password">
</li>
<li>You must be 12 or over to register to this web site. Please check if you are over 12:
<input type="checkbox" name="age">
</li>
<li>Please check this box to agree to the Terms and Conditions
<input type="checkbox" name="agreement">
</li>
</ul>
<br/>
<input type="submit" value="Register">
</form>
I did something like this. I have an html element which is hidden by default.
It is red and take the whole width of the div I put into.
And I've a function to manage errors :
var manageError = function(message) {
$("#element").val(message); // or $("#element").html(message) I guess
$("#element").clearQueue();
$("#element")slideDown(200).delay(10000).slideUp(200);
};
Does it help ?
use jQuery to do this. since you are learning..it will be more helpful for you.
first thing I noticed there, you have used response.sendRedirect(...); in side your javascript which is a wrong approach.
And in your form, don't use un-ordered list like approach, simply use div tags.
I will give a simple example:
<h3>Register as user</h3>
<form method="POST" action="Register.jsp" id="formId">
First Name:
<input type="text" name="firstName">Last Name:
<input type="text" name="lastName">
<div id="errMsg"></div>
<input type="button" value="submit" id="submtBtn">
</form>
and in your javascript file, use it with jQuery:
< !DOCTYPE html >
< html >
< head >
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" > < /script>
</head >
< script >
$("submtBtn").click(function({
var errorMsg = "";
if ($("firstName").val === '' || $("lastName").val === '') {
errorMsg = "<b>firstName and LastName can not be empty!<b>";
$("errMsg").html(errMsg);
return;
}
$("#formId").submit();
});
< /script>
you can follow above approach.... if you're using Servlets, you could follow jQuery Ajax to submit your values. try and see...hope it will give you an idea..!
First put the validation code in a function and call that function.
function validate(){
..........write your validation code
}
Call this from submit button via onclick or onchange or onblur attribute of input tag.
You can always use HTML 5. With the required action. They can never leave anything blank if this is in. Be aware that it might work with a space in it or something.
Try this:
<li>First Name: <input type="text" name ="firstName" required></li>
I have several check box in a form I just wanna way to check whether they are checked or not .
If checked i need to store their id in the database(that i can do it ) . But my question is how to determine whether are checked or not instead of checking for each check box on at a time . I need to check whether its checked or not inside a servlet.
This is my code
<!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=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
Role Id<input type="text" name="roll_id"/><br>
Role Name<input type="text" name="roll_name"/><br>
Role Description<textarea name="roll_desc"></textarea><br>
<br>
<br>
Screen1<br>
tab1<br>
<input type="checkbox" name="s1_t1_view" value="s1_t1_view" >view<br>
<input type="checkbox" name="s1_t1_add" value="s1_t1_add" >add<br>
<input type="checkbox" name="s1_t1_edit" value="s1_t1_edit" >edit<br>
<input type="checkbox" name="s1_t1_delete" value="s1_t1_delete" >delete<br>
tab2<br>
<input type="checkbox" name="s1_t2_view" value="s1_t2_view" >view<br>
<input type="checkbox" name="s1_t2_add" value="s1_t2_add" >add<br>
<input type="checkbox" name="s1_t2_edit" value="s1_t2_edit" >edit<br>
<input type="checkbox" name="s1_t2_delete" value="s1_t2_delete" >delete<br>
Screen2<br>
tab1<br>
<input type="checkbox" name="s2_t1_view" value="s2_t1_view" >view<br>
<input type="checkbox" name="s2_t1_add" value="s2_t1_add" >add<br>
<input type="checkbox" name="s2_t1_edit" value="s2_t1_edit" >edit<br>
<input type="checkbox" name="s2_t1_delete" value="s2_t1_delete" >delete<br>
tab2<br>
<input type="checkbox" name="s2_t2_view" value="s2_t2_view" >view<br>
<input type="checkbox" name="s2_t2_add" value="s2_t2_add" >add<br>
<input type="checkbox" name="s2_t2_edit" value="s2_t2_edit" >edit<br>
<input type="checkbox" name="s2_t2_delete" value="s2_t2_delete" >delete<br>
<input type="submit" name="sumbit" text="submit">
</body>
</html>
But in my code I have several check boxes . I need to hardcode that for every check box . Is there way so that i put it in a loop and check for all check boxes ?
To be simple, you can use the name attribute to get the data since you are using different name for each checkbox.
In Servlet :
String[] s1_t1_view = request.getParameterValues("s1_t1_view");
String[] s1_t1_add = request.getParameterValues("s1_t1_add");
If you want to use group of checkbox to give the user a choice between multiple values, you will need to iterate over the group in the servlet. You can use this :
In HTML : (same name = same group)
<input type = "checkbox" name = "s1_t1" value = "s1_t2_view" >View <br>
<input type = "checkbox" name = "s1_t1" value = "s1_t2_add" >Add <br>
<input type = "checkbox" name = "s1_t1" value = "s1_t2_edit" >Edit <br>
<input type = "checkbox" name = "s1_t1" value = "s1_t2_delete" >Delete<br>
In Servlet :
String[] results = request.getParameterValues("s1_t1");
for (int i = 0; i < results.length; i++) {
System.out.println(results[i]);
}
You can use
String[] checked = request.getParameterValues("checkboxName");
and then check the checked value
For me this one worked.
String[] selecttype=request.getParameterValues("selectType");
//selectType is the name of checkbox in jsp page.
This will return selected checkbox values.
Create hidden fields as
Now in your servlet as: String[] names = request.getParameterValues("checkbox");
PrintWriter pw = new PrintWriter(new File("/Desktop/sticker.txt"));
for(int i=0; i < names.length; i++) {
if(i + 1 < names.length && names[i].equals(names[i+1])) {
pw.write(names[i] + ",true\n");
++i;
} else {
pw.write(names[i]+",false\n");
}
}
pw.close();