In all the codes that I wrote, the button does not work. The site simply reloads and that's it. Maybe this is an error not in the code, but in something else, please help
This is my code
<!DOCTYPE html>
<html lang="'en">
<head>
<title>Hello</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('form').onsubmit = function() {
const name = document.querySelectr('#name').value;
alert(`Hello, ${name}!`);
};
});
</script>
</head>
<body>
<h1>Hello!</h1>
<form>
<input autofocus id="name" placeholder="Name" type="text">
<input type="submit">
</form>
</body>
</html>
By default, a submit button will reload the page to send a request. This can be prevented with e.preventDefault(). Here's an example with your code:
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('form').onsubmit = function(e) {
e.preventDefault();
const name = document.querySelector('#name').value;
alert(`Hello, ${name}!`);
};
});
Related
I what to load the b.js file to HTML with button and function. when user type "yes" and click on "Ok" button, "b.js" must load in page (not open in new window or new tab)
what code I must to use in ??????????? place to solve my problem?
here is the code:
HOME.html
<html>
<head>
</head>
<body>
<form name="load">yes OR no<input name="id" type="text">
<input type="button" value="OK" onClick="my(document.forms.load)">
<script>
function my(form) {
if (form.id.value=="yes") {
?????????????
} else {
alert("NO")
}
}
</script>
</body>
</html>
b.js
document.write(`
<html>
<h1> Load the HTML code</h1>
</html>
`);
I tried to use <script src="b.js"></script> but this code immediately load "b.js" that I dont what this
I tried to use
var scriptTag = document.createElement('script');
scriptTag.setAttribute('src','b.js');
document.head.appendChild(scriptTag)
but not working
I tried to use
document.getElementsByTagName('body')[0].innerHTML += "<script src='b.js'></script>";
but this code not working
what can I do to load the "b.js" file after click on button?
thanks :)
Is this what you're looking gor?
function my(form) {
const loadHTML = () => {
const scriptB = document.createElement('script')
scriptB.setAttribute('src','b.js')
console.log(scriptB)
document.write(`
<h1>Load the HTML code</h1>
${scriptB.outerHTML}
`);
}
if (form.id.value==="yes") {
loadHTML()
} else {
alert("NO")
}
}
<html>
<head>
</head>
<body>
<form name="load">
<h2>YES or NO</h2>
<input name="id" type="text">
<input type="button" value="OK" onClick="my(document.forms.load)">
</form>
</body>
</html>
As the following, in codeigniter view, I want to call twice js events- 'onchange' and 'onblur' function
Is it possible? How can I call?
Please see below code.
<html>
<bods >
<input type="text" value="here is a text field" onblur="alert('Blur Event!')" onchange="alert('Change Event!')" >
</body>
</html>
<!DOCTYPE html>
<html>
<body>
Enter your name: <input type="text" id="fname" onchange="alert('ok')" onblur="blurfunction()">
<script>
function blurfunction() {
var x = document.getElementById("fname");
x.value = x.value.toLowerCase();
}
function keyupcall(){
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
Both the methods will called at the same time, I am not sure for what purpose you required it.
But you can write both the method as following.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").change(function(){
alert("The text has been changed.");
});
$("input").blur(function(){
alert("This input field has lost its focus.");
});
});
</script>
</head>
<body>
<input type="text">
<p>Write something in the input field, and then click outside the field.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="date_time.js"></script>
</head>
<body>
<input id="input"><br>What is the number?</input>
<button type="button" onclick="getFunction()">Submit</button>
<script>
function getFunction () {
var x = document.getElementById('input').value;
if (x == 32) {
window.alert("Right answer!");
}
else {
window.alert("Try again.");
}
}
</script>
</body>
</html>
So I want to proceed or load a new HTML page when the user clicks on the "submit" button and the input is correct. Any ideas? Maybe JS DOM could help...
First you need to add a form tag, and give it a name, id, and action. The action should point to your desired page.
<form name="formname" id="formid" action="mypage.html">
Your javascript, where it is true, should simple use:
document.getElementById("formid").submit();
And it will direct to the action page only when true.
I am new using jQuery. in my 1st program of jQuery, I wanted to print a table of a provided number and its answer is right. but the problem I am facing the output just flashing and goes blank. if I use an alert function, the output stays till I click on "OK".
Here is my code..
<html>
<head>
<title>Get Table</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function funtable_js(){
$("button").click(function funtable_js(){
var numm=$("#num").val();
if(numm!=0)
{
for($i=1;$i<=10;$i++)
{
var tbl=numm*$i;
var ttbl=$("#out").append("<tr><td>"+tbl+"</td></tr></br>");
}
alert("Hello World");
}
else
{
alert("Wrong Input. Try Again With Valid Number");
}
});
});
</script>
</head>
<body>
<form name="table" method="">
<tr><td><input type="text" name="num" id="num"/><button onClick="funtable_js()"> Get Table </button></td></tr>
<table id="out">
</table>
</form>
</body>
</html>
Please help... Thank You so much to all.
It is because the button is in a form and when the button is clicked the form is getting submitted which refreshes the form.
You can prevent the default action of the click event in the click handler to solve teh problem
<button>Get Table</button>
then
$(document).ready(function funtable_js() {
$("button").click(function (e) {
e.preventDefault()
var numm = $("#num").val();
if (numm != 0) {
for ($i = 1; $i <= 10; $i++) {
var tbl = numm * $i;
var ttbl = $("#out").append("<tr><td>" + tbl + "</td></tr></br>");
}
alert("Hello World");
} else {
alert("Wrong Input. Try Again With Valid Number");
}
});
});
Demo: Fiddle
Note: Since you are using a jQuery event handler there is no need to have an onclick handler added to the element markup, even if you add it it won't work because the method funtable_js is not in the global scope.
another solution is to change the type of the button to button like
<button type="button">Get Table</button>
Demo: Fiddle
Hi you are not using any submission method on your form because its the Javascript that handles your button action. So just delete this two lines on your code:
<form name="table" method="">
</form>
And edit this line FROM:
<tr><td><input type="text" name="num" id="num"/><button onClick="funtable_js()"> Get Table </button></td></tr>
TO:
<table><tr><td><input type="text" name="num" id="num"/><button onClick="funtable_js()"> Get Table </button></td></tr></table>
Now try your code. It should now work. Goodluck.
It has nothing to do with jQuery, it's your HTML is incomplete. The button should be changed to this:
<button type="button"> Get Table </button>
there's no need to add the onclick event because you've added it in the document ready event.
button's default behavior is "submit", thus your page refreshes soon after you finished building the table.
You need to use <input type='button'> instead of <button> tag otherwise form will be submitted to the server each time you perform a button click.
Try This: JS Fiddle Demo
<html>
<head>
<title>Get Table</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function (){
$("#btnSubmit").click(function (){
var numm=$("#num").val();
if(numm!=0)
{
for($i=1;$i<=10;$i++)
{
var tbl=numm*$i;
var ttbl=$("#out").append("<tr><td>"+tbl+"</td></tr>");
}
//alert("Hello World");
}
else
{
alert("Wrong Input. Try Again With Valid Number");
}
});
});
</script>
</head>
<body>
<form name="table">
<table><tr><td><input type="text" name="num" id="num"/><input type="button" id="btnSubmit" value="Submit"/></td></tr></table></form>
<table id="out">
</table>
</body>
</html>
Just Remove the Form Tag. Your Problem will be solved by then.
<html>
<head>
<title>Get Table</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function funtable_js(){
$("button").click(function funtable_js(){
var numm=$("#num").val();
if(numm!=0)
{
for($i=1;$i<=10;$i++)
{
var tbl=numm*$i;
var ttbl=$("#out").append("<tr><td>"+tbl+"</td></tr></br>");
}
alert("Hello World");
}
else
{
alert("Wrong Input. Try Again With Valid Number");
}
});
});
</script>
</head>
<body>
<tr><td><input type="text" name="num" id="num"/><button onClick="funtable_js()"> Get Table </button></td></tr>
<table id="out">
</table>
</body>
</html>
When I use this code the console.log and the value in the field disappear right away.
window.onload = bereken;
function bereken(){
var knop = document.getElementById('berekenKnop').onclick = function (){
var aantalKm = document.getElementById('bereken');
console.log(aantalKm.value);
};
}
How can I prevent that from happening. Or what am I doing wrong?
The final goal will be to append the result of a calculation by the value of the field into another field.
edit:
<html>
<head>
<script src="bereken.js"></script>
</head>
<body>
<form id="berekenForm">
Bereken: <input type="text" name="bereken" id="bereken"/><br />
<input type="submit" value="Bereken" id="berekenKnop"/>
</form>
</body>
</html>
The submit button is doing its default task. i.e. submitting the form. Try handling that.
Value in the field 'bereken' not disappearing.See the code below. If this is not the expected answer, please, Update the question with question in details:
<html>
<head>
<script type="text/javascript">
window.onload = bereken;
function bereken(){
var knop = document.getElementById('berekenKnop').onclick = function (){
var aantalKm = document.getElementById('bereken');
console.log(aantalKm.value);
};
}
</script>
</head>
<body>
<div id="berekenKnop">
Click Here to console value
</div><br/>
<input type="text" value=" bereken value" id="bereken" />
</body>
</html>