I have a foreach loop to generate checkboxes and I want to make sure that the submit button remains disabled until atleast one checkbox is checked by the user. But the button remains disabled even after a checkbox is checked.
:
Here's my jsp file
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="bootstrap.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$('#myform input:checkbox').change(function() {
var a = $('#myform input:checked').filter(":checked").length;
if (a == 0) {
$('.btn').prop('disabled', true);
} else {
$('.btn').prop('disabled', false);
}
});
</script>
<style type="text/css">
body {
background: #CCFFCC;
!
important;
}
/* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>
<title>Resolve</title>
</head>
<body>
<h2>Hi There!</h2>
<h3>Browse through all unresolved issues and choose to resolve
some:</h3>
<div style="background-color: transparent; !important"
class="table-responsive">
<div class="btn-toolbar pull-right">
<div class='btn-group'>
<button class="btn btn-primary btn-lg">Back</button>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>Issue Id</th>
<th>Description</th>
<th>Status</th>
<th>Resolved?</th>
</tr>
</thead>
<form:form class="form-horizontal" modelAttribute="ticketForm"
action="${pageContext.request.contextPath }/contact/resolveissue"
method="get" id="myform">
<c:if test="${not empty form}">
<c:forEach var="listValue" items="${form}">
<tr>
<td>${listValue.ticketId}</td>
<td>${listValue.description}</td>
<td>${listValue.status}</td>
<td>
<div class="col-lg-10">
<input type="checkbox" name="resolve"
value="${listValue.ticketId}" class="form-control">
<form:errors path="resolve"></form:errors>
</div>
</c:forEach>
</c:if>
<div class="btn-toolbar pull-right">
<div class='btn-group'>
<button type="submit" class="btn btn-primary btn-lg"
disabled="disabled">Resolve</button>
</div>
</div>
<!-- <button type="submit" class="btn btn-primary btn-lg center-block">Resolve</button>
-->
</form:form>
</table>
</div>
</body>
</html>
You have to put all your js/jquery into the ready method as follows :
<script type="text/javascript">
$(document).ready(function(){
$('#myform input:checkbox').change(function() {
var a = $('#myform input:checked').filter(":checked").length;
if (a == 0) {
$('.btn').prop('disabled', true);
} else {
$('.btn').prop('disabled', false);
}
});
});</script>
This should do the trick:
$(function(){
$("#myform").on("change", "input", function(){
status=($("#myform").find("input:checked").length==0)?"disabled":"";
$("button").prop("disabled", status);
})
})
Here is the Fiddle to play with.
Related
So, in template allRates i have a button "show by Ask" and upon clicking it I want to trigger showRates() method in managementh.js which to my understanding will swap the body of wathever is within <div class="Allrate-container"> with body found under given url ("http://localhost:8090/AllRatesFiltered,) but it does not work, nothing happens when I click the button, no bugs or errors are shown in my IDE, no action in Network in devtool on front end is triggerd when the button is clicked, clicking the button does not trigger showRates() method.
How to swap portions of 2 html templates using .js but only when a specific button is clicked?
Bassicaly I want to upon clicking 'show' button swap the part of body (the one within <div AllRates-container>)template that is displayed under /RatesOfPeriod with part of template displayed under /AllRatesFiltered adres, what am I doing wrong, I'm new to .js and don't know what is wrong here, can someone help? Again, no errors are shown anywhere, not in my IDE not on the site in devtools (no action is shown in Network when clicking "show by Ask button", simply nothing happens )
managementh.js
function showRates(element){
$.get( "http://localhost:8090/AllRatesFiltered, function( result )
{
var resultBodyHtml = /<body.*?>([\s\S]*)<\/body>/.exec(result);
$(document).find(".Allrate-container").html(resultBodyHtml);
});
}
template AllRates
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>All Rates</title>
<link th:href="#{/static/css/bootstrap.min.css}" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<a>Rates from a given period of time: (not required, if you submit empty fields you will get actual rates) </a>
<form action="#" th:action="#{RatesOfPeriod}" th:object="${ratesOf}" method="POST">
<div th:if="${#fields.hasErrors('datesFrom')}" th:errors="*{datesFrom}">Invalid starting date</div>
<input type="text" th:field="*{datesFrom}" placeholder="YYY-MM-DD"
class="form-control mb-4 col-4">
<div th:if="${#fields.hasErrors('datesTo')}" th:errors="*{datesTo}">Invalid end date</div>
<input type="text" th:field="*{datesTo}" placeholder="YYY-MM-DD"
class="form-control mb-4 col-4">
<button type="submit" class="btn btn-info col-2">Submit</button>
</form>
</div>
<br>
<thead>
<tr>
<td>
<a th:onclick="showRates()" class="btn btn-info">show by Ask</a>
</td>
</tr>
</thead>
<br>
<br>
<div class="Allrate-container">
<table class="table table-bordered">
<tr class="table-striped">
<th>Currency</th>
<th>Code</th>
<th>Bid</th>
<th>Ask</th>
</tr>
<th:block th:each="singleRate: ${allRates}">
<tr>
<td th:text="${singleRate.currency}"></td>
<td th:text="${singleRate.code}"></td>
<td th:text="${singleRate.bid}"></td>
<td th:text="${singleRate.ask}"></td>
</tr>
</th:block>
</table>
<a th:href="#{/}" class="btn btn-primary">Back to main site</a>
</div>
</body>
<script type="application/javascript" th:src="#{/jquery-3.5.1.min.js}"></script>
<script type="text/javascript" th:src="#{/managementh.js}"></script>
</html>
template allRatesFiltered
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>All Rates</title>
<link th:href="#{/static/css/bootstrap.min.css}" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<a>Rates from a given period of time: (not required, if you submit empty fields you will get actual rates) </a>
<form action="#" th:action="#{RatesOfPeriod}" th:object="${ratesOf}" method="POST">
<div th:if="${#fields.hasErrors('datesFrom')}" th:errors="*{datesFrom}">Invalid starting date</div>
<input type="text" th:field="*{datesFrom}" placeholder="YYY-MM-DD"
class="form-control mb-4 col-4">
<div th:if="${#fields.hasErrors('datesTo')}" th:errors="*{datesTo}">Invalid end date</div>
<input type="text" th:field="*{datesTo}" placeholder="YYY-MM-DD"
class="form-control mb-4 col-4">
<button type="submit" class="btn btn-info col-2">Submit</button>
</form>
</div>
<br>
<thead>
<td>
<a th:onclick="showRates()" class="btn btn-info">show by Ask</a>
</td>
</thead>
<br>
<br>
<div class="rate-container">
<table class="table table-bordered">
<tr class="table-striped">
<th>Code</th>
<th>Ask</th>
</tr>
<th:block th:each="singleRate: ${allRates}">
<tr>
<td th:text="${singleRate.code}"></td>
<td th:text="${singleRate.ask}"></td>
</tr>
</th:block>
</table>
<a th:href="#{/}" class="btn btn-primary">Back to main site</a>
</div>
</body>
<script type="text/javascript" th:src="#{/RateManagement.js}"></script>
<script type="text/javascript" th:src="#{/managementh.js}"></script>
</html>
controller
#PostMapping("RatesOfPeriod")
public String RatesOfPeriod(#ModelAttribute("ratesOf") #Valid DatesViewModel datesViewModel,
BindingResult bindingResult, Model model) {
if (!bindingResult.hasErrors()) {
String start = Objects.toString(datesViewModel.getDatesFrom(), "");
String end = Objects.toString(datesViewModel.getDatesTo(), "");
try {
currencyExchange_logic.getRatesOfDates(start, end);
model.addAttribute("allRates", Oldrates_interface.findAll());
Oldrates_interface.deleteAll();
} catch (IOException e) {
System.out.println(e.getMessage());
}
}
return "allRates";
}
#GetMapping("AllRatesFiltered")
public String allRatesFiltered(Model model) {
model.addAttribute("ratesOf", new DatesViewModel());
rates_interface.deleteAll();
model.addAttribute("allRates", rates_interface.findAll());
return "allRatesFiltered";
}
I cannot edit the rows that are newly added. I have included the class in the newly added row. But when I click the edit button in the newly added row, its not working. Also the edit button is not working once I edit the row. I can't edit the same row two times. The function is not calling when I click the button edit.
Can u guys help me out?
Following is the reproduction of my issue -
$(document).ready(function(){
$('#add').on('click',()=>{
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var addrow = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit" >Edit</button>'+
'</td></tr>';
$('#table tbody').append(addrow);
$('.add-input').val('');
$(this).dialog("close");
}
}
});
})
$("#delete").on("click", function () {
$('table tr').has('input:checked').remove();
})
$('#deleteall').on('click',function(){
$('tbody tr').remove();
})
$('.edit').on('click',(event)=>{
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var name = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit">Edit</button>'+
'</td></tr>';
$(event.currentTarget).parents('tr').replaceWith(name);
console.log($('tr'));
$('.add-input').val('');
$(this).dialog("close");
}
}
})
})
})
<!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">
<title>table edit</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class="table-wrap">
<table id="table" border="1">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Age</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Sakthi</td>
<td>20</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Prabhu</td>
<td>21</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
</tbody>
</table>
</div>
<div class="op">
<button type="button" class="mod" id="add">Add</button>
<button type="button" class="mod" id="delete">Delete</button>
<button type="button" class="mod" id="deleteall">Delete All</button>
</div>
<div class="popup" id="popup" style="display:none;">
<input type="text" placeholder="Name" class="add-input" id="name">
<input type="number" placeholder="Age" class="add-input" id="age">
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="tab-mod.js"></script>
</body>
</html>
Can I do without using onclick() ? How to do so?
The problem is that when you load the onclick listeners for .edit there you have only two buttons, and the script don't know news rows.
If you will add dynamically rows it need another context to can execute it.
Just replace this:
$('.edit').on('click',(event)=>{...})
by
$("tbody").on("click", ".edit", (event) =>{...})
Update:
you could take name & age when you open the edit box like this:
$(document).ready(function(){
$('#add').on('click',()=>{
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var addrow = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit" >Edit</button>'+
'</td></tr>';
$('#table tbody').append(addrow);
$('.add-input').val('');
$(this).dialog("close");
}
}
});
})
$("#delete").on("click", function () {
$('table tr').has('input:checked').remove();
})
$('#deleteall').on('click',function(){
$('tbody tr').remove();
})
$("tbody").on("click", ".edit", event => {
let $btnParentSiblings = $(event.currentTarget).parent().siblings('td')
let $name = $btnParentSiblings[1];
let $age = $btnParentSiblings[2];
$("#popup > #name").val($($name).html());
$("#popup > #age").val($($age).html());
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var name = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit">Edit</button>'+
'</td></tr>';
$(event.currentTarget).parents('tr').replaceWith(name);
console.log($('tr'));
$('.add-input').val('');
$(this).dialog("close");
}
}
})
})
})
<!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">
<title>table edit</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class="table-wrap">
<table id="table" border="1">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Age</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Sakthi</td>
<td>20</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Prabhu</td>
<td>21</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
</tbody>
</table>
</div>
<div class="op">
<button type="button" class="mod" id="add">Add</button>
<button type="button" class="mod" id="delete">Delete</button>
<button type="button" class="mod" id="deleteall">Delete All</button>
</div>
<div class="popup" id="popup" style="display:none;">
<input type="text" placeholder="Name" class="add-input" id="name">
<input type="number" placeholder="Age" class="add-input" id="age">
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="tab-mod.js"></script>
</body>
</html>
because your JavaScript code is running once the document is fully loaded and at that moment searches for all elements with edit class and assign their click event the editing method. so when you add a new element you must manually assign the method to its edit button.
I have this function and HTML file:
<%#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">
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%#taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<link href="resources/css/stiylesheet1.css" rel="stylesheet" media="screen">
<link href="resources/css/printStyle.css" rel="stylesheet" media="print">
<title></title>
<script type="text/javascript">
window.onload = function () {
document.getElementById("cancelSubSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubSubjectDialog").close();
});
document.getElementById("saveSubSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubSubjectDialog").close();
});
document.getElementById("cancelSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubjectDialog").close();
});
document.getElementById("saveSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubjectDialog").close();
});
}
function updateSubSubject(param)
{
selectList();
document.getElementById("addSubSubjectDialog").showModal();
document.getElementById("Departments_Select").value=param;
}
function selectList(){
var selectDepartment=document.getElementById("Departments_Select");
var selectSubjects=document.getElementById("Subjects_Select");
var departmentsArray =getList("departments");
var subjectsArray= getList("subjects");
for (var i = 0; i < departmentsArray.length; i++) {
var departmentsOption = document.createElement("option");
departmentsOption.value = departmentsArray[i];
departmentsOption.text = departmentsArray[i];
departmentsOption.name = departmentsArray[i];
selectDepartment.appendChild(departmentsOption);
}
for (var i = 0; i < subjectsArray.length; i++) {
var subjectsOption = document.createElement("option");
subjectsOption.value = subjectsArray[i];
subjectsOption.text = subjectsArray[i];
subjectsOption.name = subjectsArray[i];
selectSubjects.appendChild(subjectsOption);
}
}
</script>
</head>
<body class="grad" style="font-family: 'Open Sans', sans-serif;">
<div class="header"
style="height: 100px; background-image: url(resources/images/streep_green.gif); margin: 0px;">
</div>
</div>
<div align="center" class="main"
style="background-image: url(resources/images/final_background.gif); background-repeat: repeat-x; margin: 0">
<div class="main"
style="background-image: url(resources/images/final_background.gif); background-repeat: repeat-x; margin: 0">
<div class="searchDiv" style="margin-top:5%;width:50%;overflow-y: scroll;overflow-x: hidden; height:500px" >
<form:form method="post" modelAttribute="sub_subjects">
<table dir="rtl" class="table" >
<th><label style="float:right;"><fmt:message key="subjectName" /></label></th>
<th><label style="float:right;"><fmt:message key="subSubjectName"/></label></th>
<th><label style="float:right;"><fmt:message key="department" /></label></th>
<c:forEach items="${sub_subjects.sub_subjects_list}" var="subsubject" varStatus="status" >
<tr id="tr">
<td ><form:hidden path="" name="sub_subjects_list[${status.index}].subjectObj.view" value="${subsubject.subjectObj.view}"/>${subsubject.subjectObj.view}</td>
<td ><form:hidden path="" name="sub_subjects_list[${status.index}].description" value="${subsubject.description}"/>${subsubject.description}</td>
<td ><form:hidden path="" name="sub_subjects_list[${status.index}].departmentObj.inCurrentLanguage" value="${subsubject.departmentObj.inCurrentLanguage}"/>${subsubject.departmentObj.inCurrentLanguage}</td>
<td >
<input id="editSubSubject" onClick="updateSubSubject("this is the text")" style="width:30%; height: 80%;" type="button"> </input>
</td>
</tr>
</c:forEach>
</table>
<br/>
</div>
</form:form>
</div>
</div>
</div>
</div>
</div>
<dialog id="addSubSubjectDialog" style="width:25%; height:35%;">
<div style="width:100%; hegit:20%;"><h2 style="font-size:100%;"><fmt:message key="add_sub_subject_dialog_title" /></h2></div>
<form action="addSubSubject" method="post" >
<div style="width:100%; hegit:20%;">
<h2 style="font-size:100%;"><input id="subSubjectName" name="subSubjectName" style="font-size:100%;text-align: right;"></input> <fmt:message key="insert_sub_subject_name" /> </h2>
</div>
<div style="width:100%; hegit:20%;">
<h2 style="font-size:100%; ">
<h2 style="float:right; width: 20%; font-size: 100%;">
<fmt:message key="select_subject" /> </h2>
<select id="Subjects_Select" name="Subjects_Select" class="form-control" style="width: 50%; text-align:right; float:right;"> </select>
</h2>
</div>
<div style="width:100%; hegit:20%; margin-top: 15%;">
<h2 style="font-size:100%;">
<h2 style="float:right; width: 20%; font-size: 100%;"> <fmt:message key="select_department" /></h2>
<select id="Departments_Select" name="Departments_Select" class="form-control" style="width: 50%;text-align:right;float:right; "> </select>
</h2>
</div>
<div style="height: 60px;margin-top:30% ;">
<fmt:message key="save" var="save"/>
<input type="submit" class="btn btn-success" style=" float: left; width:40%; "value="${save}"></input>
<button id="cancelSubSubjectDialog" class="btn btn-warning" style="float: right; width: 40%;" ><fmt:message key="cancel" /></button>
</form>
</div>
</dialog>
</body>
<script type="text/javascript">
function getList(listName){
var ListFromDB = [];
if(listName=="departments")
{
<c:forEach items="${departmentsList}" var="listItem">
ListFromDB.push( "<c:out value="${listItem.inCurrentLanguage}"/>" );
</c:forEach>
}
else if(listName=="subjects")
{
<c:forEach items="${subjectsList}" var="listItem">
ListFromDB.push( "<c:out value="${listItem.description}"/>" );
</c:forEach>
}
return ListFromDB;
}
</script>
</html>
The problem is that when I run this HTML file and click on the "editSubSubject" button nothing happens. The JavaScript function doesn't get called. When I remove the params of this function and call it like this: onClick="updateSubSubject()" it works fine and opens the dialog,
What is wrong in my code?
You are escaping your double quotes here, which is causing the error:
onClick="updateSubSubject("this is the text")"
You need to either escape the double quotes (using ") or use single quotes:
onClick="updateSubSubject('this is the text')"
I have one main jsp page, here I have 6 inputs, on click of each input I'm having a jquery onclickfunction and here I'm using jquery post method to load a jsp page in which I'm calling db function to get data and then show this as boot strap modal.
The code is written as shown:
$("#simplesearchporginputid").click(function (event) {
try {
//if($("#autosearchlist1").attr("for")== "purchaseorg")
//{
//}else
//{
//}
$.post("AutoSearchPurchOrgList.jsp", {}, function (data) {
alert(data);
// $("#autosearchlist1").attr("for","purchaseorg");
$("#autosearchlist1").html(data);
$('#PurhcaseOrgModal').modal('show');
});
}
catch (err) {
document.getElementById("DisplayErrorMessage").innerHTML = err.message;
console.log(err.message);
}
});
Here autosearch list is a div id in main tag, where I'm loading the data from autosearchpurchorglist.jsp and in this loaded data I have a boot strap modal with id as PurchaseOrgModal and then I'm using $('#PurchaseOrgModal').modal('show');
But it is not working, instead the screen is loaded with transparent blackish empty screen where I'm able to see inputs and other things in main jsp but unable to click them etc... please help me to solve the issue..
and HTML modal is:
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# page import="java.util.*"%>
<%# page import="*******.jco.*"%>
<%# page import="com.*****.*"%>
<!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>Purchase Org Autosearch List</title>
<script>
</script>
</head>
<body>
<!-- Auto search feature -->
<%
GBSServletRequest.g_obj_Request = request;
GBSServletRequest.g_obj_Respons = response;
SmartSearch smartSearchObject = new SmartSearch();
Log logobject = new Log();
%>
<div class="modal fade" id="PurhcaseOrgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><img src="IMG/*******" /></button>
<h4 class="modal-title" id="myModalLabel">Select <span id="which_country"></span> Purch Org #</h4>
</div>
<div class="modal-header-search">
<label>Enter Key Word</label> <input type="text" placeholder="" title="" value="" class="dd_search_country">
</div>
<%
JCO.Table purchaserOrgIdTable = smartSearchObject.getlistofPurchaseorgID();
%>
<div class="modal-body countylist_tcode">
<table width="100%" cellpadding=20 cellspacing=0 border=0 class="countrylist country">
<tr>
<th></th>
<th></th>
</tr>
<%
try
{
purchaserOrgIdTable.setRow(0);
do{
String purch_org_desc = (String) purchaserOrgIdTable.getString(IConstants.******);
String purch_org_key = (String)purchaserOrgIdTable.getString(IConstants.*******);
String purch_org_key_desc = (String)purchaserOrgIdTable.getString(IConstants.**************);
%>
<tr>
<%String keyvalue = purch_org_key ; %>
<td
data-search_country="<%=purch_org_desc %>"
data-search_country_code="<%=purch_org_key%>"
class="countryli">
<input type="radio"
value="<%=purch_org_key %>"
data-search_country="<%=purch_org_desc %>"
data-search_country_code="<%=purch_org_key%>"
class="country_radio_btn country_check_btn" name="country">
<span class="td">
<%=purch_org_key_desc %>
</span>
</td>
<%purchaserOrgIdTable.nextRow(); %>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td
data-search_country="<%=purch_org_desc%>"
data-search_country_code="<%=purch_org_key%>">
<input type="radio"
value="<%= purch_org_key%>"
data-search_country="<%= purch_org_desc %>"
data-search_country_code="<%= purch_org_key%>"
class="country_radio_btn country_check_btn"
name="country">
<span class="country_name">
<%=purch_org_key_desc %>
</span>
</tr>
<%
}while(purchaserOrgIdTable.nextRow());
}catch(Exception e)
{
}
%>
</table>
<div class="nomatch"></div>
</div>
<div class="BookMarkmodal-footer">
<button type="button" class="btn btn-primary" id="submit_checked_val" data-dismiss="modal" aria-hidden="true">Submit</button>
</div>
</div>
</div>
</div>
</body>
</html>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="login-box.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<table>
<tr>
<td height="50px"></td>
</tr>
</table>
<fieldset id="searchFS" class="legend" style="display: block">
<legend>Search for Contact:</legend>
<table>
<tr>
<td width="55%"></td>
<td><input id="contactName" name="contactName" type="text"
width="20px" value=""></input></td>
<td><input type="submit" name="Submit" value="Search"
class="button" onclick="getcontact()" />
</td>
</tr>
</table>
</fieldset>
</center>
<p id="para"></p>
</body>
<script>
function getcontact(){
document.getElementById('para').innerHTML ="<table><tr><td>kkkkkkk</td></tr></table>";
}
</script>
</html>
WHen am pressing the button the value of the element appears than disappears while the page reloads! can anyone tell me how to fix this ?
Change "getContact()" to "getContact(); return false" to prevent the form from submitting.
A more ideal solution would be to bind to the click event:
document.querySelector('[name="Submit"]').addEventListener('click', function (e){
//prevent default behavior -- stop form from submitting
e.preventDefault();
document.getElementById('para').innerHTML ="<table><tr><td>k</td></tr></table>";
});