<!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.
Related
I have this text field hidden with HTML hidden code, now when the user enter an invalid input I use javascript to unhide the text field and display an error message, this is what is suppose to happen.
I have seen a lot of css style like
`style.visibility = 'visible';` and `style.display='block';`
But none of them are working for me what happens is that the error text shows for less than a second and then disappears, any one would like to share their thoughts.
This is the complete code for better understanding, it's still not working in firefox and Edge while IE and Chrome wont do anything, in Firefox, it just blinks once on each button press and that about it.
Javascript:
</script>
function validate(){
var firstname = document.getElementById("fn").value;
if (firstname == "") {
document.getElementById("fn").style.visibility = "visible";
document.getElementById("fn").text = "ERROR";
}
}
function init()
{
var formData = document.getElementById("enqForm");
formData.onsubmit = validate;
}
window.onload = init;
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="scripts.js"></script>
</head>
<body>
<form id="enqForm">
<input id="fn" type="text" placeholder="First Name *" />
<input id="sendbutton" type="submit" value="Enquire" />
</form>
</body>
</html>
Instead of changing the style, you can change the form's type attribute.
Using JavaScript - assuming you want to change lnspan to text:
document.getElementById('lnspan').type = 'text';
Style is not the same as the type attribute.
Also there's two id attributes in your <input>, you may want to change that.
**THAT IS THE ANSWER TO YOUR QUESTION**
<html>
<head>
<script>
function newDoc() {
document.getElementById("hid").type="text";
document.getElementById("hid").value="ERROR";
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
<input type="hidden" id="hid" value="">
</body>
</html>
<!--However this makes your error message as text field which is not good.
What you can do is make the Error into embedded into paragraph <p> so the
users cannot change it and it also looks more professional
<!DOCTYPE html>
<html>
<head>
<script>
function newDoc() {
document.getElementById("te").innerHTML="ERROR";
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
<p id="te">
</body>
</html>
Using JavaScript to display a list of what was typed into the textarea element listed below. The values submitted are displayed for a split second, but are removed from the array right after the function is called. Would anyone care to explain why?
HTML
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link rel='stylesheet' type='text/css' href='template.css'>
</head>
<body>
<header id='title'>
<h1></h1>
<h2></h2>
</header>
<div id='main_container'>
<div id='chat'>
<form id='messaging'>
<textarea id='current_msg'></textarea>
<input type='submit' value='send'>
</form>
<ul id='msg_list'>
</ul>
</div>
</div>
<script type='text/javascript' src='client.js'></script>
</body>
</html>
JavaScript
var msgList=[];
var form=document.getElementById('messaging');
var currentMsg=document.getElementById('current_msg');
var chat=document.getElementById('chat');
var ul=document.getElementById('msg_list');
function addText() {
if(currentMsg.value.length>0) {
if(msgList.length>=25) msgList.pop();
msgList.unshift(currentMsg.value);
currentMsg.value='';
console.log(msgList.length);
}
var concat='';
for(var index=0; index<msgList.length; index++) {
concat+='<li>'+msgList[index]+'</li>';
}
ul.innerHTML=concat;
}
if(document.addEventListener) {
form.addEventListener('submit', function() {
addText();
},
false);
}else {
form.attachEvent('onsubmit', function() {
addText();
},
false);
}
You need to understand the effects of having form:
1) User input some values
2) Once Submit the form get submitted , as you have not specified the action it will default to reload the current web page which means all inputs will be cleared
3) The html page get parsed from scratch , the JS code runs but it will only access the new values of inputs which are empty at this point
To make this work you need to remove the form tag
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>
I have the following page:
<!doctype html>
<html lang="en" class="darkBlue">
<head>
</head>
<body>
#RenderSection("Content")
<div class="loading-mask" id="loading-mask" style="display: none;">
<span>Authenticating ...</span>
</div>
<script type="text/javascript">
(function() {
document.getElementsByClassName('form')
.addEventListener("submit", function () {
alert("hi");
document.getElementById("loading-mask").style.display = "block";
}, false);
})();
</script>
</body>
</html>
and this partial page:
#{ Layout = "~/Views/Account/Layout.cshtml"; }
#section content {
<form action="/Account/Login" class="form" method="post">
<button type="submit" class="glossy">Login</button>
</form>
}
I want the loading-mask div to become visible when the submit is pressed. However this does not seem to happen. Could this be because my partial is not yet loaded? Can anyone give me some advice how I could make this work?
Try using
document.getElementsByClassName('form')[0]
instead of
document.getElementsByClassName('form')
That's because getElementsByClassName returns a HTMLCollection object instead of an Element one, like document.getElementById does.
html embedded with javascript
<html>
<head>
<title>Example</title>
<script type ="text/javascript">
have I called this function correctly????
function displayatts()
{
document.getElementById("buttonone").onclick = saysomething;
}
is there something wrong here???
function saysomething()
{
alert("I am 28 years old");
}
</script>
<body>
<input type="button" id="buttonone" value="me" >
</body>
</head>
</html>
Here is the full example.
This will work for sure.
Test it if you want.
Copy and paste the below code into W3Schools test environment, "Edit and Click me" to test.
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type ="text/javascript">
function saysomething()
{
alert("I am 29 years old");
}
function displayatts()
{
document.getElementById("buttonone").onclick = saysomething;
}
</script>
<body onload="displayatts();">
<input type="button" id="buttonone" value="me" >
</body>
</head>
</html>
Your script runs before the document is parsed.
Therefore, getElementById returns null.
Move the <script> to the bottom.
"have I called this function correctly????"
You haven't called the displayatts() function at all. Add the following to the end of your script:
window.onload = displayatts;
That way displayatts() will be called automatically once the page finishes loading. It will, in turn, setup the click handler on your button.
Also, include the closing </head> tag just before the opening <body> tag.
Demo: http://jsfiddle.net/nnnnnn/rxDXa/
window.onload = displayatts;
Paste this code before </body> tag in your page.So you can be sure if element is null or not or the code is try to work before your html element is rendered.
Hope this helps your situation..
<script>
var element = document.getElementById("buttonone");
if(element){
element.setAttribute("onclick", "saysomething();");
}else
{
alert("element null, move the code to bottom or check element exists");
}
</script>