Syntax assistance sending string via jquery's serialize() to pop 2 divs

[ThisisForReal]

This is my first attempt at ajax using jquery.  I've successfully done ajax without jquery borrowing someone else's tutorial where I used onkeyup="showHint(this.value)" to provide search hints for my online movie database, but I want to learn jquery yet am struggling.  I'm inept with OOP, and I have zero javascript experience (aside from using scripts from others that have been made publicly available).

 

Background: I'm attempting to use the jquery serialize() function to take the contents of a form, send it over to a php file through the use of a button, <button type="button">, "submit_test.php" (preferably via post), where I'll do all my crazy php processing.

 

When submit_test.php is finished, I'll have strings (in html format, I guess, with "<p>" and "<br />" mixed in) which I'll use to update 2 divs on my original page.  This is what has been tripping me up.

 

I've been able to demonstrate that I'm serializing the data into a format that I want via this jquery script (which displays the string):

<script>
    function showValues() {
      var str = $("form").serialize();
      $("#results").text(str);
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();
</script>

 

 

I just need help passing that along to submit_test.php

 

My questions are basically syntax:

<script type="text/javascript" language="javascript">
  $( '.button' ).click(function() {
    function(){
      var data = $(this).serialize();
      $.post( "submit_test.php", {
        action: "ajax_verify_form",
        data: data },
        function(response){
        $('#div_1').html($('#inner_1' , resp).html());
        alert(response);
        return false;
      }
    );
    return false;
  }
  );
</script>

 

var data = $(this).serialize();

<-- I doubt I'm doing this right.

data: data

<-- this is probably troublesome, too.

 

Can someone explain what would typically go in the var data = ..., and how that relates to the data: piece of the script?

I feel like I'm so close, but every tutorial I've googled thus far is doing something different than what I'm trying to accomplish and I just haven't been able to put it together yet.

 

To see the page, I've got it stripped down to just the part at hand here:  http://www.cv-industries.com/ajax_test

 

Thanks so much in advance for any assistance you can provide!

 

[Zane]

no need to put a function within a function

 

Also, if you want to serialize THIS, and THIS is supposed to be a form... You shouldn't use the click() function of a button.  You should use the submit function of the form...

 

For example, if you have a form with an id of ... box, then you can serialize it like this

$('form#box').submit(function() {
     var data = $(this).serialize();
});

 

It helps to read the manual too

http://api.jquery.com/jQuery.post/

 

$.post("test.php", data, function(data) {
   alert("Data Loaded: " + data);
});

The code above would send the data the way you wanted... and alert it back..  You can change the alert part to whatever you need...

which I assume is $('#div_1').html($('#inner_1').html(data));

 

Even that selection can be simplified.. to

$('#div_1 #inner_1').html(data);

[ThisisForReal]

Does this method work if my form is NEVER going to get submitted (I won't even have a submit button).  I'm going to use serialize to collect and arrange the form data, and send it off to my php file that will process and then update the divs on the user's page.  The user would then modify their selection and press the button again.

 

My understanding is that if I was using an input submit button, I would need a catch to prevent the submit from fetching the action="" page.  Whereas, by using a button, I wouldn't have to worry about catching any action.