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
Related
In the given code , I am trying to print the message but after taking input its not printing any message.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<form onsubmit="return Ak()">
<input type="text" name="abinash" placeholder="abinash" required id="q"><br><br>
<input type="submit" name="submit" value="submit">
<div id="w"></div>
</form>
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password"+y;
}
</script>
</body>
</html>
Pressing the submit button will refresh the page.
event.preventDefault(); use this keyword.
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password"+y;
event.preventDefault();
}
</script>
It was working, but after submitting form, all of content disappeared. You need to add event.preventDefault(); to onsubmit attribute of form:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<form onsubmit="event.preventDefault(); return Ak()">
<input type="text" name="abinash" placeholder="abinash" required id="q"><br><br>
<input type="submit" name="submit" value="submit">
<div id="w"></div>
</form>
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password"+y;
}
</script>
</body>
</html>
event.preventDefault()
It is working, it's just that when you click that submit button the page reloads. I tried it out, and you can fix it by adding e.preventDefault(); to your function, and put (e) as the arg in the function, like so:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<form onsubmit="event.preventDefault(); return Ak()">
<input type="text" name="abinash" placeholder="abinash" required id="q"><br><br>
<input type="submit" name="submit" value="submit">
<div id="w"></div>
</form>
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password: "+y;
}
</script>
</body>
</html>
Your code works, but the message will disappear because the form is successfully submitted. If you want it to stay on the screen, just return false from the Ak() function:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
</head>
<body>
<form onsubmit="return Ak()">
<input type="text" name="abinash" placeholder="abinash" required id="q"><br><br>
<input type="submit" name="submit" value="submit">
<div id="w"></div>
</form>
<script type="text/javascript">
function Ak()
{
var y=document.getElementById("q").value;
document.getElementById("w").innerHTML="You have typed this password"+y;
return false;
}
</script>
</body>
</html>
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>
Although I know a lot about these languages now such as arrays and functions, I'm having a basic problem to getting this JavaScript to run, here's the code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="submit" value="submit" onclick="click()" />
<script>
function click() {
alert("hey");
}
</script>
</body>
</html>
You're running into this problem: javascript function name cannot set as click?
You can fix this by changing the function name to something else like function myClick
<head>
</head>
<body>
<input type="submit" value="submit" onclick="myClick()" />
<script>
function myClick() {
alert("hey");
}
</script>
</body>
</html>
yes,like the comment above. you should use a different name instead of click()
function submit() {
alert("hey"); }
<html>
<head>
</head>
<body>
<input type="submit" value="submit" onclick="submit()" />
</body>
</html>
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);
});
});
});
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