html() method set's the innerHTML of an element, which means that it
overwrites what was previously in it. What you should do is:
$("#SIGNUPFORM").html(output);
$('#SIGNUPFORM').append("<h2>Contact Form Submitted!</h2>");
It would also be good for your programming for you to get a habit of
chaining methods whenever possible. As it is, your code will search
the DOM for #SIGNUPFORM twice unnecessarily. If you do it like:
$("#SIGNUPFORM").html(output).append("<h2>Contact Form Submitted!</h2>");
the element will be selected only once. You can chain the methods as
long as you will until you use a method that is supposed to return
something specific about the object (also called an inspector).
I hope this helps.
2009/8/17 efet <efetun...@gmail.com>:
>
> Ok now it partially worked! I get Contact Form Submitted! message once
> I click submit. But! there still is a one problem. When form
> submitted, if email address is used before, my server side script
> gives "sorry, you cannot use this email address" message. How can I
> grab other page's response text and print it to the page instead. I
> tried it as:
>
> success: function(output) {
> $("#SIGNUPFORM").html(output);
> $('#SIGNUPFORM').html("<h2>Contact
> Form Submitted!</h2>")
> }
>
> On Aug 17, 1:13 pm, Miloš Rašić <milos.ra...@gmail.com> wrote:
>> Your page is refreshed? No wonder since you are using type="submit"
>> input. Change it to type="button" and add return false; at the end of
>> your onclick function just in case. return false; will prevent the
>> button from continuing with its default behaviour once your function
>> is complete.
>>
>> Submit inputs are used to submit a form (without AJAX) to a url
>> provided in the action attribute of your form. Since your form doesn't
>> have an action attribute, it assumes that the form should be posted to
>> the current url. Your function probably works, but once it is
>> completed the form submits normally without waiting for AJAX response.
>>
>> 2009/8/17 efet <efetun...@gmail.com>:
>>
>>
>>
>> > I missed few ""s there thank you. I am pasting the updated code here.
>> > I just installed firebug. I dont receive any errors, what happens is
>> > page is refreshed. Before moving to an easier method, I want to learn
>> > this method first. I am just a beginner yet. Do you think page is
>> > refreshed because I have method="post" in my form?
>>
>> > Updated code:
>> > $(document).ready(function() {
>> > $("[name='signup']").click(function() {
>> > $.ajax({
>> > type: "POST",
>> > data: { PROCESS: "Add2Member",
>> > FIRSTNAME: "[name='FIRSTNAME']",
>> > LASTNAME: "[name='LASTNAME']", EMAILADDRESS: "[name='EMAILADDRESS']",
>> > PASSWORD: "[name='PASSWORD']", CITY: "[name='CITY']" },
>> > url: "default.cs.asp",
>> > success: function(output) {
>> > $("#SIGNUPFORM").html(output);
>> > $('#SIGNUPFORM').html("<h2>Contact Form
>> > Submitted!</h2>")
>> > }
>> > });
>> > });
