I need to send a complete form via ajax to prevent the refresh of the complete page. Since the form has a huge number of inputfields, i dont want to build the querystring manually. I found some scripts collecting all elements in the form and building the querystring automatically. But is there any easier way to build the query string automatically?
using serialize() method of your jquery form wrapper object !
see : http://api.jquery.com/serialize/
http://api.jquery.com/serialize/
http://api.jquery.com/serializearray/
Try jQuery serialize.
Example from jQuery site
$('form').submit(function() {
alert($(this).serialize());
return false;
});
You can use jQuery .serialize to serialize all input fields in the form. Try below script and alert the value,
var formValues = $('form').serialize();
alert(formValues);
you need to have the info in your page and send it in a query string to another page right??
you could simply add the Previous page Type directive in the page you're redirecting to, and add properties in your first page to return the values in the controls and call it using previous page property
refer to this article
Related
I am trying to transfer a variable from one page using this code:
Edit
to the page login.html, and insert the variable(asdf in this example) to a textbox in the new page.
I have tried this code:
function NameFunction(name) {
document.getElementById("username").value = name;
}
It is not working. I think it doesn't work because thats another page.
If you want to pass parameters to another page you can put them using query string:
Edit
To get parameter on the login.html page you can use jQuery as it described here: Get escaped URL parameter
you can try using localStorage.
In you're onClick method, save the data you want to store in localStorage
localStorage.setItem(key,value);
When the new page loads, in the onLoad (ready function if using jquery) method get the data from localStorage and set it in the textbox
you can find more about localStorage in the following links
Storing Objects in HTML5 localStorage
http://www.w3schools.com/html/html5_webstorage.asp
and many more are available online
I am using jQuery serialize() function to collect data in a form and submit to server using jQuery Ajax "post" method, like this: var params = jQuery('#mainContent form').serialize();.
The strange thing I saw is the serialized data from my form contains old data. It means, all of my changes in form (input to text-field, select on combo-box) is not stored to DOM, so when jQuery call serialize(), it collect the old data which appeared before I change the form. I tried to inspect to each element in that form and call .val(), it still showed the old values.
So how can I persist all my changes to form, that the serialize() method can build the string with newest data I entered?
Here is my snippet code, I called serialize() inside submit handler
jQuery('.myFormDiv input.submit').click(function() {
// Do something
// Collect data in form
var params = jQuery('#mainContent form').serialize();
// Submit to server
jQuery.post(url, params, successHandler);
}
Thank you so much.
When are you calling serialize? it should be $('form').submit( [here] ); It sounds like it's being called on page load, before you enter values into the fields, then being used after.
EDIT:
using the submit event instead of on click will catch someone hitting enter in a text field.
jQuery('#mainContent form').submit(function() {
// Collect data in form
var params = jQuery(this).serialize();
// Submit to server
jQuery.post(url, params, successHandler);
}
*the above code assume url is define and successHandler is a function.
I am new to Dojo Framework.I created one button using dojo constructor and dojo.connect onclick event function i written url and load functions.This url navigating servlet and get the response back.
but i don't want response back i want to send request only.
how to do this..anyone help me.
thanks in advance.
are you looking to navigate to another page? if so, you can use window.location.href or other approaches to achieve that. See the foll url for other approaches:
JavaScript: Navigate to a new URL without replacing the current page in the history (not window.location)
if you do not want to navigate but just send some data to the server (and dont care about the response), you can just write an empty function for the callback
var deferred = dojo.xhrGet( {
url : "xxx",
load: function(data) {
//ignore
}
});
});
However, it is recommended to always check the response to ensure there were no errors on the server side.
You could also use dojo.xhrPost to submit your form
I'm working on a form upload element that can be used in the Zend Framework forms. I'm trying to make it so the programmer can use it in any project without having to manually configuring any settings.
The files are uploaded by an AJAX uploader which returns JSON data like:
[
{
"name":"image.png",
"size":42410,
"type":"image\/png",
"url":"http:\/\/example.com\/image.png",
"thumbnail_url":"http:\/\/example.com\/thumbnail\/image.png",
}
]
Since the uploader itself is a form element I'm trying to put that data in the form so on the submit the values can be retrieved from the $_POST.
I was adding hidden input fields with javascript named uploader-data[] (when submitting the form) but that only allows me to pass 1 variable at the time to the hidden field.
So I guess my question is: "How can I pass the whole array/object to the $_POST / form?". Even though I am using AJAX for the uploader itself I don't want to use it to submit the form. I want a regular form submit containing all the data from the JSON object/array. The files itself are already uploaded but I might want to use the JSON data in my database or at some other place.
Is it possible to do something like this?
Thanks in advance.
Put your javascript value into an input field using JSON.stringify
:
data = [
{
"name":"image.png",
"size":42410,
"type":"image\/png",
"url":"http:\/\/example.com\/image.png",
"thumbnail_url":"http:\/\/example.com\/thumbnail\/image.png",
}
]
document.getElementById('my_hidden_input').value = JSON.stringify(data);
This will turn your array in the following text value:
[{"name":"image.png","size":42410,"type":"image/png","url":"http://example.com/image.png","thumbnail_url":"http://example.com/thumbnail/image.png"}]
Zend can parse the JSON value into a php array.
I have built a calendar in php. It currently can be controlled by GET values from the URL. Now I want the calendar to be managed and displayed using AJAX instead. So that the page not need to be reloaded.
How do I do this best with AJAX? More specifically, I wonder how I do with all GET values? There are quite a few. The only solution I find out is that each link in the calendar must have an onclick-statement to a great many attributes (the GET attributes)? Feels like the wrong way.
Please help me.
Edit: How should this code be changed to work out?
$('a.cal_update').bind("click", function ()
{
event.preventDefault();
update_url = $(this).attr("href");
$.ajax({
type : "GET"
, dataType : 'json'
, url : update_url
, async : false
, success : function(data)
{
$('#calendar').html(data.html);
}
});
return false;
});
Keep the existing links and forms, build on things that work
You have existing views of the data. Keep the same data but add additional views that provide it in a clean data format (such as JSON) instead of a document format (like HTML). Add a query string parameter or HTTP header that you use to decide which view to return.
Use a library (such as YUI 3, jQuery, etc) to bind event handlers to your existing links and forms to override the normal activation functionality and replace it with an Ajax call to the alternative view.
Use pushState to keep your URLs bookmarkable.
You can return a JSON string from the server and handle it with Ajax on the client side.