update 0
got this error message: Uncaught ReferenceError: $ is not defined
update 0
update 1 newest Source
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Reservations</title>
<link rel="stylesheet" href="/static/css/main.css">
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<center><h1>Reservations</h1></center>
<div class="wrapper">
<p> You can start over at the beginning here. </p>
<big>Reserve some courts online </big> <br />
<script type="text/javascript" language="JavaScript">
$( document ).keypress(function() {
$("#timeStamp span").text("Timestamp is no-longer correct");
});
</script>
<form action="" method="post" >
<input type="hidden" name="ID" value="Rogers"></input>
<input type="hidden" name="weekday" value="Tuesday"></input>
<input type="hidden" name="nowweekday" value="1"></input>
<input type="hidden" name="month" value="September"></input>
<input type="hidden" name="nowmonth" value="9"></input>
<input type="hidden" name="day" value="18"></input>
<input type="hidden" name="year" value="2012"></input>
<input type="hidden" name="startTime" value="[15, 0]"></input>
<input type="hidden" name="endTime" value="[20L, 0L]"></input>
<input type="hidden" name="court" value="court1"></input>
<input type="hidden" name="court" value="court2"></input>
<h1>Tuesday, September 18, 2012 at Rogers Neighborhood Club</h1>
<div class="timeStamp" ><h1 id="timeStamp">15:07:24.657430<span></span></h1></div> <br />
update 1 newest Source
I have a timestamp on a page that is created on page load.
I want to alter the adjoining text label of the time stamp to indicate that the timestamp is no longer correct when there is a keyDown anywhere in the window.
Can that be done easily with javascript?
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Reservations</title>
<link rel="stylesheet" href="/static/css/main.css">
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<center><h1>Reservations</h1></center>
<div class="wrapper">
<p> You can start over at the beginning here. </p>
<big>Reserve some courts online </big> <br />
<script type="text/javascript" language="JavaScript">
$("*").keypress(function() {
$("#timeStamp").text("Modified");
});
</script>
<form action="" method="post" >
<input type="hidden" name="ID" value="Rogers"></input>
<input type="hidden" name="weekday" value="Tuesday"></input>
<input type="hidden" name="nowweekday" value="1"></input>
<input type="hidden" name="month" value="September"></input>
<input type="hidden" name="nowmonth" value="9"></input>
<input type="hidden" name="day" value="18"></input>
<input type="hidden" name="year" value="2012"></input>
<input type="hidden" name="startTime" value="[14, 30]"></input>
<input type="hidden" name="endTime" value="[20L, 0L]"></input>
<input type="hidden" name="court" value="court1"></input>
<input type="hidden" name="court" value="court2"></input>
<h1>Tuesday, September 18, 2012 at Rogers Neighborhood Club</h1>
<div class="timeStamp" id="timeStamp"><h1>text14:49:30.274646</h1></div> <br />
Yes, like so:
Assuming you're using jQuery and have the timestamp HTML like this:
<p id="timeStamp">2012-09-18 20:08 <span></span></p>
<!-- the span is where the message will be inserted -->
...and the jQuery code itself:
$( document ).keypress(function() {
$("#timeStamp span").text("Timestamp is no-longer correct");
});
Change your body element like this : <body onload="document.body.focus()" onkeyup="key()">... It will execute the key function everytime a key is pressed. Do everything you want there..
Related
I have a form and 3 buttons on it: Preview, reset and submit. And I want a new window to pop up when I click on the preview. Unfortunately, it also pops up when I send it
<html lang="cs-cz">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<link rel="stylesheet" href="styly.css">
<form name="submit" method="POST" action="preview.php" id="formID" onsubmit="target_popup(this)" >
<form name="submit" method="POST" action="mailer.php" >
<div class="box">
<h1>ODVOZY</h1>
<p class="info"><input type="text" name="name" class="textfield1" placeholder="Jméno a příjmení"/></p>
<p class="info"><input type="text" name="adress" class="textfield1" placeholder="Adresa"/></p>
<p class="info"><input type="text" name="contact" class="textfield1" placeholder="Kontakt"/></p>
<p class="info"><input type="text" name="model" class="textfield1" placeholder="Typ zboží"/></p>
<p class="info"><input type="datetime-local" name="date" class="textfield1" placeholder="Date"/></p>
<select name="money" class="info1" name="money" method="post">
<option value="Vyber způsob platby">Vyber způsob platby</option>
<option value="Placeno">Placeno</option>
<option value="Platit doma">Platit doma</option>
<option value="Placeno jen odvoz">Placeno jen odvoz</option>
<option value="Jiné (viz poznámky)">Jiné (viz poznámky)</option>
</select>
<select name="city" class="info1" name="city" method="post" >
<option value="Vyber pobočku">Vyber pobočku</option>
<option value="Dvůr Králové n/L">Dvůr Králové n/L</option>
<option value="Hořice">Hořice</option>
</select>
<textarea name="message" class="info1" type="text" cols="20" rows="5"placeholder="Poznámka"></textarea>
<p> </p>
<input type="submit" name="preview" value="Tisk" class="boxa" />
<input type="reset" value="Reset" class="boxc" />
<input type="submit" name="mailer" value="Odeslat" class="boxb" formaction="mailer.php" formmethod="POST" />
<script src="script.js"></script>
</div>
</form> </form>
</body>
</html>
Here is the Javascript, can you please tell me where it is going wrong
var myForm = document.querySelector("#formID");
if(myForm === "#formID" ){
myForm.onsubmit = function() {
var w = window.open('about:blank','Popup_Window','toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=300,left = 312,top = 234');
this.target = 'Popup_Window';
}
;
Your code is really badly formatted and I see a lot of issues here
</form> </form>
for instance.
BTW you have
<input type="submit" name="preview" value="Tisk" class="boxa" />
<input type="reset" value="Reset" class="boxc" />
<input type="submit" name="mailer" value="Odeslat" class="boxb" formaction="mailer.php" formmethod="POST" />
Do you want to submit the form when you click the preview button?
Otherwise change the type ( input type="button" instead of submit).
Add a function on the click and change the js consequently.
<input type="button" name="preview" onclick="openPopup()">
/// JS
function openPopup(){
var w = window.open('about:blank','...
}
I'm trying to integrate paytm merchant payment gateway. To get the Payment page I have method
getCheckoutPage() {
this.vendor.checkout(this.data.money, this.totalGST, this.TotalAmount).subscribe(
res => {
console.log(res);
this.paymentButtonHtml = this.domSantizer.bypassSecurityTrustHtml(res);
}
);
}
response is like below
response
<html>
<head>
<title>Merchant Check Out Page</title>
</head>
<body>
<br>
<br>
<center><h1>Your transaction is being processed!!!</h1></center>
<center><h2>Please do not refresh this page...</h2></center>
<form method="post" action="https://securegw-stage.paytm.in/theia/processTransaction" name="f1" style="visibility: hidden;">
<table border="1">
<tbody>
<input type="hidden" name="REQUEST_TYPE" value="DEFAULT" />
<input type="hidden" name="MID" value="XXXXXXXXXXXXXXXXX" />
<input type="hidden" name="ORDER_ID" value="xxxxxxx" />
<input type="hidden" name="CUST_ID" value="426" />
<input type="hidden" name="INDUSTRY_TYPE_ID" value="Retail" />
<input type="hidden" name="CHANNEL_ID" value="WAP" />
<input type="hidden" name="TXN_AMOUNT" value="40.12" />
<input type="hidden" name="WEBSITE" value="xxxxxxxxxxxx" />
<input type="hidden" name="CALLBACK_URL" value="http://api.xxxxxxxxx.com/api/payment/status" />
<input type="hidden" name="MOBILE_NO" value="xxxxxxxxxx" />
<input type="hidden" name="CHECKSUMHASH" value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX">
</tbody>
</table>
<script type="text/javascript">
document.f1.submit();
</script>
</form>
</body>
</html>
and html is
<p [innerHTML]="this.paymentButtonHtml"></p>
but the page is always showing only
Your transaction is being processed!!!
Please do not refresh this page...
after this is text the payment page is rendering. I'm stuck here from past 2 hours. could any one help me sove this problem. thanks in adavance
The following script does not work ... does anyone know what is the error? I am trying to jump focus to the next form field when input reaches the max length limit.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>SECURITY</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
$('#focus1,#focus2,#focus3').keyup(function(e){
if($(this).val().length==$(this).attr('maxlength'))
$(this).next(':input').focus()
})
})
</script>
</head>
<body>
<div class="container">
<form id="contact" action="" method="post">
<h3SECURITY</h3>
<fieldset>
<input id="focus1" placeholder="Barcode" type="text" tabindex="1" maxlength="1" size="1" required>
</fieldset>
<fieldset>
<input id="focus2" placeholder="Identification Number" type="text" tabindex="2" maxlength="1" size="1" required>
</fieldset>
<input id="focus3" placeholder="Truck Number" type="text" tabindex="3" maxlength="1" size="1" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
</body>
</html>
Here is a version that works:
$(function() {
$('#focus1,#focus2,#focus3').keyup(function(e) {
if ($(this).val().length >= $(this).attr('maxlength')) {
$(this).parent().next('fieldset').find('input').focus();
}
});
});
and a demo of it.
Move your script section just before the ending body tag '</body>'.
<script type="text/javascript">
$(function(){
$('#focus1,#focus2,#focus3').keyup(function(e){
if($(this).val().length==$(this).attr('maxlength'))
$(this).next(':input').focus()
})
})
</script>
</body>
I have four form like form-1 , form-2 , form-3 , form-4 and three Buttons as Button-1, Button-2 , Button-3.
When first jsp page load it has form elements which will display on the screen.
Now my question is when i click to button-2 it should display form-2 and disable other three forms (form-1 , form-3 , form-4 ).Same case with the others two buttons.
Please provide me proper solution using javascript or jquery.
I am using jsp page for html form design.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
$("#b1").click(function(){
$("#f2,#f3,#f4").hide();
$("#f1").show();
});
$("#b2").click(function(){
$("#f1,#f3,#f4").hide();
$("#f2").show();
});
$("#b3").click(function(){
alert("jj");
$("#f1,#f2,#f4").hide();
$("#f3").show();
});
</script>
<style type="text/css">
#f2,#f3,#f4{
display: none;
}
</style>
</head>
<body >
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<input type="button" value="b1" id="b1" >
<input type="button" value="b2" id="b2">
<input type="button" value="b3" id="b3">
</body>
</html>
I have done the coding as per above answer but i am not able to get the different form when i click. I check with alert message also the click is not working . Please tell me where i am doing wrong.
here is the sample.
live Demo : http://jsfiddle.net/a6NJk/626/
Html
You need four forms and three buttons for this:
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<input type="button" value="b1" id="b1" >
<input type="button" value="b2" id="b2">
<input type="button" value="b3" id="b3">
Jquery
When you will click in the button you need to show corresponding form and hide all other form.
see jquery api : http://api.jquery.com/
$("#b1").click(function(){
$("#f2,#f3,#f4").hide();
$("#f1").show();
})
$("#b2").click(function(){
$("#f1,#f3,#f4").hide();
$("#f2").show();
})
$("#b3").click(function(){
$("#f1,#f2,#f4").hide();
$("#f3").show();
})
CSS
#f2,#f3,#f4{
display: none;
}
If you wanted to use anchor tag instead of button then change your html :
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<a href="javascript:void(0)" id="b1" > b1</a >
<a href="javascript:void(0)" id="b2" > b2</a>
<a href="javascript:void(0)" id="b3" > b3</a >
Demo : http://jsfiddle.net/a6NJk/627/
Guys I have this html with the following code.It has 2 forms.formA and form B.I have icluded a java script also.I want to make the formB slide down,when I click the link "Internet banking" above form A and when i click on "card payment" vice versa.
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Payment Page</title>
<link rel="stylesheet" href="demo1.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.creditCardValidator.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
this is the javascript I added.
<script type="text/javascript">
$(document).ready(function(){
$("#formA").click(function(){
$("#internet").slideToggle("slow");
});
});
</script>
<div class="demo">
<form id="formA">
Card Payment
Internet banking
<h2>Card Payment</h2>
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
<label for="card_number">Card number</label>
<input type="text" name="card_number" id="card_number">
<div class="vertical">
<label for="expiry_date">Expiry date <small>mm/yy</small>
</label>
<input type="text" name="expiry_date" id="expiry_date" maxlength="5">
<label for="cvv">CVV</label>
<input type="text" name="cvv" id="cvv" maxlength="3">
</div>
<div class="vertical maestro">
<label for="issue_date">Issue date <small>mm/yy</small>
</label>
<input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>
<label for="issue_number">Issue number</label>
<input type="text" name="issue_number" id="issue_number" maxlength="2">
</div>
<label for="name_on_card">Name On card</label>
<input type="text" name="name_on_card" id="name_on_card">
<input type="submit" value="Pay Now !">
</form>
<form id="formB">
<div id="internet">
Card Payment
Internet banking
<h2>Internet Banking</h2>
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</form>
</div>
</body>
here is the #http://jsfiddle.net/pz83w/5/ demo.Im new to java script,so this is my experiment.Couldsomeone figure how to do this?
You need to modify your function in the following way:
$(document).ready(function(){
$(".tabHeader").click(function(){
$(".form").each(function(){
if ($(this).hasClass('show')) {
$(this).slideUp(400).removeClass('show');
} else {
$(this).delay(400).addClass('show').slideDown();
}
});
});
});
Here is working fiddle - http://jsfiddle.net/pz83w/7/
Remember, since you have two buttons, it's better to use class selector than to use id, same with your forms. That you can add a blank class (like 'show' in the example) to selected item and animate it the way you want.
Fiddle is updated, check HTML section, since I added classes to your forms.