<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
$("#p").replaceWith($("#p1"));
});
});
</script>
</head>
<body>
<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>
<form action="" method="get">
<input type="submit" id="submit" name="submit" value="Search"/>
</form>
</body>
</html>
This code works fine until I put form action.. When I keep that submit in a form, this code does not work. How can i replace that div after form submit. Thanks.
You can try this one. Hope it helps!
$(document).ready(function(){
$("#submit").click(function(event){
$("#p").replaceWith($("#p1").text());
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>
<form action="" method="get">
<input type="submit" id="submit" name="submit" value="Search"/>
</form>
you need text method for that .
you were removing entire element before . you need to remove only text value
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
$("#p").replaceWith($("#p1").text());
});
});
</script>
</head>
<body>
<div id="p">This is a paragraph.</div>
<div id="p1">Replacement</div>
<input type="submit" id="submit" name="submit" value="Search"/>
</body>
</html>
Specify what to replace it with:
$(this).replaceWith("<div><p>Replacement</p></div>");
Form submission needs to be done using AJAX then only you can achieve this which you want to do.
Otherwise the form will submit and page will refresh which will result to re initialization of script.
As Pooojaaqaa and Rayon mention the when the action attribute is set on the form tag, the form is submitted and the page is reloaded (even if action="#"). To catch this action you need to catch the form's submit event, not the button's click event. In the submit event handler you need to call preventDefault() on the event object passed into the handling function like below.
<form id="frmSearch" action="#" method="get">
<input type="submit" id="submit" name="submit" value="Search"/>
</form>
$("#frmSearch").submit(function(ev){
ev.preventDefault();
$("#p").replaceWith($("#p1").text());
});
Related
I have page with form on it, I am trying to disable the button on submit with a custom disable message on it, and submit the form after using jquery.
<form>
<input type="text" name="run"/>
<input type="submit" class="send" value="Save" data-attr-message="Sending..."/>
</form>
I have try both form submit or form[0] submit neither submits the form, I try logging the form, the form is logged correctly to console, and there are no errors in console when clicking submit.
$(document).ready(function() {
$('.send').click(function(e) {
e.preventDefault();
e.stopPropagation();
var button = $(this);
var form = button.closest("form");
button.prop('disabled', true);
button.val($(this).attr('data-attr-message'));
console.log(form); //Logs form fine
form[0].submit();
// form.submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" name="run" />
<input type="submit" class="send" value="Save" data-attr-message="Sending..." />
</form>
Your form does not have an "action" and "method".
It should look like:
<form action = "http://example.com/backendScript" method = "POST">
if your goal is to "simulate" the time that it takes to send data, and you want to see the button to be disabled until that time, one way is to use "setTimeout()" method of javascript. you do not need to use "e.preventDefault()" because it prevent the form from submitting. I posted the code below that I think does what you expected:
$(document).ready(function() {
$('.send').click(function(e) {
var button = $(this);
var form = button.closest("form");
button.prop('disabled', true);
button.val($(this).attr('data-attr-message'));
setTimeout(function() {
form.submit();
}, 1000)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="submit.html">
<input type="text" name="run"/>
<input type="submit" class="send" value="Save" data-attr-message="Sending..."/>
</form>
<script src="jquery-3.5.1.js"></script>
<script src="script.js"></script>
</body>
</html>
the "submit.html" is simply an html file with a message that you can add to your folder yourself to see that the form is submitting.
This is my basic html page.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body >
<form id="#forgotform">
<input type="email" id="email" placeholder="Enter your email" required="required" />
<input type="submit" value="submit" />
</form>
</body>
<script>
$(document).ready(function(){
$('#forgotform').on('submit', function() {
alert('You submitted the form!');
});
});
</script>
</html>
I am trying to do something on submit form #forgotform, but it is not even triggering an alert on submitting the form. Please help me out.
replace <form id="#forgotform"> this with <form id="forgotform">.May be this will work.
Remove the '#' from the <form id="#forgotform">. There is no need to put '#' while adding id to an element in HTML.
You can also try this
$("#form-id").submit(function(){
alert("Submitted");
});
Your HTML Form
<form id="form-id">..</form>
i am trying to make a list and submit button and the user enters the list size and then after clicking on a button the form is submitted (list size is sent to the servlet ) and an alert should appear .. but the alert is not working .. here is my code
<body>
<form action="ServerSide" method="post">
Enter list Size:<input type="text" name="listsize">
<input type="submit" value="Submit" id="btn">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
alert("anything");
});
});
</script>
</body>
You can try this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("Submitted");
});
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Also read this document DOCS
First of all make sure you are including/referencing JQuery Libray before you use JQuery. it should work.
Secondly you can use this
<body>
<form action="ServerSide" method="post" id="myform">
Enter list Size:<input type="text" name="listsize">
<input type="button" value="Submit" id="btn">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").on('click',(function(){
alert("anything");
}));
});
</script>
</body>
I also notice that you had used input type submit it will submit form instead of calling click function. you should change type to button
if you want to do something on form submission you have to use onsubmit event
<body>
<form action="ServerSide" method="post" id="myform">
Enter list Size:<input type="text" name="listsize">
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").submit(function(){
alert("anything");
});
});
</script>
</body>
For this you don't need to add click listener on the submit button. once you submit form it will show you alert.
This is the code
<html>
<head>
<script>
function test() {
return false;
}
</script>
</head>
<body>
<form method="post" action="../test.php">
<input type="submit" onsubmit="return test()">
</form>
</body>
</html>
how is the form still submitting, it makes no sense to me??
You need to stop form submission, when user submits it by clicking the submit button in the form.
Change onsubmit of the submit button to onclick
<input type = "submit" onsubmit= "return test()">
Should be
<input type="submit" onclick="return test()">
<!-- ^^^^^^^^^^^^^^^^^^^^^^^ -->
If you want to use onsubmit, you can use it on form element.
<form method="post" action="../test.php" onsubmit="return test()">
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^ -->
<input type="submit" />
</form>
<html>
<head>
<script>
function test(e) {
e.preventDefault();
return false;
}
</script>
</head>
<body>
<form method="post" action="../test.php" onsubmit="return test(event);">
<input type="submit">
</form>
</body>
I am currently using php in my html page and there is an action in the same page which gets executed upon form submission. Currently whole form gets reloaded while I want the php action to be run in the background with out reloading. How do I do it. I would also want to clear the text box after submit button is clicked. Following is the code I am currently using
<html>
<head>
</head>
<body>
<form action="index.php" method="post" role="form">
<input type="email" placeholder="Enter email" name="email_address">
<button class="btn btn-primary custom-button red-btn">Sign Up</button>
</form>
<?php
if(isset($_POST['email_address']) !(trim($_POST['email_address']) == ''))
// do some action
}
?>
</body>
</html>
Note: Following code worked for me
<script type="text/javascript">
$('#contactForm').submit(function () {
$.post("mailer.php",$("#contactForm").serialize(), function(data){
});
return false;
});
</script>
You need to use AJAX for this, for without reloading. Or, if you want to do it without disturbing the page, you need to set target.
Using AJAX
$("form").submit(function(){
$.post($(this).attr("action"), $(this).serialize());
return false;
});
Using target
<form action="index.php" method="post" role="form" target="_blank">
Using ajax
HTML
<html>
<head>
</head>
<body>
<form id="myform"><!--changge-->
<input type="email" placeholder="Enter email" name="email_address">
<button class="btn btn-primary custom-button red-btn" id="signup">Sign Up</button>
</form>
</body>
</html>
<script>
$(document).ready(function()
{
$('#signup').click(function()
{
$.ajax({
url:'index.php',
method:'post',
data : $('#myform').serialize(),
success:function()
{
}
)};
);
});
</script>
You can try this
<html>
<head>
</head>
<body>
<form id="myform" action="index.php"><!--changge-->
<input type="email" placeholder="Enter email" name="email_address">
<button class="btn btn-primary custom-button red-btn" id="signup">
Sign Up</button>
</form>
<script>
$(document).ready(function(){
$('#signup').click(function(){
$.post($(this).attr("action"), $("#myform").serialize(),function(response){
alert(response) // you can get the success response return by php after submission success
});
)};
});