[jQuery] Re: Problem with submit button of an inserted form

[Cecil Westerhof]

2009/10/2 Giovanni Battista Lenoci <gian...@gmail.com>:
>> I have the following code:
>>        $(placeInDOM).replaceWith(header + fields + footer);
>>        $(placeInDOM).find(':submit').click(function() {
>>          alert("clicked the submit button");
>>          return false;
>>        });
>> The first statement places a form with a submit button in my page.
>> This works as it should.
>> With the second I want to give an alert instead of a submit when
>> clicking on the submit button. But it does not work.
>>
>> When I after the first statement execute:
>>        alert($(placeInDOM).find(':submit').html());
>> I get
>>    null
>>
>
> This is right, cause a subimit button doesn't have html in it...
>>
>> If I execute:
>>        alert($(placeInDOM).find(':submit'));
>> I get:
>>    [object Object]
>>
>> What am I doing wrong?
>>
>
> Try using console.log of firebug to see if the returned object contains what
> you're expecting.

That is a good tip. I'll use that next time.
I solved my problem. I know use:
        $(placeInDOM).replaceWith(header + fields + footer);
        $('.submit_' + formID).click(function() {
          form = $('#' + formID);
          form.fadeOut('normal');
          jQuery.post(cgiURL,
            form.serialize(),
            function(xml) {
              alert($(xml).find('status').text());
              form.fadeIn('normal');
            },
            "xml"
          );
          return false;
        });

This does what it should do. The only 'problem' is that the whole DOM
is traversed instead of only placeInDOM. If someone knows how to
optimize this ...

Is there a way to let the fadeOut be finished before continuing?


> A question, what placeInDOM contains? is an id? the html you're replacing
> contains the id?

div#contact_form

What is inserted starts with:
<form id = "contact_form" action = "/cgi-bin/contact3.cgi" method = "post">
<input name = "command" type = "hidden" value = "sendForm" />
<input name = "form"    type = "hidden" value = "contact" />
<table>
<tr>
<td>Organisatie</td>
<td><input name = "organisation" /></td>
</tr>
<tr>
<td>Soort Organisatie</td>
<td>
<select name = "organisationType">
<option value = "00">geen</option>
<option value = "01">Non Profit</option>
<option value = "02">ZZP</option>
<option value = "03">MKB</option>
<option value = "04">Anders</option>
</select>
</td>

and ends with:
<tr>
<td>Omschrijving</td>
<td><textarea name = "description"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<input type = "submit" value = "Versturen"  class = "submit_contact_form" />
<input type = "Reset"  value = "Wissen" />
</td>
</tr>
</table>
</form>

-- 
Cecil Westerhof