Form submit using jquery & passing values - javascript

I want to accomplish the following using jQuery:
frm_rooms.action="create_rooms.php?action=Save";
frm_rooms.submit();
I tried following jQuery but it doesn't work:
$('#frm_rooms').submit(function(event) <br/>{
$.post("create_rooms.php", { action: "Save" } );
});

Do it like this:
$('#frm_rooms').submit(function(event){
$.post("create_rooms.php", {action: "Save" }, function(){
alert("Data saved");
});
return false; //This is vital
});
If you want the parameters to be passed in the query string (GET method) use $.get instead of $.post.
EDIT: Thinking better, if you have fields inside your form that you want to be submitted, you should do:
$('#frm_rooms').submit(function(event){
$.post("create_rooms.php?action=Save", $(this).serialize(), function(){
alert("Data saved");
});
return false; //This is vital
});
Hope this helps. Cheers

Have you tried to use preventDefault() in your submit-function?
$('#frm_rooms').submit(function(event)
{
event.preventDefault();
$.post("create_rooms.php", { action: "Save" } );
});
Also be aware that if you also have an input-element within your form, which name is 'submit'. The submit-method of jQuery won't work.

Add return false; after $.post() to avoiding page reloading.

Try this -
$('#frm_rooms').submit(function(event)
{
$.post("create_rooms.php", {action: "Save" } );
event.preventDefault();
});
If you have an input element of type submit inside that form, then this method won't work. In that case, you will have to do something like following -
$('#mySubmitButton').click(function(event) // Suppose the id of that
// submit button is mySubmitButton
{
$.post("create_rooms.php", {action: "Save" } );
event.preventDefault();
});
If you want to provide success/failure message to the user, then modify the $.post method like this -
$.post("create_rooms.php", {action: "Save" }, function(data)
{
// data contains server response.
});

You can add .click() method to your button:
$('#button').click(function() {
//...
$('#form').attr('action', 'action.php');
return false;
})

Related

submitting form with jQuery/AJAX, cant stop page from refreshing on submit?

I'm having trouble getting my AJAX form to POST to my PHP Script without refreshing the page.
I have added e.preventDefault() both before and after the AJAX request but it doesn't appear to have any affect, which seems strange.
Here's my javascript:
// AJAX form submit
$("form[name=signoutRequestForm]").on("submit", function(e){
var cval = confirm.val().toLowerCase().replace(" ", "");
if( cval !== "yes" ) {
alert("You must accept the borrowing policy.");
}else{
var formData = {
validForm: true,
name_txt: name.val(),
productName_sel: prodName.val(),
signoutDateStart_txt: startDate.val(),
signoutDateEnd_txt: returnDate.val(),
additionalNotes_txtarea: addNotes.val(),
disclaimer_txt: confirm.val(),
recaptcha_challenge_field: recap_challenge.val(),
recaptcha_response_field: recap_response.val(),
studentUse: studentUse.val()
};
$.ajax({
type: "POST",
ulr: confLocation,
data: formData,
done: function(data){
$(".signoutRequestForm").remove();
$(".signout-form-container").html( data );
}
});
}
e.preventDefault();
});
Right now, when I hit submit, the page just appears to refresh without the form ever actually submitting.
From the comments, it was determined that the call to .on() was resulting in an exception (TypeError: undefined is not a function) and that you are using jQuery v1.5.2.
.on() was not added until version 1.7. For older versions, .bind() should be used instead.
just use return false
.....
e.preventDefault();
return false
});
Use return false; instead of e.preventDefault()

How to pass $("#MyInputTag").val to my Ajax call and keep that value for later use

How can I send $("#query").val()) using my Ajax function ?
If I put my Ajax call in my $(document).ready(function() , my code doesn't work anymore (the script doesn't start).
=> I can see the 'test123' string on my next page but , but if I type something in my "query" Input_Field, and then click on my link href (pointing to the same location) , the input field is reset and loose my value "query"...
Please help me :( Thank you
$(document).ready(function() {
$("#completed").live('click', function() {
alert($("#query").val());
});
$.ajax ({
url: 'http://localhost:3000/user/updateattribute',
data: { chosenformat: 'test123' , query: $("#query").val() } ,
type: 'POST',
success: function()
{
alert ('success ' );
return false; }
});
});
// do not use this anymore $(document).ready(function() {
$(function() {
event.preventDefault();
// live is no longer used use on..
$("#completed").on('click', function() {
console.log($("#query").val());
// alerts are annoying learn to use console
});

overlaid box using jquery

I have a blockUI plugin for jquery through which i call another php file in a overlaid box. I want to activate the function through more than one button of same id(here it is pageDemo1). But when i do so, only one button works while all other don't.Can anyone explain why is it so? and what should i do to make it work?
$(document).ready(function() {
$('#pageDemo1').click(function() {
$.blockUI({ message: $('#domMessage') });
test();
});
$('#submit').click(function() {
var action = $("#form1").attr('action');
var form_data = {
message: $("#message").val(),
is_ajax: 1
};
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == 'success')
$("#form1").slideUp('slow', function() {
$("#message").html("<p class='success'>message</p>");
});
else
$("#message").html("<p class='error'>message</p>");
}
});
return false;
});
});
On first look dont use html elements with the same id. you can attach your events on elements with the same class, name etc.
Are you saying that you have two elements (buttons) with the same ID? If so, this is not valid HTML (See W3C standards). You could try using a class instead. Also remember you can use multiple classes to still keep the buttons unique in some way. E.g.
<input type="button" class="pageDemo pageDemo1" value="My Click does this"/>
<input type="button" class="pageDemo pageDemo2" value="My Click also does this/>
Then to access these in your JS:
$('.pageDemo').click(function() {
// Put code here which should happen when either of your elements with class 'pageDemo' get clicked
});
$('.pageDemo.pageDemo1').click(function() {
// Put code here which should only happen when elements with 'pageDemo1' class get clicked
});

