So I'm using this piece of javscript/ajax to create a form that submits to another page on my site without reloading the page. My question is how can I program this same code to work with multiple forms on the same page? If I have two forms that I want to submit to two separate locations how do I specify which form triggers which piece of javascript?
<script type="text/javascript">
function submit() {
$("form").submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'csverify.php',
data: $('form').serialize(),
success: function() {
console.log("Signup was successful");
},//here
error: function() {
console.log("Signup was unsuccessful");
}
});});//here
}
$(document).ready(function() {
submit();
});
</script>
Not sure if it matters but I would like to use either name="" or ID="" to designate each form with a name.
You can create a method passing form's ID.Then get the form attribute action on different by form's ID.
Html part
<form id="form1" action="form1.php">
...
</form>
<form id="form2" action="form2.php">
...
</form>
JS part
<script type="text/javascript">
function submit(formID) {
var $form = $('#'+formID);
$form.submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: $form.attr('action'),
data: $form.serialize(),
success: function() {
console.log("Signup was successful");
},//here
error: function() {
console.log("Signup was unsuccessful");
}
});
});//here
}
$(document).ready(function() {
submit('form1');
submit('form2');
});
</script>
Related
I don't want to automatic scroll up the page when a form I submitted. I want to stay on the same position as when the form was submitted. How can I do that?
<script type="text/javascript">
var frm = $('#form');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
});
ev.preventDefault();
});
<script>
function submitForm2()
{
document.getElementById('form').submit();
popsup();
}
</script>
<div onclick='submitForm2();'></div>
<form id='form' action='' method='post'>
<input name='test' value="ok">
</form>
I tried the solutions in the link;
return false results in the page opening in a new window and in the new window the page autoscrolls to top after submit.
"#" or #! in action = form isn't submitted and page scrolls to top.
javascript:void(0); - form doesn't get submitted and page still scrolls to top
document.getElementById('form').submit(); doesn't fire the frm.submit handler. Use $('#form').submit() instead, because the jQuery version of submit() calls any onsubmit handlers, whereas vanilla Javascript submit() bypasses them.
Edit
Another thing - your script that adds the submit handler function is being executed immediately - before the form has been rendered. So it's probably failing. Also you seem to have a wayward <script> tag in there. Try this:
<script type="text/javascript">
$(document).ready(function() {
var frm = $('#form');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
}
});
ev.preventDefault();
});
});
function submitForm2() {
$('#form').submit();
}
</script>
I'm inserting data into a table using Ajax. I'm using ajax so my page wouldn't get refresh. Here is my Ajax code for calling the inserting page:
<script type="text/javascript">
var i = jQuery.noConflict();
i(document).ready(function(){
i('#myForm').on('submit',function(e) {
i.ajax({
url:'insert.php',
data:$(this).serialize(),
type:'POST'
});
e.preventDefault();
});
});
</script>
Now every time i write in the textbox and hit the submit button the data gets entered but it remains in textbox and i have to press the delete button to erase it.
Question: how can I make so my data gets cleared when I press the submit button?
You can reset the form in the ajax success handler
var i = jQuery.noConflict();
jQuery(function ($) {
$('#myForm').on('submit', function (e) {
$.ajax({
url: 'insert.php',
data: $(this).serialize(),
type: 'POST',
context: this
}).done(function () {
this.reset();
});
e.preventDefault();
});
});
document.getElementById('myForm').reset(); // In Javascript
$("#myform")[0].reset(); // In jQuery Fashion
You can reset form fields on the completion as suggested by arun or on success as below
var i = jQuery.noConflict();
jQuery(function ($) {
$('#myForm').on('submit', function (e) {
$.ajax({
url: 'insert.php',
data: $(this).serialize(),
type: 'POST',
success:function(data) {
$('#myForm')[0].reset();
}
});
e.preventDefault();
Hope it helps
This question already has answers here:
Send JavaScript variable to PHP variable [duplicate]
(3 answers)
Closed 9 years ago.
In my index.php, I have an update button as below.
<form action="update.php" method="post" >
<button type="submit">Update</button>
</form>
I have defined a javascript function to override the default form action. The javascript function is as below.
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function(e) {
e.preventDefault();
alert("HI");
$.ajax({
type: 'post',
url: 'update.php',
data: {
source1: "some text",
},
success: function( data ) {
console.log( data );
}
});
});
});
</script>
After I click on the update button, I am getting the alert. However, I am not redirected to update.php page as expected. I am trying to send some values in the ajax request which can be used for processing in the update.php page.
You are not redirected because PHP redirects do not affect the browser when run as an AJAX call. You'll need to specify a JavaScript redirect in the success function:
$.ajax({
type: 'post',
url: 'update.php',
data: {
source1: "some text",
},
success: function( data ) {
document.location.href = 'update.php'
}
});
However, I don't believe that this is what you want. You seem to want to add new form data on submitting the form, in which it might be better to prevent the default behaviour, add any additional data with hidden input fields, and then re-submit the form:
$(function ()
{
$('form').submit(function (e)
{
if ($(this).is(':not([data-submit="true"])'))
{
$('form').append('<input type="hidden" name="foo" value="bar">')
$('form').data('submit', 'true').submit()
e.preventDefault()
return false
}
}
)
}
)
</script>
I am trying to submit a form through ajax function while button
but on safari browser its submitting like a normal form submitting.
and In other browser its working properly through ajax function
<g:form action="addEmpHistory" name="formNew" method="post">
<button id="submitBtn" name="submitBtn" onclick="submitform(formNew);"></button>
</g:form>
//Ajax code
function submitform(data){
$("#"+data).submit(function(event) {
new Event(event).preventDefault();
event.preventDefault();
$.ajax({
type: 'POST',
url: '/user/addUSer',
data: $('#'+data).serialize(),
success: function (data) {
location.reload();
}
});
});
}
Seen as you are using jQuery, consider removing onclick
<form action="addEmpHistory" id="formNew" name="formNew" method="post">
<button id="submitBtn" name="submitBtn">Submit</button>
</form>
and replacing your submitform function with jQuery event binding, something like:
$(document).ready(function() {
$("#formNew").submit(function() {
$.ajax({
type: 'POST',
url: '/user/addUSer',
data: $("#formNew").serialize(),
success: function(data) {
alert(data);
}
});
return false; // prevent actual form submit
});
});
I am using ajax to update the db with a new folder but it refreshes the page after ENTER is hit.
on my form I have onkeypress="if(event.keyCode==13) savefolder();"
here is the javascript code that I have: what it does basically is after you hit enter it calls the function savefolder, savefolder then sends a request through ajax to add the folder to the db. Issue is it refreshes the page... I want it to stay on the same page.
any suggestions? Thank you
<script>
function savefolder() {
var foldername= jQuery('#foldername').val(),
foldercolor= jQuery('#foldercolor').val();
// ajax request to add the folder
jQuery.ajax({
type: 'get',
url: 'addfolder.php',
data: 'foldername=' + foldername + '&foldercolor=' + foldercolor,
beforeSend: function() { alert('beforesend');},
success: function() {alert('success');}
});
return false;
}
</script>
This is working:
<form>
<input type="submit" value="Enter">
<input type="text" value="" placeholder="search">
</form>
function savefolder() {
var foldername= jQuery('#foldername').val(),
foldercolor= jQuery('#foldercolor').val();
jQuery.ajax({
type: 'get',
url: '/echo/html/',
//data: 'ajax=1&delete=' + koo,
beforeSend: function() {
//fe('#r'+koo).slideToggle("slow");
},
success: function() {
$('form').append('<p>Append after success.</p>');
}
});
return false;
}
jQuery(document).ready(function() {
$('form').submit(savefolder);
});
http://jsfiddle.net/TFRA8/
You need to check to see if you're having any errors during processing (Firebug or Chrome Console can help). As it stands, your code is not well-formed, as the $(document).ready() is never closed in the code you included in the question.
Simply stop the propagation of the event at the time of the form submission
jQuery(document).ready(function($) {
$("#whatever-form-you-are-pulling-your-values-from").submit(function(event) {
var foldername = $('#foldername').val();
var foldercolor = $('#foldercolor').val();
event.stopPropagation();
// ajax request to add the folder
$.ajax({
type: 'get',
url: '../addfolder.php',
data: 'ajax=1&delete=' + koo,
beforeSend: function() { fe('#r'+koo).slideToggle("slow"); },
success: function() { }
});
});
Since by default on a form the enter button submits the form, you need to not only handle this with your own code, but cancel the event after.
Try this code instead:
onkeypress="if(event.keyCode==13) {savefolder(); return false;}"
The onkeypress event will that the return value of the javascript and only continue with it's events if it returns true.