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.
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>
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
My code:
<html> <body>
<p>When you submit the form, a function is triggered which alerts sometext.</p>
<form id="abc" action="https://www.w3schools.com/action_page.php"
onsubmit="myFunction()"> Enter name: <input type="text"
name="fname"> <input type="submit" value="Submit"> </form>
<script> function myFunction() {
alert("The form was submitted"); } </script>
</body> </html>
It run ok, but i want after submit will show thankyou change form id, don't alert, it display text "thank you" like picture: result
My jsfiddle: https://jsfiddle.net/nguoicovan/adpjq8bc/
Use Ajax Jquery
<html> <body>
<p>When you submit the form, a function is triggered which alerts sometext.</p>
<form id="abc" action="https://www.w3schools.com/action_page.php"
onsubmit="myFunction()"> Enter name: <input type="text"
name="fname"> <input type="submit" value="Submit"> </form>
<script> function myFunction() {
alert("The form was submitted"); } </script>
</body>
<script> $("#abc").submit(function(e){
e.preventDefault();
$.get("https://www.w3schools.com/action_page.php",$("#abc").serialize(),function(data){alert("Thank you for submitting ")})
})</script> </html>
don't forget to include jquery before you use it
<html>
<body>
<div id="app">
<p>When you submit the form, a function is triggered which alerts some text.</p>
<form id="abc" action="https://www.w3schools.com/action_page.php">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</div>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script type="text/javascript">
$('form#abc').on('submit', function(event){
event.preventDefault();
var formData = $("form#abc").serializeArray();
console.log(formData);
$.ajax({
url: "https://www.w3schools.com/action_page.php",
type: "POST",
data: formData,
dataType: 'jsonp',
crossDomain: true,
success:function(json){
$('#app').html('<h1>Thank You</h1>');
},
error:function(){
$('#app').html('<h1>Thank You</h1>');
}
});
});
</script>
</body>
</html>
You can change your "action" to your thank you page
<form action="thankyou.php">
So that when you trigger the the submit button it will go to thankyou.php you can do also your backend functionality on that page.
I am trying to auto submit form using jquery. But the form doesn't get submitted because of input name="submit" value. I dont know why but if i change the name value to something other than submit it works. And this name="submit"is necesarry get the form submitted. So how can i auto submit this form using jquery or javascript ??
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form action="commant.php" method="post" name="myForm" id="myForm" target="_myFrame">
<textarea type="text" name="Comm">test submit</textarea>
<input type="submit" value="Submit" name="submit">
</form>
<script>
$("form").submit(function(){
alert('Form is submitting....');
// Or Do Something...
return true;
});
$("form").submit();
</script>
The onSubmit tag does not seem to be working. I am trying to call the submit() javascript function when the submit button is clicked on the webpage. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="login.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.serializeJSON.min.js"></script>
</head>
<body>
<script type="text/javascript">
function submit() {
.......
}
</script>
<div class="login-container">
<div class="title">Login Form</div>
<div class="form-fields">
<form name="login-form" id="login-form" onSubmit="return submit()">
<input type="text" name="username" id="username" placeholder="Username" required></input>
<input type="password" name="password" id="password" placeholder="Password" required></input>
<input type="submit" value="Log in" id="submit-button"></input>
</form>
</div>
</div>
</body>
There is a naming conflict.
The form has a native built in function which can be seen with
<form id="x" onsubmit="console.log(submit);"><input type="submit"/></form>
When you look at the console you will see
function submit() { [native code] }
So when you call submit() you are calling that native submit function aka document.getElementById("login-form").submit(); and not yours. To get around it, change the name.
Change the function name to something other than submit.
function xSubmit(){
}
and
<form name="login-form" id="login-form" onSubmit="return xSubmit()">
You can not use "submit" as the function name. Submit is a JavaScript keyword. Simply rename your function to something else.
function submitForm() {
console.log('I work now');
}
<form name="login-form" id="login-form" onSubmit="return submitForm()">
It should be a lowercase s.
<form name="login-form" id="login-form" onsubmit="return submit()">
check out http://www.w3schools.com/jsref/event_onsubmit.asp for more info.
EDIT:
Sorry, I did some testing and found out that it was the name submit.
Take a look at this fiddle http://jsfiddle.net/9z95chze/.
You also shouldn't need to say return