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.
Related
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>
<form id="myForm" name="gadaj"> <input type="text" name="fname" id="fname"/>
<input type="submit" name="click" value="button"> </form> <p id="status"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function info()
{
document.getElementById("status").innerHTML="Message Sent";
setTimeout(function() {
$('#status').fadeOut('slow');
}, 1000);
}
$(document).ready(function(){
$(function(){
$("#myForm").submit(function(event){
event.preventDefault();
$.ajax({
method: 'POST',
url: 'submit.php',
data : $('#myForm').serialize(),
success: function (response){
{
document.forms['myForm'].reset();
info();
}
},
error: function(XMLHttpRequest, textStatus,errorThrown) {
alert("Some Error.");
}
});
});
});
});
</script>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<form id="myForm" name="gadaj">
<input type="text" name="fname" id="fname"/>
<input type="submit" name="click" value="button" id="klik">
</form>
<p id="status"></p>
</body>
</html>
Now it's only one time shows Message Sent. It's kind of webchat txt field and I wanna show message text every time after sent. How do this ?
I do not know Ajax. I just found it but I do not how to do any change.
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.
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>
Hi I am very new to JavaScript, looking for some help. I have a form, shown below. When the user gives input and clicks submit, I want to call a php file (shown below also) to be invoked and return a hello. Here is the code I have tried, though it is not working as intended.
<html>
<head>
<script type='text/javascript' src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<form>
<input id="name-typed" type="text" />
<input id="name-submit" type="submit" value="submit" onclick="post()"/>
</form>
<div id="result"></div>
</body>
<script>
function post() {
var hname = $('input#name-typed').val();
$.post('dat.php',{name: hname},function(data) {
$('div#result').html(data);
});
}
</script>
</html>
The PHP file dat.php looks like this:
<?php echo "hello";?>
As in my first paragraph, can anyone suggest any changes I should make?
Try this:
you can change dat.php to say:
<?php
$name = $_POST['name'];
echo "Hello ".$name;
?>
And then your html file would be:
Notice that the button type is changed to a normal button so that it just execute the function rather than submitting the form.
<html>
<head>
<script type='text/javascript' src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<form>
<input id="name-typed" type="text" />
<button type="button" onclick="post()">Submit</button>
</form>
<div id="result"></div>
</body>
<script>
function post() {
$.ajax({
type: "POST",
url: "dat.php",
data: { name: $('#name-typed').val()
},
success: function(response) {
$('#result').html(response);
}
});
}
</script>
</html>
I haven't test but something like this:
$('form').submit(function(){
post()
return false;//block the reload of the page
})
In fact I think you just forget the return false. remvove the onclick if you use my answer