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>
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 am having table with 6 fields and there is update button in the last field, onclick of that one popup appears but popup is taking only first entry of the in the table every time even if pressing the second or third entry's update button.
Here is my JSP Code `
<%#taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>Report</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">Details of Students</div>
<div class="panel-body">
<button id="newbtn" type="button"
class="form-control btn btn-success">Add New Student</button>
<button id="shwbtn" type="button"
class="form-control btn btn-success">show</button>
<div style="margin-top: 40px;">
<table class="table table-bordered" id="updatedetailsFrm">
<thead>
<tr style="background-color: #E0E0E1;">
<th>Sr.No.</th>
<th>Name</th>
<th>Surname</th>
<th>Contact No</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<s:if test="noData==true">
<s:iterator value="beanList">
<tr>
<td><s:property value="srNo" /></td>
<td><s:property value="name" /></td>
<td><s:property value="surname" /></td>
<td><s:property value="contactno" /></td>
<td><s:property value="email" /></td>
<td>
<a href="#popupLogin" data-rel="popup"
data-position-to="window" id="updateBtnfirst"
class="ui-btn ui-corner-all ui-shadow" data-transition="pop">Update</a>
<div data-role="popup" id="popupLogin" data-theme="a"
class="ui-corner-all">
<form id="updatedetailsFrm" method="post">
<div style="padding: 10px 20px;">
<h3>Update Your Data</h3>
<input id="name" placeholder="Name" type="text" name="name"
value='<s:property value="name"/>'>
<input id="surname" placeholder="Surname" type="text"
name="surname" value='<s:property value="surname"/>'>
<input id="contactno" placeholder="Contact No" type="text"
name="contactno" value='<s:property value="contactno"/>'>
<input id="email" class="disabled" placeholder="Email" type="text"
name="email" value='<s:property value="email"/>'>
<button value="update" type="button" id="updateBtn">Update</button>
</div>
</form>
</div>
<button class="btn btn-danger" id="deleteBtn">Delete</button>
</td>
</tr>
</s:iterator>
</s:if>
</table>
<s:else>
<div style="color: red;">No Data Found.</div>
</s:else>
</div>
</div>
</div>
</div>
<div class="col-sm-2"></div>
<script>
$("#updateBtn").click(function() {
var id = document.forms["updatedetailsFrm"]["email"].value;
var userName = document.forms["updatedetailsFrm"]["name"].value;
var surName = document.forms["updatedetailsFrm"]["surname"].value;
var contactNo = document.forms["updatedetailsFrm"]["contactno"].value;
window.location = "updatedetails.action?email="+id+"&name="+userName+"&surname="+surName+"&contactno="+contactNo;
})
// $('#updateBtnfirst').click(function() {
// document.getElementById("email").disabled = true;
// })
$('#newbtn').click(function() {
window.location.href = "insert.jsp";
})
$('#shwbtn').click(function() {
window.location = "report";
})
$("#deleteBtn").click(function() {
var id = $(this).closest("tr").find('td:eq(4)').text();
window.location.href = "deleterecord.action?&email=" + id;
})
</script>
</body>
</html>
`
So, my question is, popup should bring the row wise details in popup, in particular row.
Your iterator generates all of your rows with the same ID's over and over again. Update your iterator to generate unique ID's for each form in each row. I would then remove the ID from the update button and use a class instead so it's easy to bind your click event and use an HTML "data" attribute to hold the form ID value. Then when an update button is clicked, your JavaScript will be able to grab the data attribute value and then target the correct form via unique ID.
Example update button:
<button value="update" type="button" class="updateBtn" data-form-id="updatedetailsFrm-1">Update</button>
Example form ID:
<form id="updatedetailsFrm-1" method="post">
With duplicate ID's, you'll only ever retrieve the first instance of what you're trying to target in the DOM. There are other ID's in your iterator you'll want to look at too. ID's should be unique.
Hi everyone I'm working in a Spring MVC application with JSP, my problem is in a certain moment I make a controller request to get a pice of JSP code for be included in a div. I get the JSP code from a ModelAndView answer. I put it my div by JQuery. but when I want to use my JSP container variables I can't do it. I'll show my code.
JSP Container (parent)
<div class="row" id="principalDiv">
<div id="menuZone">
<c:forEach items="${user.rol.permisos}" var="permisos">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 iconos methodDiv" id="${permisos.permisoMetodoMap}">
<div>
<center>
<i class="fa <c:out value="${permisos.permisoMetodoIcono}" /> fa-5x" id="icon_${permisos.permisoMetodoMap}"></i>
</center>
<br>
<center>
<div>
<c:out value="${permisos.permisoNombre}" />
</div>
</center>
</div>
</div>
</c:forEach>
</div>
<div id="loadZone">
</div>
</div>
Whit a button I made a reques to my controller, to get the content for "loadZone".
Code JSP request
function loadAsp(element) {
$.get('getInclude', {
include : $(element).attr('id')
}, function(responseText) {
$('#loadZone').html(responseText);
});
}
Controller
#Controller
#RequestMapping(value = "/getInclude")
public class IncludesDispatcherController {
#Autowired
FormModelBo boConsultas;
#GetMapping
public ModelAndView getReportesView() {
ModelAndView mav = new ModelAndView("includes/reportes");
try {
mav.addObject("consultas", boConsultas.consultaGeneral());
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return mav;
}
}
I return the view with a model to make a title table and that can see in the above JQuery fragment I put the view in the div with html() method.
JSP to be include (children)
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# page isELIgnored="false"%>
<div>
<center>
<legend>
<!-- //<img alt="" src="img/pen.png"> -->
Censo Métricas Triage ${user.nombre}<br /> <--- this is parent variable.
</legend>
</center>
</div>
<form action="${user.rol.rolMap}/createExcel" method="POST" role="form" id="">
<div class="form-group">
<!-- -------------------------------------------first section--------------------------- -->
<div class="row" style="padding-bottom: 22px !important;">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<div class="form-group ">
<div class="input-group ">
<span class="input-group-addon">Fecha inicio</span> <input type="date" id="fecha_1" name="fecha_1" />
</div>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<div class="form-group ">
<div class="input-group ">
<span class="input-group-addon">Fecha final</span> <input type="date" id="fecha_2" name="fecha_2" />
</div>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<div class="input-group">
<button type="submit" class="btn btn-primary">Generar Reporte</button>
</div>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
</form>
<div style="padding-bottom: 22px !important;">
<table class="table">
<thead>
<tr>
<th>Nombre de médico</th>
<th>Número de consultas</th>
</tr>
</thead>
<tbody>
<c:forEach items="${consultas}" var="consultasLista">
<tr>
<td><c:out value="${consultasLista[0]} ${consultasLista[1]} ${consultasLista[2]}" /></td>
<td><c:out value="${consultasLista[3]}" /></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
the model variables that i send in my ModelAndView are working but my parent didn't.
I try with other methods like declare variblaes
<%
String variable = "test";
%>
or
request.setAttribute("attrName", myValue); (for catch it in my children JSP with request.getAttribute())
but not works too. I don't know if it 'cause JSP parent code is alredy compiled. I need access to my parent variables.
Please help me and thanks for the time.
If you need variable ${user.nombre} in IncludesDispatcherController you need to inject it to this controller and then to the view, otherwise it will be null.
Anyway, like someone already mention JSP is serverside language and your interaction with javascript and Ajax is not really perfect. It's much better aproach if you don't send directly HTML but for instance just use JSON to send data which javascript need.
After that it would be much better if you use the data, that you already have in your parent - "${user.rol.permisos}". You can put it in "data-" tag and then easily read by JQuery. In your loop, you can do something like this:
<a href="#" id="icon_1" data-nombre="${permisos.permisoNombre}">
And read it by this:
$("a#icon_1" ).data("nombre");
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.
<%# 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>";
});