ansaurus

Question

Answer 1

A:

Inside jQuery, when you do an AJAX request, you call:

jQuery.ajax(options)

In your options object, make sure you set the data member. This member serializes a javascript object into post data.

You can then intercept the form submit, and submit it via AJAX by building up the request from the action, and form fields.

Alternatively you can use the simpler

jQuery.post()

function.

http://docs.jquery.com/Ajax

Tim 2009-12-06 23:24:46

Answer 2

A:

start with this:

$('#search').submit(function(){
    var _this = $(this);
    $.post(_this.attr('action'), _this.serialize(), function(result){
        // callback
    });
    return false;
});

hubbl 2009-12-06 23:25:27

That's not an ajax submit.

cletus 2009-12-06 23:26:03

sure it is.$.post() is an ajax requesthttp://docs.jquery.com/Ajax/jQuery.post

hubbl 2009-12-07 09:21:55

Answer 3

A:

Here is a fairly detailed tutorial on AJAX form submission, which should answer your questions although I don't like the way the query parameters are done. It has:

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
$.ajax({  
  type: "POST",  
  url: "bin/process.php",  
  data: dataString,  
  success: function() {  
    $('#contact_form').html("<div id='message'></div>");  
    $('#message').html("<h2>Contact Form Submitted!</h2>")  
    .append("<p>We will be in touch soon.</p>")  
    .hide()  
    .fadeIn(1500, function() {  
      $('#message').append("<img id='checkmark' src='images/check.png' />");  
    });  
  }  
});

I would instead do this:

$.ajax({  
  type: "POST",  
  url: "bin/process.php",  
  data: {
    name: name,
    email: email,
    phone: phone
  },
  success: function() {  
    $('#contact_form').html("<div id='message'></div>");  
    $('#message').html("<h2>Contact Form Submitted!</h2>")  
    .append("<p>We will be in touch soon.</p>")  
    .hide()  
    .fadeIn(1500, function() {  
      $('#message').append("<img id='checkmark' src='images/check.png' />");  
    });  
  }  
});

If you want to automatically construct the form variables rather than doing it automatically, take a look at Serialize form to JSON with jQuery.

cletus 2009-12-06 23:27:02

Answer 4

A:

IDs must be unique, forms only worry about names.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
    $(document).ready(function()
    {
        $('#submitButton').click(function()
        {
            var catArray = new Array();
            var j = 0;
            for(var i = 0; i < 3; i++)
            {
                if(document.myForm.categories[i].checked == 1)
                {
                    catArray[j] = document.myForm.categories[i].value;
                    j++;
                }
            }

            // Just put this here so you can see the output
            // alert('array:'+catArray.toString());

            $.ajax(
            {
                type:    "POST",
                url:     "search.php",
                data:    ({ categories : catArray.toString() }),
                success: function(msg)
                {
                    $('#search_results').html(msg);
                }
            });

            return false;
        });
    });
</script>
</head>
<body>
    <form name="myForm" onsubmit="return false">
        Category 1<input type="checkbox" name="categories" id="category1" value="1" />
        Category 2<input type="checkbox" name="categories" id="category2" value="2" />
        Category 3<input type="checkbox" name="categories" id="category3" value="3" />
        <button id="submitButton">Submit</button>
    </form>
    <div id="search_results"></div>
</body>
</html>

Ambrosia 2009-12-06 23:40:46

ansaurus

tags:

views:

answers:

Filter results with Jquery

related questions