Trying to display a login form which appears after clicking on a button 'Sign In', however the button is not implementing.
Here is what I tried:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#s1").click(function(){
$("form").show();
});
});
</script>
<body>
<form action="f1.py" method="post">
<button id="s1">Sign In</button>
<div>
<label for "lid">ID:</label>
<input type="text" id="logid" required>
</div>
<div>
<label for "psw">Password:</label>
<input type="password" id="psw1" required>
</div>
</form>
</div>
You can try this :
$(document).ready(function()
{
$("#s1").click(function()
{
$("form").toggle(500);
});
});
You didn't hide the form to begin with.
consider this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#s1").click(function(){
$("form").css('display','block');
});
});
</script>
<body>
<button id="s1">Sign in</button>
<form style="display:none;" action="f1.py" method="post">
<button id="s1">Sign In</button>
<div>
<label for "lid">ID:</label>
<input type="text" id="logid" required>
</div>
<div>
<label for "psw">Password:</label>
<input type="password" id="psw1" required>
</div>
</form>
</body>
EDIT: also as mrmonsieur mentioned in comments your closing body tag was wrong
Related
I have to show the a new quote in the input box. The input box is too small.
<form action="https://twitter.com/intent/tweet" method="get" id=usrform>
<div id="input">
<label for=quote>New Quote will appear</label><br>
<input name="text" id="quote" type="text" value="" multiple="multiple">
</div>
<button id=getquotebtn type=button>Get A New Quote</button>
<button id=twitterbtn type=submit>tweet</button>
</form>
<form action="https://twitter.com/intent/tweet" method="get" id=usrform>
<div id="input">
<label for=quote>New Quote will appear</label><br>
<textarea name="text" id="quote" type="text" value="" cols="5" rows="5">your quote is here</textarea>
</div>
<button id=getquotebtn type=button>Get A New Quote</button>
<button id=twitterbtn type=submit>tweet</button>
</form>
Please use textarea instead of the input type text. This is the good practice
For an input that allows a person to type multiple lines, use <textarea>. You can also define the cols and rows the textarea can have, basically creating new lines at that point
Option 1:
$("document").ready(function(){
$("#getquotebtn").click(function(){
setInput("hello world ") //
})
})
function setInput(val){
//alert()
$("#quote").val(val)
$("#quote").css("width", (val.length * 6) +"px"); //dynamically set the width length of input element
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://twitter.com/intent/tweet" method="get" id=usrform>
<div id="input">
<label for=quote>New Quote will appear</label><br>
<input name="text" id="quote" type="text" value="" multiple="multiple">
</div>
<button id=getquotebtn type=button>Get A New Quote</button>
<button id=twitterbtn type=submit>tweet</button>
</form>
Option 2:
$("document").ready(function(){
$("#getquotebtn").click(function(){
setInput("hello world")
})
})
function setInput(val){
$ ("#quote").val(val)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://twitter.com/intent/tweet" method="get" id=usrform>
<div id="input">
<label for=quote>New Quote will appear</label><br>
<textarea name="text" id="quote" type="text" value="" multiple="multiple"> </textarea>
</div>
<button id=getquotebtn type=button>Get A New Quote</button>
<button id=twitterbtn type=submit>tweet</button>
</form>
I validate my form by changing input type to email. I have this form:
<form class="validation" action="#" method="get">
<div class="form-group">
<input type="email" name="email" value="" class="form-control" id="newsletter" placeholder="Your Email">
<button data-toggle="modal" data-target="#answer" type="submit" value="Sign up Now" data-error="Bruh, that email address is invalid" required ><i class="fa fa-angle-double-right"></i></button>
</div>
</form>
If there's a valid email address on submit, I want a modal to open. I'm using Bootstrap to achieve this. The problem is that the modal opens on submit even when the email is not valid. How can I fix this?
Look type email doesn't work properly if you want to validate any input use jQuery
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and an email address.</title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="field">Required, email: </label>
<input class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"> </script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true,
email: true
}
}
});
</script>
</body>
</html>
then you can add the modal for the success
I want to create a form like popup that has a input and a button. When i type in an input Ex.: "good" and click on button it go to the url "good.mydomain.com"
i did this but it doest work
<html>
<form action="firstname.mydomain.com">
Go to URL:<br>
<input type="text" name="firstname" value="">.mydomain.com
<br>
<p>
<input type="submit" value="go">
</p>
</form>
</html>
You could achieve this with jQuery.
The HTML:
<input type="text" id="goTo" name="firstname">.mydomain.com
<input type="submit" id="myButton" value="Go">
Then the jQuery:
$('#myButton').click(function() {
var goTo = $("#goTo").val();
window.location.href = 'http://'+goTo+'.mydomain.com/';
return false;
});
please try below code using javascript.
<html>
<head>
<title>Submit</title>
<script>
function Submit() {
var url = "http://www." + document.getElementById("firstname").value + ".mydomain.com";
window.location.assign(url);
}
</script>
</head>
<body>
Go to URL:<br>
<input type="text" name="firstname" id="firstname" value="">.mydomain.com
<br>
<p>
<input type="button" value="go" onclick="Submit()">
</p>
</body>
</html>
I have 2 divs.
First one is a datepicker div and below it i have a graph.when i try to pick a date, datepicker does not work because of overlapping of these 2 divs. I want to suppress datepicker over graph div.
//here is image
http://tinypic.com/r/1549hlz/8
<div id="cal" name="cal" align="center" style="align: center; float: center; padding- right: 150px;" >
<form name="form" method="post">
<span >From</span> <input type="text" name="date_from" id="date_from" onclick="setSens('date_to', 'max');" readonly="true">
<span >Till</span> <input type="text" name="date_to" id="date_to" onclick="setSens('date_from', 'min');" readonly="true">
<input name="submit" onclick="show6(); update6();" type="submit" id="submit" value="Akım"> <input name="submit" onclick="show6(); update8();" type="submit" id="submit" value="Güç">
</form>
</div>
<div id="graph3" name="graph3" align="center" style="display:none;width:1000px;height: 250px;">Akım-Zaman Grafiği</div><br/><br/><br/>
<script type="text/javascript">
function update6(){
graph drawing.....
}
</script>
<script type="text/javascript">
function update8(){
another graph drawing..... (not important for the case)
}
</script>
<script>
function show6(){
document.getElementById("graph3").style.display = 'block';
document.getElementById("cal").style.display = 'block';
}
</script>
You have not cleared your float.
Put this between both DIV's
<div id="clear" style="clear:both;"></div>
So ...
<div id="cal" name="cal" align="center" style="align: center; float: center; padding- right: 150px;" >
<form name="form" method="post">
<span >From</span> <input type="text" name="date_from" id="date_from" onclick="setSens('date_to', 'max');" readonly="true">
<span >Till</span> <input type="text" name="date_to" id="date_to" onclick="setSens('date_from', 'min');" readonly="true">
<input name="submit" onclick="show6(); update6();" type="submit" id="submit" value="Akım"> <input name="submit" onclick="show6(); update8();" type="submit" id="submit" value="Güç">
</form>
<div id="clear" style="clear:both;"></div>
</div>
<div id="graph3" name="graph3" align="center" style="display:none;width:1000px;height: 250px;">Akım-Zaman Grafiği</div>
<br/><br/><br/>
p.s. No need to state type="text/javascript" is fine. You only need one set of tags for all three scripts.
'<script>
function update6(){
graph drawing.....
}
function update8(){
another graph drawing..... (not important for the case)
}
function show6(){
document.getElementById("graph3").style.display = 'block';
document.getElementById("cal").style.display = 'block';
}
</script>'
I'm trying to get the each section 50% width of the screen but the Coupon Code section isn't working. I'm not sure if it is my HTML or CSS? Just edited to add the rest of my HTML!
Example:
HTML
<div class="CartCode cf">
<div class="CouponCode">
<h3>Coupon Code</h3>
<script type="text/javascript">
lang.EnterCouponCode = "Please enter your coupon code.";
</script>
<form onsubmit="return Cart.CheckCouponCode()" action="http://www.glyndebourneshop.com/cart.php" method="post">
<input type="hidden" name="action" value="applycoupon">
<div class="CouponCode">
<p>To pay for this order using a gift certificate, enter the gift certificate code in the box below and click 'Go'.</p>
<input type="text" name="couponcode" id="couponcode" class="Textbox Field100">
<input type="submit" value="Go" class="btn">
</div>
</form>
</div>
<div class="GiftCertificate">
<h3>Redeem Gift Certificate</h3>
<script type="text/javascript">
lang.EnterGiftCertificateCode = "Please enter your gift certificate code.";
</script>
<form onsubmit="return Cart.CheckGiftCertificateCode()" action="http://www.glyndebourneshop.com/cart.php" method="post">
<input type="hidden" name="action" value="applygiftcertificate">
<div class="GiftCertificateCode">
<p>To pay for this order using a gift certificate, enter the gift certificate code in the box below and click 'Go'.</p>
<input type="text" name="giftcertificatecode" id="giftcertificatecode" class="Textbox">
<input type="submit" value="Go" class="btn">
</div>
</form>
</div>
</div>
CSS
.cf:after {
content:"";
display: table;
clear: both;
}
.CartCode .CouponCode, .CartCode .GiftCertificate {
float: left;
width: 50%;
}
You have 2 classes of CouponCode here:
<div class="CouponCode">//1st coupon code
<h3>Coupon Code</h3>
<script type="text/javascript">
lang.EnterCouponCode = "Please enter your coupon code.";
</script>
<form onsubmit="return Cart.CheckCouponCode()" action="http://www.glyndebourneshop.com/cart.php" method="post">
<input type="hidden" name="action" value="applycoupon">
<div class="CouponCode">//here is the 2nd
<p>To pay for this order using a gift certificate, enter the gift certificate code in the box below and click 'Go'.</p>
<input type="text" name="couponcode" id="couponcode" class="Textbox Field100">
<input type="submit" value="Go" class="btn">
</div>
</form>
</div>
Remove the 2nd class ant it should work, like here:
<div class="CouponCode">
<h3>Coupon Code</h3>
<script type="text/javascript">
lang.EnterCouponCode = "Please enter your coupon code.";
</script>
<form onsubmit="return Cart.CheckCouponCode()" action="http://www.glyndebourneshop.com/cart.php" method="post">
<input type="hidden" name="action" value="applycoupon">
<div>
<p>To pay for this order using a gift certificate, enter the gift certificate code in the box below and click 'Go'.</p>
<input type="text" name="couponcode" id="couponcode" class="Textbox Field100">
<input type="submit" value="Go" class="btn">
</div>
</form>
</div>
Here is the example code.