How to call another page in background in JavaScript - javascript

I have a button in enroll.html . The code of the page is as follows :
<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="JavaScript">
<!--
function inStrGrp(src,reg)
{
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
function check()
{
var uname=document.scan.elements[0].value
var bError=false
if (uname.length==0)
{
window.alert("Name is required.\n")
return false
}
if (uname.indexOf("\\")>=0)
bError=true
if (inStrGrp(uname,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
return true
}
-->
</Script>
<title>Enroll New Fingerprint.</title>
</HEAD>
<BODY onload="document.scan.name.focus();">
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p><font color="#0055FF">Enroll</font></p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<form name="scan" method="POST" action="http://10.11.201.170/data/sultan/enroll.asp" onsubmit="return check()">
<p>Please input your name: <input type="text" name="name" size="20"> </p>
<p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2"> </p>
<p>
<input type="submit" value=" Enroll " name="btnEnroll"></p>
</form>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
</center>
</BODY>
</HTML>
When I press Enroll Button , I want to load a page named verify.asp in background . How can I do that ?
The code of verify.asp is as follows :
<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="VBScript" Src="GetInfo.vbs">
</Script>
<title>Enroll Fingerprint.</title>
</HEAD>
<BODY Onload="GetLearnModel()";>
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p>Enroll</p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<Form name="scan" method="Post" action="famenroll2.asp?name=<%=Request("name")%>&check=<%=Request("check")%>&finger=<%=Request("finger")%>">
<Input type="hidden" name="LearnModel" value="">
<Input type="text" name="SlNo" value="">
</Form>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><font size="5" color="#ff0000"><%=Request.Form("SlNo")%></font><font size="5"> Enroll Successfully!</font></p>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
<% Dim Conn,strSQL,objExec,NumOfRecords,se_name,finger
cust_no=Request.QueryString("name")
Set Conn = Server.Createobject("ADODB.Connection")
Conn.Open "Driver={Oracle in XE};DBQ=xe;UID=biotpl;PWD=biotpl;"
'Query for the customer entry in FP_ENROLL Table
strSQL2 = "INSERT INTO TEST values(1,'OS')"
Set objExec = Conn.Execute(strSQL2)
'Query for the no of fingers to be taken for a customer in FP_FINGER_SETUP Table
'Set objExec = Conn.Execute("select FINGURE_NO NoF from BIOTPL.FP_FINGER_SETUP where USER_TYPE=" & Request.QueryString("cust_type") )
'NumOfFingers = objExec("NoF")
'Conn.Close()
Set objExec = Nothing
Set Conn = Nothing
%>
</center>
</BODY>
</HTML>

Add an Id in this Line
<input type="submit" value=" Enroll " name="btnEnroll">
So it becomes :
<input type="submit" value=" Enroll " id="buttonEnroll" name="btnEnroll">
<div id="result"></div>
and Than Write this Script
<script>
$("#buttonEnroll").on('click',function(e){
e.preventDefault();
$( "#result" ).load( "verify.asp" );
alert("Page loading completed");
});
</script>
#result is for loading that page in result id div.
Hope Helps !
Add this inside your header tag
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>

Ajax can be used to load a page in background. jQuery supports AJAX functionality and it is easier than what described in the first link. If your intention is to Verify an enrollment, you need to parse the reply coming out of the AJAX request. An earlier answer on parsing can be found here.
The essential steps are
Add an id to your form submit button (say 'enroll')
Include jQuery JavaScript library to your project by adding the following in the header
< script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>‌​
3.Within script tag, use a similar methodology as below.
$("#enroll").click(function(){
$.ajax({
url: "verify.asp",
success: function(result){
/* Parse the result and do whatever you want to do here */
}
});
});

//1st way::
function doFunction(event) {
event.preventDefault();
//here you can load verify.aspx by using
$("#resultdiv").load("verify.aspx", {}, function (data) {
alert("loading complete");
});
}
//2nd way:
//By using ajax call
$('#enroll').on('click', 'input[type="submit"]', function(e){
e.preventDefault();
$.post('http://mywebsite/verify.aspx',{ 'data': $('#txt_search').val() } ,function(data) {
console.log(data); // this would show you the returned data.
});
});
You can do it in 2ways:
HTML:
1st way::
=========
Add onclick to your enroll button.
<input type="submit" value="Enroll" onclick="doFunction();" id="enroll" name="btnEnroll"></p>
<div id="resultdiv">
</div>
2nd way:
========
By using ajax call

Here is modified enroll.html with modified Js
<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<title>Enroll New Fingerprint.</title>
</HEAD>
<BODY>
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p><font color="#0055FF">Enroll</font></p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<form name="scan" >
<p>Please input your name: <input type="text" name="txtName" size="20" id="txtname"> </p>
<p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2"> </p>
<p>
<input type="button" value="Enroll" name="btnEnroll" id="btnEnroll"></p>
</form>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
</center>
</BODY>
</HTML>
<script type="text/javascript">
function inStrGrp(src,reg)
{
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
$(document).ready(function(){
$('#btnEnroll').on('click',function(){
var uname = $('#txtname').val();
var bError=false
if (uname.length==0)
{
window.alert("Name is required.\n")
return false
}
if (uname.indexOf("\\")>=0)
bError=true
if (inStrGrp(uname,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
var url = "enroll.asp?name="+uname;
window.location = url;
return true
});
});
</script>
change the url in the javascript code and put yours.If you url look like
http://10.11.201.170/data/sultan/enroll.asp
this then
change the variable url in script section like the following
var url = "http://10.11.201.170/data/sultan/enroll.asp?name="+uname;
and your enroll.asp will remain the same.
Hope that will help.

Related

Swaping body of one html template with another

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";
}

Page keeps refreshing when its crucial for the data to be shown on the page

So i got this thing to wrok but it seems that it shows what i need (u need to accept the regulations for example) but after that the page immediately refreshes, tho i need the data to just stay on the page. How to deal with it?
This too much code restriction is really annoying so i have to write something like this in here to avoid it - deleting the unnecessary stuff will take too much time so i hope i wont get banned or sth lol.
<html>
<head>
<meta charset="utf-8">
<title> Usługi informatyczne </title>
<link rel="stylesheet" type="text/css" href="styl.css">
<body>
<div id="kontener">
<div id="logo">
<img src="logo.png" alt="logo">
</div>
<div id="menu">
O nas
Usługi
Kontakt
</div>
<div id="baner">
<img src="animacjak.gif" alt="">
</div>
<div id="blok_glowny">
<hr />
<h2>Kontakt</h2>
<form id="formularz" action="">
<table>
<tr>
<td>Imię:</td> <td><input type="text" id="imie"><br></td>
</tr>
<tr>
<td>Nazwisko:</td> <td><input type="text" id="nazwisko"></td>
</tr>
<tr>
<td>E-mail:</td> <td><input type="text" id="email"></td>
</tr>
<tr>
<td>Usługa</td> <td><textarea name="usluga" id="usluga"></textarea></td>
</tr>
<tr>
<td></td> <td><input type="checkbox" id="regulamin" value="regulamin">Zapoznałam/em się z regulaminem</td>
</tr>
<tr>
<td></td> <td><input type="reset" value="Resetuj"><input type="button" onclick="przeslij()" value="Prześlij"></td>
</tr>
</table>
</form>
<div id="pokaz"> </div>
<script type="text/javascript">
function przeslij(){
var imie=document.getElementById("imie").value;
var nazwisko=document.getElementById("nazwisko").value;
var usluga=document.getElementById("usluga").value;
var regulamin=document.getElementById("regulamin").checked;
document.getElementById("formularz").submit();
if(regulamin==true){
document.getElementById("pokaz").innerHTML=imie.toUpperCase()+" "+nazwisko.toUpperCase()+"<br />"+
"Treść twojej sprawy:"+usluga+"<br />"+"Na podany adres e-mail zostanie wysłana oferta";
}
else{
document.getElementById("pokaz").innerHTML="Musisz zapoznać się z regulaminem";
document.getElementById("pokaz").style.color="red";
}
}
</script>
<hr />
</div>
<div id="stopka">
<p>Autor strony: 00301011337</p>
</div>
</div>
</body>
</head>
</html>
Your function is missing the parentheses
function przeslij() { ... }
And to make the reset button works, just change its type to "reset"
<input type="reset" value="Resetuj">

jQuery click event is not handled by my javascript file

I am using ASP.NET MVC 4.0 to build my web application and jQuery Dialog plugin for the popup. I intend to put my HTML elements in the div element with id 'addDialog' onto a popup. The popup should be shown on a button click with id 'add' but it's not working. Whenever I click the button nothing happens.
This is my View:
#{
ViewBag.Title = "TimeSlotDetails";
}
<head>
<title>TimeSlot</title>
<link href="~/Scripts/DataTables/datatables.min.css" rel="stylesheet" />
<link href="#Url.Content("~/Content/Common.css")" rel="stylesheet" type="text/css" />
<link href="~/Scripts/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="~/Scripts/jquery.unobstrusive-ajax.min.js"></script>
<script src="~/Scripts/DataTables/datatables.min.js"></script>
<script src="~/Scripts/TimeSlotDetails.js"></script>
</head>
<body>
<form>
<div id="addDialog" style="display:none">
Name<input type="text"/><br/><br/>
Duration<input type="text"/><br/><br/>
Type<input type="text"/><br/><br/>
Frequency<input type="text"/><br/><br/>
</div>
<div class="title">Automatic Timetable Generator</div>
<div class="title-down"></div>
<table class="option_list">
<tr>
<td class="title-down" rowspan="16" colspan="3"></td>
<td rowspan="16" colspan="5">
<div></div>
<div></div>
<div>#Html.ActionLink("Home", "Home")</div>
<div>#Html.ActionLink("Preferred Time Slot", "PreferredTimeslot")</div>
<div>Time Slot Details</div>
<div>Department Details</div>
<div>Subject Details</div>
<div>ClassRoom Details</div>
<div>Lab Details</div>
<div>Allot the Slots for each classRoom as per your need</div>
<div>Teacher Details</div>
<div>Allot Subjects to Teachers</div>
<div>Allot Subjects to Labs</div>
<div>Check ot the Final Result</div>
<div></div>
<div></div>
</td>
<td rowspan="16" colspan="12">
<div>Enter the Time slot Details</div>
<div>
<span><input id="add" type="button" value="Add" /></span> <span><input id="edit" type="button" value="Edit" /></span> <span><input id="delete" type="button" value="Delete" /></span>
</div>
<table id="timeslotdetails">
<thead>
<tr>
<td colspan="3">Name</td>
<td colspan="3">Duration</td>
<td colspan="3">Type</td>
<td colspan="3">Frequency</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div> <button id="slotAllottmentSubmit" type="Submit" value="Submit the Data">Submit the Data</button></div>
</td>
<td rowspan="16" colspan="3"></td>
</tr>
</table>
</form>
</body>
This is my JavaScript code:
$(document).ready(function () {
$('#timeslotdetails').DataTable();
$('.option-list #add').click(function () {
$('#addDialog').css('display:inline');
$('#addDialog').dialog();
});
});
I have included all the dependent files in the right order.
I think the jQuery selector $('.option-list #add') is wrong.
I checked and I did not see any element having the .option-list class in the HTML.
You can try $('#add').

adding the product to cart table in different page

I am making a shopping cart.
This is the code where a user clicks on a dd to cart button to add items to the cart table:
<div class="container">
<a class="addToCart" href="#" data-name="Java" data-price="150"><a/>
<img src="1.jpeg" id="book1" width="200" height="175" />
<div class="center">Java Basics</div>
<p> 150 SAR </p>
<div>
<label for="qty-1">Quantity</label>
<input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/>
</div>
<p><input id="addToCart" type="submit" value="Add to cart" class="btn"/></p>
</div>
<div class="container1">
<a class="addToCart" href="#" data-name="PHP" data-price="100"><a/>
<img src="1.jpeg" id="book1" width="200" height="175" />
<div class="center">PHP Basics</div>
<p> 100 SAR </p>
<div>
<label for="qty-1">Quantity</label>
<input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/>
</div>
<p><input id="addToCart" type="submit" value="Add to cart" class="btn"/></p>
</div>
<div class="container2">
<a class="addToCart" href="#" data-name="PHP" data-price="100"><a/>
<img src="1.jpeg" id="book1" width="200" height="175" />
<div class="center">JavaScript Basics</div>
<p> 200 SAR </p>
<div>
<label for="qty-1">Quantity</label>
<input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/>
</div>
<p><input id="addToCart" type="submit" value="Add to cart" class="btn"/></p>
</div>
with this jQuery script:
and I have javascript file that contains function of the cart like add to cart, remove from car and calculating total.
<script src="js/functions.js"></script>
<script>
// some jQuery function added to the links
$("#totalCart").html();
$(".addToCart")click(function(event){
eventpreventDefault(); //prevent the links from doing the default behaviour when they are clicked
var name= $(this).att("data-name"); //this represents the link that you click on / attr to access one of the attributes
var price= Number($(this).att("data-price"));
addItemtoCart(name, price, 1);
displayCart();
});
function displayCart() { //display cart content into the page as a list
var cartArray = listCart();
var output = "" ;
for ( var i in cartArray) {
output += "<li>" +cartArray[i].name+" "+cartArray[i].quantity+"</li>"
}
$("#showCart").html(output); //html(output) to replace everything in showCart with text we want
$("#totalCart").html(total Cart());
}
and this the cart.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form id="shopping-cart" action="cart.html" method="post">
<table style="width:80%">
  <tr>
    <th> Item </th>
    <th> Quantity </th>
    <th> Price </th>
  </tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
my question is that I want to link add to cart button to the cart.html page with implementing the functions, I do not know how to glue them all together. Using only HtML, JavaScript and a little bit of jQuery.
PS: no database is used.

Disable checkbox, until text is displayed

I have this form, it works fine but I need the tos2 checkbox to be as disabled until the user clicks to show the TOS. Only then the user will be able to check the checkbox.
If anyone can give me a hint go get this working, it will be great.
Thanks in advance.
<?php
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$().ready(function() {
$("#form1").validate();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".flip").click(function() {
$(".panel").slideToggle("slow");
});
});
</script>
<script type="text/javascript">
$(document).ready(function($) {
$("input[name$='enable']").click(function(){
if ($(this).is(':checked')) {
var remove = '';
$('input.textbox:text').attr ('value', remove);
$('input.textbox:text').attr("disabled", true);
$('input.textbox:checkbox').attr("disabled", true);
}
else if ($(this).not(':checked')) {
$('input.textbox:checkbox').attr("disabled", false);
$('input.textbox:text').attr("disabled", false);
}
}); });
function showHide() {
var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
</head>
<body>
<div id="content" align="center">
<div id="wrapper" style="width:550px !important;">
<form method="post" action="inserting-process.php" id="form1" onsubmit="return validateForm()" class="signupform" name="signupform">
<input type="hidden" name="allowlang" id="allowlang" value="no" />
<table cellpadding="4" cellspacing="0" width="100%" border="0" style="text-align:left;">
<tr>
<td><input type="checkbox" name="enable" id="enable" value="" style="width:15px !important"/>
The package has not been received.</td>
</tr>
<tr>
<td><input type="checkbox" name="2enable" id="3enable" value="SI" style="width:15px !important"/>
There has been an issue.</td>
</tr>
</table>
<br />
<table cellpadding="4" cellspacing="0" width="100%" border="0" style="text-align:left;">
<tr>
<td width="120px"><strong>Name:</strong></td>
<td><input type="text" name="fname" id="fname" class="textbox required" size="30"/></td>
</tr>
</table>
<br />
<h4 align="left" style="padding-left:5px; color:#d40000;">TOS
</h4>
<div id="showHideDiv" style="display:none;">
<p align="left" style="padding-left:5px;">
Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service
</p>
<br />
</div>
<table cellpadding="4" cellspacing="0" width="100%" border="0" style="text-align:left;">
<tr>
<td><input type="checkbox" name="tos2" id="tos2" value="" style="width:15px !important" class="textbox required" />
I agree with the TOS.</td>
</tr>
<tr>
<td height="50"></td>
<td> <br /><button id="registerButton" type="submit" style="float:left;">Send Data</button></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
First of all, set your checkbox disabled as default:
<input type="checkbox" name="tos2" id="tos2" value="" style="width:15px !important" class="textbox required" disabled="disabled" />
In your JS function, when you show the text at "display:block;" you also enable checkbox:
function showHide() {
var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
document.getElementById("tos2").disabled = false ;
}
}
Here's all working: http://jsfiddle.net/3ELhv/
Now user only can select this checkbox when open the TOS
é #TOISS

Categories

Resources