We Keep Coding

Using jquery ajax load() to transfer multiple data fields

I have an HTML form that I am trying to convert to submitting using the Jquery load() function. I have it working for a single field, but I have spent hours trying to get it to work for multiple fields, including some checkboxes.
I have looked at many examples and there seems to be about three of four ways of approaching this:
Jquery .load()
jquery .ajax()
jquery .submit()
and some others. I am not sure what the merits of each approach is but the first example I was following used the .load(), so that is what I have persisted with. The overall object is to submit some search criterion and return the database search results.
What I have at present:
<code>
// react to click on Search Button
$("#SearchButt").click(function(e){
var Options = '\"'+$("#SearchText").val()+'\"' ;
var TitleChk = $("#TitleChk").prop('checked');
if (TitleChk) Options += ', \"TitleChk\": \"1\"';
// load returned data into results element
$("#results").load("search.php", {'SearchText': Options});
return false; //prevent going to href link
});
</code>
What I get is the second parameter appended to the first.
Is there a way to get each parameter sent as a separate POST item or do I have to pull it apart at the PHP end?

It would seem as if you're stumbling over the wrapper, let's go ahead and just use the raw $.ajax() and this will become more clear.
$("#SearchButt").click(function(e){
var Options = {};
Options.text = $('#SearchText').val();
Options.title = $('#Titlechk').prop('checked')) ? 1: 0; //ternary with a default of 0
$.ajax({
url: 'search.php',
type: 'POST',
data: Options
}).done(function(data){
$('#results').html(data); //inject the result container with the server response HTML.
});
return false;
});
Now in the server side, we know that the $_POST has been populated with 2 key value pairs, which are text and title respectively.

Use phantomjs to fill a textfield, not working

Trying to use phantomjs to do a query on a form that has a text field with name "category" and a button with value "search", the following script will cause the button to be pressed, which triggered a POST message to be sent. However, in the POST message, I don't see the value for category.
var page = require('webpage').create();
page.open('http://www.example.com', function() {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
page.evaluate(function() {
$('input[name="category"]').value = "tmp1";
console.log($('input[name="category"]').value);
$('input[value="search"]').click();
});
//phantom.exit()
});
});
If I do the following two lines on chrome browser developer console manually, the HTTP POST message sent does contain the right value for category field. Any idea what went wrong?
Thanks.
$('input[name="category"]').value = "tmp1";
$('input[value="search"]').click();

Use .val() to update the value of a form field with jQuery.
$('input[name="category"]').val("tmp1");

The problem is that $('input[name="category"]') returns a jQuery node list (like an array). So you need to select the first one to access the value attribute:
$('input[name="category"]')[0].value = "tmp1";
console.log($('input[name="category"]')[0].value);
The change is [0].

jQuery: Persisting form values before serialize?

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.

HTML form with intermediate web service service call before submit

I have an HTML form to update the address in the account that submits to a Java servlet.
The problem is that, the form should not accept free flowing address text. Instead the user should enter the zip code/house number/street name, and hit a search button.
This search needs to go to a webservice, perform authentication and get a list of valid addresses that match the search criteria.
This list of addresses should be displayed to the user in the same form (either unhide a hidden element or use a modal dialog), so the user can pick his address.
Only after the valid address is picked, the user should be able to hit the form submit button which sends the data back to the servlet.
I am not sure how to have these 2 buttons do different actions in the form. I am very new to JavaScript and any pointers or examples are much appreciated.

For your webservice build an output of the values based on a search result (a basic string). Put this data in a JSON statement or just a javascript array.
Return something that looks like this.
['SearchResult1', 'SearchResult2', 'SearchREsult3']
On your search box. Bind a function on change or blur.
$('#SearchBox').bind('change', function(){
var val = $(this).val();
//Please reference the Jquery Ajax function as im typing this from memory and i always mix one or two things up :).
$.ajax({
"type" : "post",
"url" : "yoururlhere",
"data" : { "search":val },
success : function(dataset){
//When it comes back here check to see if its valid data etc etc
//After you validate you can populate a picklist on the page with the values. Or do anything you want with the values like this
for(x in dataset){
$('#DocumentElement').append('<p>'+ dataset[x] +'</p>');
}
}
});
});
This should start you out. After that you can just do more things on the callback, or modify the dom in a way which suits you better :).

Posting/submitting multiple forms in jQuery

I have two forms on a page (one is being grabbed by AJAX). I need them both to be posted, so I serialize the second one and send it in a post using jQuery before submitting the first one. However, only the first form appears to be getting posted. The odd thing is though, if I put an alert after the serialized post it works as expected. What exactly is my problem here?
$("#submit").livequery('click', function() {
var form = $("#second_form");
var action = form.attr("action");
var serialized_form = form.serialize();
$.post(action, serialized_form);
//alert('test');
$("#first_form").submit();
return false;
});
Is there any better way to post two forms and then redirect to a new page on a button press? I tried posting both of them using the method above and then using window.location to change pages but I had a similar problem.
Much thanks!

You might try submitting "first_form" in a callback from the post of "second_form". I believe that the submit of "first_form" is unloading the page which causes the second post to be aborted. Doing the post of "first_form" in the callback from "second_form" will ensure that the initial post is complete before the second post begins.
$("#submit").livequery('click', function() {
var form = $("#second_form");
var action = form.attr("action");
var serialized_form = form.serialize();
$.post(action, serialized_form, submit_first);
});
function submit_first(val) {
$("#first_form").submit();
}