Here is a simple code which takes input and print it on the same page. But it is not working when I click on button. Please help regarding this.
<html>
<head>
<script>
function changeHTML() {
$("#withjQuery").html($("#theInput").val());
}
</script>
<body>
<input type='text' id='theInput' value='Write here' />
<input type='button' onClick='changeHTML();' value='See what you wrote with jQuery.html'/>
<div id="withjQuery"></div>
</body>
</head>
You do not have jQuery library included in the page
Add
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
ex
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function changeHTML() {
$("#withjQuery").html($("#theInput").val());
}
</script>
</head>
<body>
<input type='text' id='theInput' value='Write here' />
<input type='button' onClick='changeHTML();' value='See what you wrote with jQuery.html'/>
<div id="withjQuery"></div>
</body>
</html>
Demo: Fiddle
Related
I was asked to develop a web page without a mouse.
The keyboard cursor must be in the input area(example: <input id="input-label" type="text">) immediately when the page is changed.
I tried,
document.querySelector("#input-area").focus();
and
document.querySelector("#input-area").select();
It works with buttons, but does not work in DOMContentLoaded.
document.addEventListener("DOMContentLoaded", function(){
document.querySelector("#input-area").select();
});
How can I solve it?
try this, call it when dom is ready
$(document).ready(function () {
$("#input-area").focus();
});
OR
<input id="input-area" autofocus="autofocus" />
OR
$(function() {
$("#input-area").focus();
});
Try this code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#myAnchor').click(function() {
$('#mustfocus').focus();
});
});
</script>
</head>
<body>
<input type="button" id="myAnchor" value="Get focus">
<input type="text" id="mustfocus"/>
</body>
</html>
How about this one which triggers only during DOM is ready:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#mustfocus').focus();
});
</script>
</head>
<body>
<input type="button" id="myAnchor" value="Get focus">
<input type="text" id="mustfocus"/>
</body>
</html>
i am trying to pass the values from one html page to another html page but i am getting some errors..
below is my html page one code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function first() {
location.href = "onclick2.html";
}
</script>
</head>
<body>
<button onclick="first()" >Home</button>
<form action="onclick2.html" method="post">
<input type="text" name="sender" />
<input type="submit" value="send"/>
</form>
</body>
</html>
below is my html page 2 code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function first() {
location.href = "onclick.html";
}
</script>
</head>
<body>
<button onclick="first()">Home2</button>
<form action="onclick.html" method="get">
<input type="text" name="reciver" />
</body>
you can pass value in url and transfer it as given below :
location.href = "http://www.domainname.com/login.html?FirstName=admin&LastName=admin"
I am trying to use ajax but it is not working when I clicks the button it does not show the alert box on browser.
<html>
<head>
<title>Ajax</title>
<script scr="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
Name: <input type="text" id="data">
<input type="submit" id="sub" value="save">
<script>
$(document).ready(function () {
$('#sub').click(function () {
alert('ok');
});
});
</script>
</body>
</html>
Please try the below code
<html>
<head>
<title>Ajax</title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$('#sub').click(function(){
alert('ok');
});
});
</script>
</head>
<body>
Name: <input type="text" id="data" >
<input type="submit" id="sub" value="save">
</body>
</html>
1. problem with the jquery path
2. always put the scripts in the head section
I have two html pages named order.html,check.html and test.js(included in both html files)
When i click on submit button in order.html,amount field value from order.html should get updated/populate into cost field of check.html.
Below is the code i am using but its not working,can someone let me know whats wrong??
order.html
<html>
<head>
<script language="javascript" type="text/javascript" src="test.js"></script>
</head>
<body>
<form name="order" action="check.html" method="get">
name:<input type ="text" id="amount" name="amount">
<input type="submit" value="finish" onclick="cost()" >
</form>
</body>
</html>
check.html
<head>
<script language="javascript" type="text/javascript" src="test.js"></script>
</head>
<body>
<form name="check" action="confirm.html" method="get">
<input type="text" name="cost" id="cost" readonly="readonly">
</form>
</body>
</html>
test.js
function cost(){
var amount= $("#amount").val();
jQuery.load("check.html",function(){
$("#cost").html(amount);
});
}
Your order.html input type submit should be input type button.
Change your test.js to
function cost(){
var amount= $("#amount").val();
$('body').load("check.html",function(){
$("#cost").val(amount);
});
}
And input type="button"
Try this:
order.html:
<html>
<head>
<script language="javascript" type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="main_div">
<form name="order" action="check.html" method="get">
name:<input type="text" id="amount" name="amount"> <input
type="button" value="finish" id="submit_btn">
</form>
</div>
</body>
</html>
Jquery:
$(document).ready(function() {
$('#submit_btn').click(function() {
var amount = $("#amount").val();
$('#main_div').load("check.html", function() {
$('#main_div').find("#cost").val(amount);
});
});
});
I want to replace "ı,ğ,ş" with "i,g,s".
This is my code but i cant find my fault.
And i have to do it with oblur event.
<html>
<head>
<script type="text/javascript">
function replacer()
{
var x=document.getElementById("fname");
x.value=x.value.replace("ı","i");
x.value=x.value.replace("ş","s");
x.value=x.value.replace("ğ","g");
}
</script>
</head>
<body>
Name :<input type="text" id="fname" onblur="replacer()" />
</body>
</html>