I am just a beginner.
Is there a code to use two different images as buttons to disable and enable . Most examples use two separate buttons but I need to use a single button with two images: one for off and the other one for on.
$(function() {
$("#Enable").click(function(){
$(".div1 *").prop('disabled',true);
});
$("#Disable").click(function(){
$(".div1 *").prop('disabled',false);
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="css/multitoggle.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script language="javascript" type="text/javascript"></script>
</head>
<body>
<div class="div1">
Name:<input type="text" id="fullname" value="name"/><br>
<br>
<input type="button" id="button1" value="Submit "/>
<div></div>
</div>
<input type="image" src="assets/trans_off.jpg" id="Enable" value="Enable"/>
<input type="image" src="assets/trans_on.jpg"id="Disable" value="Disable"/>
</body>
</html>
Use image sprite that contains two button images. Use background-position to set what part of image to show.
$(document).ready(function() {
var isDisabled = false;
$('.toggle').click(function() {
isDisabled = !isDisabled; // invert value
$('.div1 input').prop('disabled', isDisabled);
});
});
#button1 {
background: url('http://images.sixrevisions.com/2009/05/04-31_slick_clean_30.png') no-repeat -80px -14px;
width: 246px;
height: 48px;
border: none;
}
#button1:disabled {
background-position: -80px -63px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
Name: <input type="text" id="fullname" value="name" /><br>
<br/>
<input type="button" id="button1"/>
<div></div>
</div>
<hr/>
<button class="toggle">Toggle inputs</button>
Related
I want to get the value of an input field and put the value in between a paragraph and a <strong></strong> tag.
$(document).ready() {
$("#submit").on("click", function() {
let inputval = $("#name").val();
$(".inputvalue").val(inputval);
})
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<header>
<h1>Jquery</h1>
</header>
<main>
<section>
<label for="name">Name</label>
<input type="text" id="name">
<input type="submit" id="submit">
<p class="inputvalue">Hallo <strong>here goes the value of the input field</strong></p>
</main>
<link rel="stylesheet" href="/lib/css/styleswebd06.css">
<script src="/lib/jquery.min.js"></script>
<script src="/lib/js/appwebd06.js"></script>
</body>
</html>
i tried to get the value of the input field #name in class .inputvalue
to geht the text hallo inputvalue
Could you try this :
$(document).ready()
{
$("#submit").on("click", function () {
let inputval = $("#name").val();
$(".inputvalue").html('HELLO <strong>' + inputval + '</strong>');
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<header><h1>Jquery</h1></header>
<main>
<section>
<label for="name">Name</label>
<input type="text" id="name">
<input type="submit" id="submit">
<p class="inputvalue">Hallo <strong>here goes the value of the input field</strong></p>
</main>
<link rel="stylesheet" href="/lib/css/styleswebd06.css">
<script src="/lib/jquery.min.js"></script>
<script src="/lib/js/appwebd06.js"></script>
</body>
</html>
$(".inputvalue strong").text(inputvalue);
$(".inputvalue").html('HELLO <strong>' + inputval + '</strong>');
Thank you very much.
This question already has answers here:
move the position of bootstrap datepicker
(5 answers)
bootstrap date picker position
(2 answers)
Closed 2 years ago.
I have these datepickers and I want to move the position of each one to the right of each input instead of being in the left.
I tried so many css solutions but nothing seems to work.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>
</head>
<body>
<div class="form-group col-md-6">
<label for="inputPassword4"> beginning date
</label>
<input dir="rtl" type="text" class="form-control" id="beginning_date" name="beginning_date">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4"> ending date
</label>
<input dir="rtl" type="text" class="form-control" id="ending_date" name="ending_date">
</div>
<script type="text/javascript">
$(function () {
$('#beginning_date').datepicker({
language: 'fr'})
$('#ending_date').datepicker({
language: 'fr'})
});
</script>
</body>
</html>
Just use orientation: 'right'
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>
</head>
<body>
<div class="form-group col-md-6">
<label for="inputPassword4"> beginning date
</label>
<input dir="rtl" type="text" class="form-control" id="beginning_date" name="beginning_date">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4"> ending date
</label>
<input dir="rtl" type="text" class="form-control" id="ending_date" name="ending_date">
</div>
<script type="text/javascript">
$(function() {
$('#beginning_date').datepicker({
language: 'fr',
orientation: 'right'
})
$('#ending_date').datepicker({
language: 'fr',
orientation: 'right'
})
});
</script>
</body>
</html>
We can use oreientation: 'top right' for show the datepicker on top the input instead of the bottom.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>
</head>
<body>
<div class="form-group col-md-6">
<label for="inputPassword4"> beginning date
</label>
<input dir="rtl" type="text" class="form-control" id="beginning_date" name="beginning_date">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4"> ending date
</label>
<input dir="rtl" type="text" class="form-control" id="ending_date" name="ending_date">
</div>
<script type="text/javascript">
$(function() {
$('#beginning_date').datepicker({
language: 'fr',
orientation: 'top right'
})
$('#ending_date').datepicker({
language: 'fr',
orientation: 'top right'
})
});
</script>
</body>
</html>
Change left property value for the div.datepicker element to auto, and set right property value to the previous value of left property.
div.datepicker {
left: auto;
right: 15px;
}
Here is just an example:
<html>
<p><center>Background Color: <input type="text" name="image"> <button>Go</button> </center></p>
<body style="background-color:powderblue;">
<html>
How would I make it so when you press the go button, the text in the input changes the powderblue to whatever is written there?
A script from jquery will do the trick. See below:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<p><center>Background Color: <input type="text" name="image" id="txtcolor">
<button id="btngo">Go</button> </center></p>
<body style="background-color:powderblue;">
</body>
<script>
$("#btngo").click(function(){
var color = $("#txtcolor").val();
$('body').css("background-color", ""+ color +"");
});
</script>
</html>
I want a Calendar on a HTML Input Text.
I don't want HTML5 or other solutions.
I created a possible solution on this JSFiddle.
<head>
<script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js"></script>
</head>
<input type="text" name="date1" id="date1" alt="date" class="IP_calendar" title="d/m/Y">
But I'm looking for other alternatives with other styles.
Any suggestion?
Why not doing this (just checked it) :
$(document).ready(function() {
$("#start_datepicker").datepicker();
$("#end_datepicker").datepicker();
});
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body style="font-size:62.5%;">
<form action="sample.php" method="post">
Start Date: <input type="text" name="startdate" id="start_datepicker"/>
End Date: <input type="text" name="enddate" id="end_datepicker"/>
</form>
</body>
</html>
Is there any cross-browser way of getting what the password masking character is in <input type="password"> fields, or, barring that, to set it?
For example, Chrome & Firefox & Safari on OSX use •, while Safari on iOS 7 uses ●. Perhaps other browsers might use the old-fashioned * - I don't know.
It seems like this was asked previously as well. Check out change password char in HTML which states it can't be done.
Quick search shows that it can be done via JS by faking it and can't be done on a regular password field since it's defined by the browser. Refer to http://www.htmlforums.com/showpost.php?p=655392&postcount=4
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var k=0;
var df;
window.onload=function() {
df=document.forms[0];
df[1].onkeyup=function() {
df[0].value+=df[1].value.charAt(k);
k++;
for(c=0;c<df[1].value.length;c++) {
df[1].value=df[1].value.replace(df[1].value.charAt(c),'#');
}
}
}
</script>
</head>
<body>
<noscript>
<div>
Without javascript enabled you will be unable to login
</div>
</noscript>
<form action="http://www.google.com/">
<div>
<input type="hidden" name="password">
<input type="text">
<input type="submit" value="submit password">
</div>
</form>
</body>
</html>
this is a full implementation with styling and handling . i hope you like it :)
function showHidePassword(passSelector, textSelector) {
if ($(passSelector).hasClass("hidden")) {
$(passSelector).val($(textSelector).val());
$(textSelector).addClass("hidden");
$(passSelector).toggleClass("hidden");
}
else {
$(textSelector).val($(passSelector).val());
$(passSelector).addClass("hidden");
$(textSelector).toggleClass("hidden");
}
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class='card'>
<div class='card-body'>
<div class='input-group'>
<div class='input-group-prepend'>
<span class='input-group-text'>
<i class='fa fa-key'></i>
</span>
</div>
<input type='password' id='password' class='form-control'/>
<input type='text' class='form-control hidden' id='passwordContent' disabled/>
<div class='input-group-append'><span class='input-group-text' onclick='showHidePassword("#password","#passwordContent")'><i class='fa fa-eye'></i></span></div>
</div>
</div>
</div>