form won't submit correctly via jQuery and reverts to default behaviour

I've got a form withthe id offerForm which I submit via Jquery, but despite the 'return false' statement, the form doesn't submit via ajax. Any help will be much appreciated.
$(document).ready(function() {
$('#offerForm').live('submit',function(){
loadData(1);
});
function loadData(page){
$.post('get-offers.php', $("#offerForm").serialize() + '&page=' + page, function(data) {
//Do stuff
$('#demo').html(data.htmlOutput);
},'json' );
return false;
}
});
I recommend using the ajaxSubmit plugin located here: http://jquery.malsup.com/form/. It does exactly what you are trying to do.
In your case, you'd use something like:
$('#offerForm').submit(function()
{
var options = {
dataType: "json",
success : function(data) {
$('#demo').html(data.htmlOutput);
}
};
$(this).ajaxSubmit(options);
return false;
});
As a general rule, you should be stopping the event with event.preventDefault() rather than return false - they both work, but it's cleaner to use the event.
$(document).ready(function()
{
$('#offerForm').live('submit',function(event){ // add event as a parameter
event.preventDefault(); // and call preventDefault here
loadData(1);
});
function loadData(page)
{
$.post('get-offers.php', $("#offerForm").serialize() + '&page=' + page, function(data)
{
//Do stuff
$('#demo').html(data.htmlOutput);
}, 'json');
}
});

How to stop form submit during ajax call

I can only modify the code in the ajax call.
The ajax call occurs when I click the submit in form named $('#form1').
$('#form1').submit(function () {
$.ajax({
url: 'some.php',
type: 'POST',
data: somedata,
success: function (msg) {
if (!msg) {
// I wanna to stop '#form1' submit here,how to do that? I can only modify the code in the ajax call.
}
}
});
});
You'll need to stop it BEFORE the success handler. Because the function finishes executing after your AJAX call the form will submit while your ajax call is occurring (and by the time your ajax call finishes it is too late).
But yes, put return false at the end of your function.
function SubmitHandler(){
// Your AJAX call here
// blah blah blah
return false; // Stop form submit
}
If it's really important that it is in the success handler, then you could execute the call synchronously.
You can also use preventDefault()
http://api.jquery.com/event.preventDefault/
return false or event.preventDefault should help you:
$('#form1').submit(function(){
$.ajax({
url:'some.php',
type:'POST',
data:somedata,
success:function(msg){
if(!msg){
//i wanna to stop form1 submit here,how to do that? you can only modify the code in the ajax call
}
}
});
return false;
});
or:
$('#form1').submit(function(e){
e.preventDefault();
$.ajax({
url:'some.php',
type:'POST',
data:somedata,
success:function(msg){
if(!msg){
//i wanna to stop form1 submit here,how to do that? you can only modify the code in the ajax call
}
}
});
});
Put a
return false;
This should stop the function to continue
You need to prevent form submitting
onclick="ajaxcall(); return false;"
And do it in your code:
$.ajax({
url:'some.php',
type:'POST',
data:somedata,
success:function(msg){if(msg) $('#form1').submit();}
})
You can change button type from "submit" to "button" then submit form using jquery form.submit(); function according to your conditions. Consider the following example code below:
<script>
$(document).ready(function() {
$("#button-id").click(function() //on click at button
{
var sel=$("#input").val();
$.post("ajax-war.php",{jid:sel,rand:Math.random() } ,function(data)
{
if(data=='valid') //if correct login detail
{
$('#war_form').submit(); //Submit form
}
else
{
alert('not valid'); //will not submit form
}
});
});
});
</script>
Assuming the form's ID is #form1, you could bind a submit handler and return false from it:
$.ajax({
url:'some.php',
type:'POST',
data:somedata,
success:function(msg){
if(!msg){
$('#form1').submit(function(){
return false; // prevents form submit
});
}
}
})

Categories