When I'm running this code it is not showing me the message which I want to display (i.e: res).Suppose I'm giving an input "$code$".Can anyone just help me out?
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>Enter a sample message</h1>
<form>
<input type="text" name="a" id="a">
<button onclick="parse()">submit</button>
<p id="a"></p>
</form>
<script>
function parse(){
var msg=document.getElementById("a").innerHTML;
var res=msg.replace("$code$","1101");
document.getElementById("a").innerHTML=res;//this is to print res.
}
</script>
</body>
</html>
Two elements can't have the same ID. Further, an input element's value can not be obtained using the innerHTML property. Also, on clicking the submit button, the page will reload since the form get's submitted. To prevent that, call the function parse in an onsubmit on the <form> tag, and return false from the function.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1>Enter a sample message</h1>
<form onsubmit="return parse();">
<input type="text" name="a" id="a">
<button type="submit">submit</button>
<p id="b"></p>
</form>
<script>
function parse(){
var msg = document.getElementById("a").value;
document.getElementById("b").innerHTML = msg;
return false;
}
</script>
</body>
</html>
Check this:
<form>
<input type="text" name="a" class="input_field" id="a">
<button type="button" onclick="parse()">submit</button>
<p id="a"></p>
</form>
<script>
function parse(){
var msg=document.getElementById("a").innerHTML;
var form = document.getElementsByTagName("form")[0]
msg = form.getElementsByClassName("input_field")[0].value;//this is to print res.
}
</script>
I added type="button" to the button to prevent the form from reloading the page
Related
I am new to JS , and i was creating a form where i would click the save button and the entered text would shown in the page , but when i click the save button the change is shown for a sec and disappears.
Source Code :
function save(){
save_element = document.getElementById("input_element").value;
console.log(save_element);
document.getElementById("saved_text").innerText += save_element;
}
<html>
<head>
<title>
Practising JS
</title>
</head>
<body>
<form action="">
Name: <input type="text" placeholder="Enter a Text" id = "input_element">
<br>
<button id = "ds" onclick="save()">SAVE</button>
<h1 id = "saved_text"></h1>
<script src="./index.js"></script>
</form>
</body>
</html>
The default behaviour of the <form> is to submit the form data to server. You need to prevent this default behaviour by using preventDefault.
function save(event) {
event.preventDefault(); // Skip default behaviour
const save_element = document.getElementById("input_element").value;
console.log(save_element);
document.getElementById("saved_text").innerText += save_element;
}
<html>
<head>
<title>
Practising JS
</title>
</head>
<body>
<form action="">
Name: <input type="text" placeholder="Enter a Text" id="input_element">
<br>
<button id="ds" onclick="save(event)">SAVE</button>
<h1 id="saved_text"></h1>
<script src="./index.js"></script>
</form>
</body>
</html>
<html>
<head>
<title>
Practising JS
</title>
</head>
<body>
<form action="#">
Name: <input type="text" placeholder="Enter a Text" id = "input_element">
<br>
<button id = "ds" onclick="save()">SAVE</button>
<h1 id = "saved_text"></h1>
<script src="./index.js"></script>
</form>
</body>
</html>
Try <form action="#">, by using this your page will not be reloaded. Default behaviour of <form action=""> is submitting, so it will reload the page.
Ok the change disappears because the page is reloading to something blank
<form action="">
change to a hash like
<form action="#">
Give your Form an ID .then on you click event prevent default .... like this
let form = document.getElementById("MyForm");
//Custom Event ...
form.addEventListener('submit', (e) => {
// on form submission, prevent default
e.preventDefault();
//your other Code to change the text
});
This will prevent the form from making your page reload
The button has the default type submit and is trying to submit the form.
So if you define the button as button. It works.
<button type="button" id="ds" onclick="save()">SAVE</button>
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 keep getting result is undefined but alert outputs result!
A bit puuzzling, the same thing happens in Chrome and IE.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="frm1" action="#" method="post">
Yammer ID: <input type="text" name="y_id"><br><br>
<input type="submit" onclick="myFunction()" value="Submit">
</form>
<p id="demo">uuu</p>
<script>
function myFunction() {
frm_i=document.getElementById("frm1");
result=frm_i.elements[0].value;
alert (result);
}
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
I put:
document.getElementById("demo").innerHTML = result;
inside the function and i do not get an error, the uuu briefly changes to the input text then just as quickly changes back to uuu. But I get no error message this way.
Add var to frm_i and result and place:
document.getElementById('demo').innerHTML = result
Inside the function. It was out of scope.
Added a test server to verify success and changed #demo to an <output>
In order to prevent the form from refreshing after submitting, you can add the target attribute to the <form>:
<form id="frm1" action="http://httpbin.org/post" method="post" target='ifm'>
The value of target can be any location you have control over and '_blank' which is a new page (just like an anchor). If you prefer that the submit goes nowhere, then use:
target='#/'
In this Snippet, I submitted to the test server then redirected the response to a blank iframe by using the iframe's name attribute.
SNIPPET
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="frm1" action="http://httpbin.org/post" method="post" target='ifm'>
Yammer ID: <input type="text" name="y_id"><br><br>
<input type="submit" onclick="myFunction()" value="Submit">
<output id='demo'></output>
</form>
<iframe name='ifm' src='about:blank'></iframe>
<script>
function myFunction() {
var frm_i = document.getElementById("frm1");
var result = frm_i.elements[0].value;
alert(result);
document.getElementById("demo").innerHTML = result;
}
</script>
</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 must not understand how to change the content of my <div> tag.
Here is my html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="simple.js"></script>
<title>simple</title>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>
Here is my .js file:
function myFunction() {
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
}
When I click the button the alert pops up but the html does not change to "Hello World". It just stays the same :(
What am I doing wrong here.
Update: Thanks everyone! Here is what I have working now:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
</head>
<body>
<div id="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" id="myurl" size="100" /></p>
</form>
<button id='clickme'>Click me</button>
<button id='noclickme'>No Click me</button>
</div>
<script src="simple.js"></script>
</body>
</html>
My .js file:
function say_something(s) {
document.getElementById("results").innerHTML = s;
}
document.getElementById("clickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Hello World [" + url + "]");
});
document.getElementById("noclickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Goodbye [" + url + "]");
});
A button's default behaviour is to submit the form. In this case, the action being blank, it will try to submit to the current URL. You need to prevent that from happening. Also it's bad form to put Javascript inside your HTML like that - use addEventListener instead:
document.querySelector("#results button").addEventListener("click", function(e) {
e.preventDefault();
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
});
Note you'll need to include your script before the </body> rather than in <head> when using this method, or use the DOMContentLoaded event listener.
Example jsFiddle
The reason is the form label.
when you click the button, the form will take an action,but you did not have a certified action, so the chrome will take the defautl action,ie reload the html.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
<script src="simple.js"></script>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>