posting form by jquery not working - javascript

Basically i have submitted the form data by using jquery event in order to prevent page reload. Now , the informations of the form are not being displayed?
$("#btn-ser1").click(function() {
$("#form").submit(function() {
alert("you are submitting" + $(this).serialize());
});
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<body>
<form method="post" id="form">
First Name :
<input name="fname">Last Name :
<input name="lname">Address :
<input name="address">Contact No. :
<input name="contact">Country:
<input name="country">City:
<input name="city">
</form>
<button type="button" id="btn-ser1">Serialize</button>
</body>
</html>

You aren't submitting, neither preventing the default action. You need:
$("#btn-ser1").click(function () {
// remove this event handler « #1
// $("#form").submit(function (e) {
// prevent refresh or default action « #2
e.preventDefault();
// change $(this) to $("#form") as you are binding it to the button, not the form.
alert("you are submitting" + $("#form").serialize());
// submit to the server « #3
$.post("path/to/post", $("#form").serialize());
// });
});
You forgot to do the #1, #2 and #3 as mentioned.

Your button is the incorrect type. This only works with a "Submit" button. Use this HTML snippet instead:
<button type="submit" id="btn-ser1">Serialize</button>

Related

addEventListener redirects to the same page with a '?' at the end of the url

After I click the button or click the send button here's what happens:
HTML super simplified code:
<!DOCTYPE html>
<html>
<body>
<!-- Page Preloder -->
<!-- Header section -->
<header class="header-section">
<form class="header-search-form">
<input id= "searchBarP" type="text" placeholder="Search on divisima ....">
<button id= "searchIconP"><i class="flaticon-search"></i></button>
<script>
var searchBarP = document.getElementById("searchBarP");
searchBarP.addEventListener("searchP",function(){
alert("Trial");
});
</script>
</form>
</header>
<!-- Header section end -->
</body>
</html>
Here what happens before clicking the button:
After:
searchBarP.addEventListener("searchP",function(){
alert("Trial");
});
The first parameter of addEventListener should be an event. You have searchP which is the element. Try putting click instead.
Your button doesn't have a type and the default type, in this case, is "submit". Since you also didn't specify the form's method, it defaults to GET. This method appends all parameters to the URL after a question mark, that's why you see it after clicking the button.
Solution 1:
If you want both the button and the searchbar to perform the same action, listen for the submit event:
<form class="header-search-form" id="form">
<input id="searchBarP" type="text" placeholder="Search on divisima ....">
<button type="submit" id="searchIconP"><i class="flaticon-search"></i></button>
<script>
const form = document.getElementById("form");
form.addEventListener("submit", function(e) {
e.preventDefault();
alert("Trial");
});
</script>
</form>
Solution 2:
Set the button's type to "button" in order to prevent it from submitting the form.
<form class="header-search-form">
<input id="searchBarP" type="text" placeholder="Search on divisima ....">
<button type="button" id="searchIconP"><i class="flaticon-search"></i></button>
<script>
const searchBarP = document.getElementById("searchBarP");
searchBarP.addEventListener("searchP", function() {
alert("Trial");
});
</script>
</form>
Keep in mind, though, that your searchP listener won't work because there's no event called "searchP". If you want to separate the behaviour of clicking the button and hitting "enter" while typing in the search bar, you can do something like this:
<form class="header-search-form">
<input id="searchBarP" type="text" placeholder="Search on divisima ....">
<button type="submit" id="searchIconP"><i class="flaticon-search"></i></button>
<script>
const searchIconP = document.getElementById("searchIconP");
const searchBarP = document.getElementById("searchBarP");
searchIconP.addEventListener("click", function(e) {
e.preventDefault(); //Remove this if you want to submit the form when you click the button
alert("Button click");
});
searchBarP.addEventListener("keydown", function(e) {
if (e.keyCode === 13){
alert("Search bar enter hit");
e.preventDefault(); //Remove this if you want to submit the form when you hit enter while typing in the search bar
}
});
</script>
</form>

Form submission is not working

I got a form which I would like to submit using jQuery if the result of checkBrowser function is old.
<form action="xxx" method="post">
...
<input id="iop" type="submit">
...
</form>
jQuery:
$("#iop").mousedown(function(e){
e.preventDefault();
var status=checkBrowser();
if(status=='old'){
$("#iop").submit();
}
});
What I have done:
I debugged the code and it reaches the line $("#iop").submit(); but nothing happens. any idea?
You need to use submit() on <form> not <input> element. From the docs:
The submit event is sent to an element when the user is attempting to
submit a form. It can only be attached to elements
if(status=='old'){
$("form").submit();
}
or more specific by using .closest() to get the closest matching form element of your submit button when traverse up the DOM tree:
if(status=='old'){
$(this).closest('form').submit();
}
Now you are refering to the submit input instead of the form.
Change this:
$("#iop").submit();
To this:
$("form").submit();
Instead of calling submit() explicitly, let the default action do it:
$("form").submit(function(e){
var status=checkBrowser();
if(status != 'old'){
e.preventDefault();
}
});
Also, bind the handler to the form's submit event, not the button.
Change <input id="iop" type="submit"> to <input id="iop" type="button">
and $("#iop").submit(); to $("form").submit();
Try this
<form action="xxx" method="post">
<input id="iop" type="button" value="Submit">
</form>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#iop").mousedown(function(e){
//e.preventDefault();
// var status=checkBrowser();
status = "old";
if(status=='old'){
$("form").submit();
}
});
});
</script>

