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>
Related
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
As described in the problem
I create two buttons. The one is used to add forms,the other one is used to submit data.However, after inputting data when i clicked on the button of submit,it didn't work
<%# page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GA'S WEB APPLY</title>
</head>
<body>
<script>var i=1</script>
<p>test is ing!</p>
<hr>
<div>
<form action="/webTest/TestWeb" method="post">
<input type=button onclick="document.body.insertAdjacentHTML('beforeEnd','<input type=text name='+i+' value='+i+++'> ')" value=add />
<input type="submit" value="submit" />
</form>
</div>
</body>
</html>
Problem in your code is with '' quotes as well as ,whenever you append new input it appear out of <form></form> tag , so whenever you submit your form that value doesn't passed to your backened page and will always return null. Instead do like below :
var i = 1
$(document).ready(function() {
//location to add new inputs
var to_Add_at = $(".inputs");
var add_button = $("input[name='add']");
//on click of button
$(add_button).click(function(e) {
e.preventDefault();
$(to_Add_at).append('<input type=text name='+i+' value='+i++ +'>'); //add input box
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form action="/webTest/TestWeb" method="post">
<input type="button" value="add" name="add" />
<div class="inputs"></div>
<input type="submit" value="submit" />
</form>
As I can not see the backend data or anything else besides the code. I would say
1. File location wrong?
2. Page language should be javascript
3. Add quatations "" around value = add
I have a form at the top of my html page which I want to have disappear after I submit the form. My code (below), while it temporarily hides the form, insists on the forming then becoming visible again. Any help would be appreciated.
Thanks,
Owen Walker
<!DOCTYPE html>
<html>
<body>
<form id="form" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<div id="first_div" style="visibility:hidden">Second</div>
<script>
function myFunction() {
alert("The form was submitted");
document.getElementById("form" ).style.display = "none";
document.getElementById("first_div" ).style.visibility = "visible";
alert("after");
}
</script>
</body>
</html>
You're not doing anything to prevent your form from being submitted and reloading the page. Change the form line to:
<form id="form" onsubmit="return myFunction()">
and after the alert in your function add:
return false;
I would suggest you to use JQuery as it is a powerful tool for doing this type of stuffs without hassle...
well you can do it in this way
<!DOCTYPE html>
<html>
<body>
<form id="form" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" id="submit" value="Submit">
</form>
<div id="first_div" style="visibility:hidden">Second</div>
<script>
// using JQuery
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault();
$("#form").submit();
$("#form").hide();
alert("Your form was successfully submitted");
});
});
</script>
</body>
</html>
`
note the use of preventDefault() to preventing it from submitting the form when you click submit.
So, I want the user to be able to add a new paragraph when he/she clicks the Add button. I can see it's working when I click the button but after that the page refreshes itself, and then the supposedly new paragraph disappears.
Here's the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Item Lister</title>
<link rel="stylesheet" type="text/css" href="default.css"\>
</head>
<body>
<h1>ITEM LIST</h1>
<div id="container">
<ol>
</ol>
</div>
</br>
<form>
<input id="txtbox" type="text" name="txt"/>
</br>
<button id="add_btn" type="submit" name="add"/>Add</button>
</form>
<script src="myScript.js"></script>
</body>
</html>
And here's its JS code:
add_btn.onclick = function(){
var msg;
msg = document.getElementById("txtbox").value;
var newListElement = document.createElement("li");
var liText = document.createTextNode(msg);
newListElement.appendChild(liText);
document.getElementById("container").getElementsByTagName('ol')[0].appendChild(newListElement);
};
How do I add the new element after clicking the button?
Thanks.
Remove type="submit"
Edit : Turns out that just removing the submit attribute is not enough.
It should be changed to : type="button" :
<button id="add_btn" type="button" name="add"/>Add</button>
You have in fact at least two options:
Remove type="submit" as Bulent Vural already mentioned
Or return false from your onClick handler
So this should be changing the page so that when they click the button it shows a total of everything they have selected in the form, but it is not doing anything. It seems that it is not even running the script at all, and I have no idea what is up.
...more form stuff up here
<button type="button" onclick="total(this.form)">Get my Total</button>
<p id="subtotal"></p>
<input type="submit">
</form>
<script>
function total(form)
{
var SynCr= form.Synth.value;
document.getElementById("subtotal").innerHTML="You have ordered: <br>"+SynCr+" Synth");
}
</script>
Your problem is onclick="total(this.form)". When the handler is called this refers to the button, which does not have a form as a member.
Try instead:
onclick="total(document.getElementById('formId'))"
First of all:
this.form does not return the parent form.
Second: you have a syntax error in: document.getElementById("subtotal").innerHTML="You have ordered: <br>"+SynCr+" Synth"); the last ) should not be there.
The following is sinppet of code shows you in some what how to debug your code and it works:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form id="hgg">
<input type="text" name="Synth" value="" />
<button type="button" onclick="total(this)">Get my Total</button>
</form>
<div id="subtotal">
<p>5518</p>
</div>
<script>
function total(button)
{
form1 = button.parentNode;
alert(form1.Synth.value)
/*alert(p.id)
alert("555");*/
SynCr= form1.Synth.value;
alert(SynCr)
k = document.getElementById("subtotal");
k.innerHTML = "You have ordered: <br>"+SynCr+"Synth";
}
</script>
</body>
</html>
Look at this online demo: http://jsbin.com/voruzumi/1/