Ajax Help

Hi, I have the following code used in my contact form, I am using ajax content frames, but how can I link it so when it submits it loads up into the ajax content frame;

HTML Code:

---

<input type=\"submit\" name=\"submit\" value=\"Submit\"></form>

---

Quote:

---

Originally Posted by Dye

Hi, I have the following code used in my contact form, I am using ajax content frames, but how can I link it so when it submits it loads up into the ajax content frame;

HTML Code:

---

<input type=\"submit\" name=\"submit\" value=\"Submit\"></form>

---

---

Sorry if this is too late.

I will assume you're using a javascript framework.. I would go for Prototype or jQuery because they seem to be the main ones.

jQuery you would do something along the line of

HTML Code:

---

$('#FORMID').submit(function(event){

$('#DIVID').html('Content u want in the div');

});

---

or if you were going to request a page.. For instance say the form was like this

HTML Code:

---

<form id="mainForm">
    <table cellspacing="0" cellpadding="3">
        <tr>
            <td>Full Name</td></td>
            <td><input type="text" id="fullName"></td>
        </tr>
        <tr>
            <td>Address</td>
            <td><input type="text" id="address"></td>
        </tr>
        <tr>
            <td><input type="submit" id="submit"></td>
            <td></td>
        </tr>
    </table>
</form>

---

and you wanted to POST that information to a server side page such as PHP. You could do this for the javascript:

HTML Code:

---

$('#submit').click(function(event){
       
    var fullName = $('#fullName').val();

    // This sets a variable as the value of the textbox Full Name
       
    var address = $('#address').val();
   
    // This sets a variable as the value of the textbox Full Name

    $.post("serverSidePage.php", { fullNamePost: fullName, addressPost: address },
  function(data){

    $('#TARGETDIV').html(data);

    // You would change the target div name and it would basically
    // Input the results of the POST to serverSidePage in that div

  });
                   
    // You don't need a return false; in this scenario because the
    // page doesn't actually go to get redirected.
    // If you had a method or something like an action then you would
    // need a return false; where this text is but not in comment
    // Also when i do the $.post , the words before the ":" are
    // the names that the serverSideScript looks for. So the server
    // side script would be looking for: $_POST['fullNamePost'] and
    // $_POST['addressPost'] in PHP in this example. And then after
    // the ":" comes the variables which we have set as the values of
    // the textboxes.
   
    // If you wanted to send the value of a textbox you would do this:
    // $("textarea[@id=DIVID]").val();

});

---

I hope this helps. I havn't checked the code so for all I know it could be a load of rubbish due to me not using jQuery in a while. If you need anymore help then feel free to PM me.

EDIT: I chose to do the submit button onclick, which isn't the best way, but it works. Doing the onclick way would stop users from pressing enter when they finish the form... So yeh you would change to submit instead of click so it'd be like I said up the top.