my jquery form validation is not working as i hope it should

I have some javascipt code here that validates a user form. When the user inputs the correct answer it tells them and gives them the link to the next question. At least, that's what it is supposed to do. When i click the form it reloads the page but it should not because i added return false.
the div tra holds 35
and the div usermsg is the user inputted value.
<script>
$("#submit").click(function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6<>rightanswer)
{
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else
{
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
</script>
Any ideas why this is not working?
It should be
if (clientmsg6 != rightanswer)
not
if (clientmsg6<>rightanswer)
To prevent a form submission, you need to return false on the form itself instead of on the submit button. Your code should become:
HTML
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="submit" value="Submit" />
</form>
JS (please note the line where you have clientmsg6, you have a syntax error)
$("#myform").on('submit', function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6 != rightanswer) { //This line was also wrong, should be != instead of <>
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else {
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
Alternatively, you can keep your existing code by changing your submit button to be just a plain old button, but you will lose the extra functionality of the user being able to hit the enter key and performing the same action.
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="button" value="Submit" />
</form>
Instead of using .html(), try using .text()
if #submit is a link tag otherwise use the form ID and the submit event
$("#submit").click(function(e){
e.preventDefault()
...
...
...
});
You need to attach handlers once the document has finished loading.
Wrap your script in the following
<script>
$(function() {
// script
});
</script>

How to show/hide a form on button click in jquery?

I have two forms in my page. I hide the form 2 using HTML inline style.
<form id="productionForm" name="productionForm" method="POST" style="display:none;">
I have input button on form 1.
<input id="buttonProductionSummary" class="buttonProductionSummary" type="submit" value="Submit" />
I have JQuery code to load the form 2 on button click of form 1. My JQuery code is as follows.
<script type="text/javascript">
$(document).ready(function(){
$("#buttonProductionSummary").click(function() {
$("#productionForm").show();
});
});
</script>
When i click the button in the form one, the page get reloaded again, so the form 2 appears and disappers again. How to can i make the form 2 to appear when i click button on form 1.
You need to prevent the default behavior of the form:
$("#buttonProductionSummary").click(function(e) {
$("#productionForm").show();
e.preventDefault();
});
The problem is that clicking the button in form 1 is triggering a submission of the form (default event)... Hence, the page reloading. You should prevent that by using the submit event as your trigger, handle the form using AJAX and output the result to #productionForm before displaying:
$("#form1").submit(function() {
/* AJAX calls and insertion into #productionForm */
$("#productionForm").show();
return false;
});
as per my requirement i tried to display the form which is to be edit and hide all remaining forms using the following way;
<html>
<head>
<script>
$(document).ready(function(){
$("#what").click(function() { //event called
$(".hello").hide(); // to hide all forms
$('#ayyappa1').show(); //to dispaly needed form only
return false //option to stop
});
});
</script>
</head>
<body>
<form id ="ayyappa1 " class ="hello"> // declare class for every form
<input type="check" class="what"> // trigger of click event
</form>
<form id ="ayyappa2 " class ="hello">
<input type="check" class="what">
</form>
<form id ="ayyappa3 " class ="hello">
<input type="check" class="what">
</form>
<form id ="ayyappa4 " class ="hello">
<input type="check" class="what">
</form>
</body>
</html>
None of the answers above works, so I figured it out myself. This code works like a charm.
<button id="btn" class="editbutton" >Edit your Profile</button>
<form id="editForm" action="" method="post" name="editForm">
<input type="text" name="txtname" placeholder="enter your name">
</form>`
<script type="text/javascript">
$(document).ready(function(){
$("#editForm").hide();
$("#btn").click(function(e) {
$("#editForm").show();
$("#btn").hide();
});
});
</script>

html form with multiple submitbuttons

I have 2 submit buttons in an HTML form.
How can I know which submit button has triggered the JavaScript function?
<script language="javascript" type="text/javascript">
function verifyData(formdata) {
// Here I want to know from which submit button this function is triggered
// I can't use type button instead of submit
// I can't use onclick handler
// I can't use JQuery.. I want to do only with javascript
}
</script>
<form onsubmit="verifyData(this);" method="post">
<input type="submit" value="submit1">
<input type="submit" value="submit2">
</form>
<button value="delete row" id="but1" onclick="disps()">delete row</button>
I want to do different actions based on the different submit buttons clicked.
It is not possible to check the button clicked through the onsubmit event. Instead move the call to verifyData() to the onclick handler of each button. Use return in the onclick call to cancel submission if false is returned by verifyData()
<script language="javascript" type="text/javascript">
function verifyData(button) {
// validate
switch (button.value) {
case "submit1":
// do somehting
break;
case "submit2":
// do somehting
break;
// ...
};
// submit the form
return true;
}
</script>
<form method="post">
<input type="submit" value="submit1" onclick="return verifyData(this);">
<input type="submit" value="submit2" onclick="return verifyData(this);">
</form>
How about putting an onclick event handler on both buttons which will set a variable to say which button was clicked?
like so:
<script language="javascript" type="text/javascript">
function verifyData(formdata) {
alert(btnClicked);
// Here I want to know from which submit button this function is triggered
// I can't use type button instead of submit
}
var btnClicked = 0;
function setSubmit(which) {
btnClicked = which; return true;
}
</script>
<form onsubmit="verifyData(this);" method="post">
<input type="submit" value="submit1" onclick="return setSubmit(1);">
<input type="submit" value="submit2" onclick="return setSubmit(2);">
</form>
Are you allowed to use the jQuery library?
If you can using this you can easily bind to each submit button based on an id.
For example:
<form id="form1" method="post">
<input type="submit" value="submit1" id="submit1">
<input type="submit" value="submit2" id="submit2" >
</form>
<script type="text/javascript">
$("#submit1").click(function(e)
{
// Do stuff when 1 is clicked.
$("#form1").submit();
});
$("#submit2").click(function(e)
{
// Do stuff when 2 is clicked.
$("#form1").submit();
});
</script>
you could also have the buttons as a type of button to avoid any issues, but you should be able to simply return false; to stop the button of type submit from... submitting
Here is how I would do it... Firstly I would use jQuery so you must include that in your document like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
It would also mean your HTML can be simplified to:
<form method="post">
<input type="submit" value="submit1"/>
<input type="submit" value="submit2"/>
</form>
Then you can use jQuery:
<script>
// When the document is ready
$(function(){
// Action performed when a submit button in the form is clicked
$("form[type='submit']").click(function(e){
// Get the value attribute
var val = $(this).val(),
validation_has_passed = false;
// If it is submit1
if(val == "submit1") {
// Validate submit 1
validation_has_passed = true;
// If it is submit2
} else if(val == "submit2") {
// Validate submit 2
validation_has_passed = true;
}
// If all validation is OK submit the form
if(validation_has_passed === true) {
$("form").submit();
}
// Ensure pressing these buttons doesn't submit the form
e.preventDefault();
});
});
</script>

Categories

Resources