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>
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.
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>
I am trying to store the input values in JSON object and binding the JSON object to Span. its not working.
Direct ng-repeat is working, but if i bind it from JSON objeci its not working.
My code:
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"> </script>
<script type="text/javascript">
var JSONObject = {"name":"{{yourName}}"
};
document.getElementById("jname").innerHTML=JSONObject.name;
</script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
<p>
Name: <span id="jname"></span>
</p>
</div>
</body>
</html>
In header its working, in span i am binding from JSON its not working.
I tried in jsbin the same code its working.but if i create my own html its not working.
Help me.
Thanks in Advance,
Stephen.L
Move your code to the end of the body. document.getElementById("jname").innerHTML=JSONObject.name; is executing before the span is added to the DOM...
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"> </script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
<p>
Name: <span id="jname"></span>
</p>
</div>
<script type="text/javascript">
var JSONObject = { "name":"{{yourName}}" };
document.getElementById("jname").innerHTML=JSONObject.name;
</script>
</body>
</html>
JSBin... http://jsbin.com/qeseyibi/1/edit?html,output
I'm interested if it's possible to change the default validation message for a placeholder. Must be a way to made a custom message.
My form:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Placeholder</title>
</head>
<body>
<form>
<input type="text" id="email" maxlength="35" placeholder="E-mail" required>
<button type="submit">Ok</button>
</form>
</body>
</html>
I've tried with JavaScript but the message apears everytime:
<script type="text/javascript">
document.getElementById('email').setCustomValidity('Please enter your e-mail!');
</script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
</head>
<body>
<form>
<input type="text" id="email" maxlength="35" placeholder="E-mail" required>
<button type="submit">Ok</button>
</form>
<script>
$(document).ready(function(){
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++){
elements[i].oninvalid = function(e){
e.target.setCustomValidity("");
if (!e.target.validity.valid){
e.target.setCustomValidity("This field cannot be left blank");
}
};
elements[i].oninput = function(e){
e.target.setCustomValidity("");
};
}
})
</script>
</body>
</html>
I have web page in which i have input field when i enter any data in textfield screens slides up i want to stop this slides,i have searches some people say it is by default in ipad you can not fix it any idea how tackle this issue.
here is my code
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>formDemo.html</title>
<meta charset = "UTF-8" />
<script>
function test(){
alert("Working");
window.scrollTo(0,600);
}
</script>
</head>
<body>
<h1>Form Demo</h1>
<form>
<label for="name">Text Input:</label>
<input type="text" onKeyPress="test()" name="name" id="name" value="" style="margin:400px 0 0 0;" />
</form>
</body>
</html>
Disabled scrolling with this:
<script type="text/javascript">
$(document).ready(function() {
document.ontouchmove = function(e){
e.preventDefault();
}
});
</script>